I am getting the following error when I try to load the LayoutModule in my app:
(SystemJS) Can't resolve all parameters for PanelBarComponent: ([object Object], [object Object], ?, [object Object]).
Here is my systemjs.config.js:
(function (global) {
System.config({
baseURL: '.',
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
//kendo components
'#progress/kendo-angular-l10n': 'npm:#progress/kendo-angular-l10n',
'#progress/kendo-angular-intl': 'npm:#progress/kendo-angular-intl',
'#progress/kendo-angular-grid': 'npm:#progress/kendo-angular-grid',
'#progress/kendo-angular-dateinputs': 'npm:#progress/kendo-angular-dateinputs',
'#progress/kendo-angular-buttons': 'npm:#progress/kendo-angular-buttons',
'#progress/kendo-angular-dropdowns': 'npm:#progress/kendo-angular-dropdowns',
'#progress/kendo-angular-inputs': 'npm:#progress/kendo-angular-inputs',
'#progress/kendo-popup-common': 'npm:#progress/kendo-popup-common',
'#progress/kendo-angular-popup': 'npm:#progress/kendo-angular-popup',
'#progress/kendo-angular-dialog': 'npm:#progress/kendo-angular-dialog',
'#progress/kendo-data-query': 'npm:#progress/kendo-data-query',
'#progress/kendo-date-math': 'npm:#progress/kendo-date-math',
'#progress/kendo-angular-layout': 'npm:#progress/kendo-angular-layout',
'#telerik/kendo-intl': 'npm:#telerik/kendo-intl',
'#telerik/kendo-draggable': 'npm:#telerik/kendo-draggable',
'#telerik/kendo-dropdowns-common': 'npm:#telerik/kendo-dropdowns-common',
'#telerik/kendo-inputs-common': 'npm:#telerik/kendo-inputs-common',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ng-block-ui': 'npm:ng-block-ui/bundles/umd',
'ng2-toasty': 'npm:ng2-toasty/bundles/index.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'ng-block-ui': { main: 'index.js', defaultExtension: 'js' },
'#telerik/kendo-draggable': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#telerik/kendo-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-data-query': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-l10n': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-grid': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-dateinputs': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-buttons': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-dropdowns': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-inputs': { main: './dist/cdn/js/kendo-angular-inputs.js', defaultExtension: 'js' },
'#progress/kendo-popup-common': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-popup': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-dialog': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-layout': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-date-math': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#telerik/kendo-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#progress/kendo-angular-intl': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#telerik/kendo-dropdowns-common': { main: './dist/npm/main.js', defaultExtension: 'js' },
'#telerik/kendo-inputs-common': { main: './dist/npm/main.js', defaultExtension: 'js' }
}
});
})(this);
and then in the app.module:
...
import { LayoutModule } from '#progress/kendo-angular-layout';
...
imports: [
...
LayoutModule,
...
]
All the peer dependencies seems to be there according to http://www.telerik.com/kendo-angular-ui/components/layout/. I am not sure what the issue could be.
Thank you.
I've just worked through a similar error, but from the Sortable Component.
The issue stemmed from #progress/kendo-angular-l10n. After getting the latest version of this dependency, the error was fixed:
npm install --save #progress/kendo-angular-l10n#latest
Related
I have added mongoose via:
npm install mongoose --save
npm install #types/mongoose --save
and I have the systemjs.config.js file:
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
//etc...
'mongoose': 'npm:mongoose'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
//etc...
mongoose: {
defaultExtension: 'js'
}
}
});
})(this);
but I'm getting this 404 error:
404 GET /node_modules/mongoose/
and this is the console log error:
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/mongoose/(…)
Please help me.thanks in advance
I am trying to implement the ng2-smarttable in my Angular2 project and returns me the following errors in the console,
GET http://localhost:3000/traceur 404 (Not Found)
I tried running a command "npm install" by deleting the ng2-smart-table , but then it returns the same error.
**My System.js file**
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'underscore': './node_modules/underscore/underscore.js'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler':
'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-
browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-
dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/http/testing': 'npm:#angular/http/bundles/http-
testing.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'ng2-smart-table': 'npm:ng2-smart-table',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
/** Path for ng2-file-upload */
'ng2-file-upload' : 'npm:ng2-file-upload',
'ng2-drag-drop': 'npm:ng2-drag-drop',
'ng2-dnd': 'npm:ng2-dnd',
'underscore': 'npm:underscore'
},
// packages tells the System loader how to load when no filename and/or
no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
/** Configuration for ng2-file-upload */
'ng2-file-upload' : {
main: './ng2-file-upload.js',
defaultExtension: 'js'
},
'ng2-smart-table': {main: 'index.js', defaultExtension: 'js' } ,
'ng2-drag-drop': { main: '/index.js', defaultExtension: 'js' },
'underscore': { main: '/underscore.js', defaultExtension: 'js' },
'ng2-dnd': { main: '/bundles/index.umd.js', defaultExtension: 'js' }
},
});
})(this);
My app.module.ts if file is as follows,
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import {DndModule} from 'ng2-dnd';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AppConfig } from './app.config';
import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, SchemaService }
from
'./_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { UploadComponent } from './upload/index';
import { ReadComponent } from './read/index';
import { DragComponent } from './drag/index';
#NgModule({
imports: [
BrowserModule,
DndModule.forRoot(),
FormsModule,
HttpModule,
routing,
Ng2DragDropModule,
Ng2SmartTableModule
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
FileSelectDirective,
UploadComponent,
ReadComponent,
DragComponent
],
providers: [
AppConfig,
AuthGuard,
AlertService,
AuthenticationService,
UserService,
SchemaService
],
bootstrap: [AppComponent]
})
export class AppModule { }
The Error message I get when I use 'ng2-smart-table': { main: 'bundles/table.umd.js', defaultExtension: 'js' },
My "app.module.ts" file is as shown below:
You cannot use ng2-smart-table like this.
The ng2-smart-table release target is not ES5, but ES5. SystemJS knows that the index.js is in ES6 (and will not run in many browsers by default) and tries to transpile it using traceur to ES5. Although, there is bundled ES5 file which can be loaded by SystemJS. It is located in ng2-smart-table/bundles/table.umd.js. I am not very familiar with SystemJS, but you may try this:
'ng2-smart-table': {main: 'bundles/table.umd.js', defaultExtension: 'js' }
For the future, please remember that traceur problems in SystemJS usually means that you need to point bundled ES5 library file instead of, for example, index.js.
P.S.: This would not be a problem with angular-cli.
I am facing an issue after upgrading from Angular 2 RC5 to Angular 2 final version (2.1.1). I am using system.js.
My all typescript code was working fine before upgrading and I did not update any of it.
Here is the error I keep getting :
Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
Evaluating http://localhost:8888/traceur.js
Error loading http://localhost:8888/traceur.js
Error loading http://localhost:8888/node_modules/#angular/router/index.js as "#angular/router" from http://localhost:8888/js/typescript/app.module.jsZoneDelegate.invoke
I copied the package.json from Angular 2 docs (https://angular.io/docs/ts/latest/guide/npm-packages.html)
And here is my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { routing } from './app.routes';
import { SharedModule } from './shared/shared.module';
import { RouterModule } from '#angular/router';
#NgModule({
imports: [ BrowserModule,
RouterModule,
FormsModule,
HttpModule,
SharedModule,
routing ],
bootstrap: [ AppComponent ],
})
export class AppModule {}
EDIT : Here is my sytemjs.config.js file:
var map = {
'app': 'app', // 'dist',
'angular2': 'node_modules/angular2',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'zone.js': 'node_modules/zone.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
'moment': 'node_modules/moment',
'express': 'node_modules/express'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'zone.js': { main: 'dist/index.js', defaultExtension: 'js' },
'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
'notifications': { main: 'components.js', defaultExtension: 'js' },
'angular2-recaptcha': { defaultExtension: 'js', main:'index' },
'rxjs' : {main: 'Rx'},
'#angular/core' : {main: 'bundles/core.umd.js'},
'#angular/common' : {main: 'bundles/common.umd.js'},
'#angular/upgrade' : {main: 'bundles/upgrade.umd.js'},
'#angular/compiler' : {main: 'bundles/compiler.umd.js'},
'#angular/forms' : {main: 'bundles/forms.umd.js'},
'#angular/router' : {main: 'bundles/router.umd.js'},
'#angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'},
'#angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
'#angular/http' : {main: 'bundles/http.umd.min.js'}
};
and my app.routes.ts file:
import { Routes, RouterModule } from '#angular/router';
// Components
import { HomeComponent } from './shared/components/home.component';
import { ClubComponent } from './shared/components/club.component';
import { BusinessPageComponent } from './shared/components/business-page.component';
const appRoutes: Routes = [
// Child routing
{
path: 'profil',
loadChildren: '/js/typescript/profile/profile.module#ProfileModule'
},
{
path: 'recherche',
loadChildren: '/js/typescript/job-search/job-search.module#JobSearchModule'
},
// Business page
{ path: 'etablissement/:businessId', component: BusinessPageComponent },
{ path: 'club/:clubId', component: BusinessPageComponent },
// Root
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
];
// - Updated Export
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
I'm using typescript and angular2 and I want to use SockJS in my project. I run: npm install sockjs-client. Now I want to add mapping of node_modules/sockjs-client in systemjs.config.js. It is how the file looks now:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'sockjs-client': 'npm:sockjs-client',
'stompjs': 'npm:stompjs/lib/stomp.min.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
And I've the following exception in the browser:
localhost/:16 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/sockjs-client(…)
What is the proper systemjs mapping for sockjs-client library?
Try:
'sockjs-client': 'npm:sockjs-client/dist/sockjs.js'
I have installed new version RC Angular 2. Everything works fine, but my requests for angular dependencies are very bad. I understand, then system js is loading this dependencies asynchronous, but I have still 285 requests! Is it all really needed? Complete transferred is about 3.3MB, it is very bad for me. I there way, how to do it more efficiently?
Here is my System JS config:
(function (global) {
// map tells the System loader where to look for things
var map = {
'input': '/js/components', // 'dist',
'rxjs': '/rxjs',
'angular2-in-memory-web-api': '/angular2-in-memory-web-api',
'#angular': '/#angular',
'primeng': '/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'input': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
// meta tells the System loader how to load dependencies. In this case for custom scripts it is Global -> <script ... />
var meta = {
'/js/javascript.min.js': { format: 'global' },
'/js/angularDep.min.js': { format: 'global' }
}
var packageNames = [
'#angular/core',
'#angular/platform-browser-dynamic',
'#angular/compiler',
'#angular/platform-browser',
'#angular/common'
// '#angular/compiler',
// '#angular/core',
// '#angular/http',
// '#angular/platform-browser',
// '#angular/platform-browser-dynamic',
// '#angular/router',
// '#angular/router-deprecated',
// '#angular/testing',
// '#angular/upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
meta: meta
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
angularDep bundle
paths.documentRoot + "scripts/vendor/es6-shim/es6-shim.js",
paths.documentRoot + "scripts/vendor/zone.js/zone.js",
paths.documentRoot + "scripts/vendor/reflect-metadata/Reflect.js",
All bundles I have minified, but network trafic still look like this:
Thanks for your time.
Using systemjs-builder with Gulp you can bundle Angular 2 with your app code and bundle your other libraries separately.
I bundled any library I would reference directly in HTML into a vendors.min.js, and any library referenced through my system.config.js plus app code into an app.min.js. In this example you can see that all the dependencies in Tour of Heroes are loaded into the page in <10 network requests (source code).
gulpfile.js
// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
return gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/semantic-ui/dist/semantic.min.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/es6-promise/dist/es6-promise.min.js',
'node_modules/systemjs/dist/system.src.js',
'system.config.js',
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/lib/js'));
});
// Compile TypeScript to JS
gulp.task('compile:ts', function () {
return gulp
.src([
"src/**/*.ts",
"typings/*.d.ts"
])
.pipe(tsc({
"module": "system",
"moduleResolution": "node",
"outDir": "public/dist/js",
"target": "ES5"
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public/dist'));
});
// Generate systemjs-based builds
gulp.task('bundle:js', function() {
var builder = new sysBuilder('public', './system.config.js');
return builder.buildStatic('app', 'public/dist/js/app.min.js');
});
// Minify JS bundle
gulp.task('minify:js', function() {
return gulp
.src('public/dist/js/app.min.js')
.pipe(uglify())
.pipe(gulp.dest('public/dist/js'));
});
gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);
system.config.js
// map tells the System loader where to look for things
var map = {
'app': 'dist/js',
'rxjs': 'lib/js/rxjs',
'zonejs': 'deps/zone.js/dist',
'crypto': '#empty',
'reflect-metadata': 'lib/js/reflect-metadata',
'#angular': 'lib/js/#angular',
'ng2-translate': 'lib/js/ng2-translate',
'angular2-infinite-scroll': 'lib/js/angular2-infinite-scroll',
'lodash': 'lib/js/lodash',
'moment': 'lib/js/moment',
'angular2-moment': 'lib/js/angular2-moment',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zonejs': { main: 'zone', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect', defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js' },
'angular2-moment': { main: 'index', defaultExtension: 'js' },
'angular2-infinite-scroll': { main: 'angular2-infinite-scroll', defaultExtension: 'js' },
'lodash': { main: 'index', defaultExtension: 'js' },
'ng2-translate': { main: 'ng2-translate', defaultExtension: 'js' },
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
System.config({
map: map,
packages: packages
});