Error when loading TabStrip for angular 2

[Rafid]

 

I get an error when trying to load a TabStrip for angular 2. I already use multiple Kendo components ( GridModule, ChartsModule, InputsModule ) but when I try to import a TabStrip I get the following error:

 

Error: (SystemJS) Can't resolve all parameters for e: (?). Error: Can't resolve all parameters for e: (?). at SyntaxError.ZoneAwareError (http://localhost:58498/node_modules/zone.js/dist/zone.js:958:33) at SyntaxError.BaseError [as constructor] (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20) at new SyntaxError (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20) at CompileMetadataResolver._getDependenciesMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18670:35) at CompileMetadataResolver._getTypeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18545:30) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18185:28) at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18061:27) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18262:58) at Array.forEach (native) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18261:45) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27377:62) at Array.forEach (native) at JitCompiler._loadModules (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27376:47) at JitCompiler._compileModuleAndComponents (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27331:56) at JitCompiler.compileModuleAsync (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27297:25) Evaluating http://localhost:58498/main.js Error loading http://localhost:58498/main.js at SyntaxError.ZoneAwareError (http://localhost:58498/node_modules/zone.js/dist/zone.js:958:33) at SyntaxError.BaseError [as constructor] (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20) at new SyntaxError (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20) at CompileMetadataResolver._getDependenciesMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18670:35) at CompileMetadataResolver._getTypeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18545:30) at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18185:28) at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18061:27) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18262:58) at Array.forEach (native) at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:18261:45) at eval (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27377:62) at Array.forEach (native) at JitCompiler._loadModules (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27376:47) at JitCompiler._compileModuleAndComponents (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27331:56) at JitCompiler.compileModuleAsync (http://localhost:58498/node_modules/@angular/compiler/bundles/compiler.umd.js:27297:25) Evaluating http://localhost:58498/main.js Error loading http://localhost:58498/main.js at addToError (http://localhost:58498/node_modules/systemjs/dist/system.src.js:122:78) [<root>] at linkSetFailed (http://localhost:58498/node_modules/systemjs/dist/system.src.js:687:15) [<root>] at http://localhost:58498/node_modules/systemjs/dist/system.src.js:624:9 [<root>] at doDynamicExecute (http://localhost:58498/node_modules/systemjs/dist/system.src.js:769:7) [<root>] at link (http://localhost:58498/node_modules/systemjs/dist/system.src.js:964:20) [<root>] at doLink (http://localhost:58498/node_modules/systemjs/dist/system.src.js:623:7) [<root>] at updateLinkSetOnLoad (http://localhost:58498/node_modules/systemjs/dist/system.src.js:669:18) [<root>] at http://localhost:58498/node_modules/systemjs/dist/system.src.js:485:11 [<root>] at Zone.run (http://localhost:58498/node_modules/zone.js/dist/zone.js:126:43) [<root> => <root>] at http://localhost:58498/node_modules/zone.js/dist/zone.js:679:57 [<root>] at Zone.runTask (http://localhost:58498/node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>] at drainMicroTaskQueue (http://localhost:58498/node_modules/zone.js/dist/zone.js:529:35) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:58498/node_modules/zone.js/dist/zone.js:420:25) [<root>]

 

Systemjs just points to the js file:

 

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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid/dist/cdn/js/kendo-angular-grid.js',
            '@progress/kendo-angular-l10n': 'npm:@progress/kendo-angular-l10n/dist/cdn/js/kendo-angular-l10n.js',
            '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl/dist/cdn/js/kendo-angular-intl.js',
            '@progress/kendo-drawing': 'npm:@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js',
            '@progress/kendo-data-query': 'npm:@progress/kendo-data-query/dist/cdn/js/kendo-data-query.js',
            '@progress/kendo-angular-inputs': 'npm:@progress/kendo-angular-inputs/dist/cdn/js/kendo-angular-inputs.js',
            '@progress/kendo-angular-layout': 'npm:@progress/kendo-angular-layout/dist/cdn/js/kendo-angular-layout.js',
            'angular2-uuid': 'npm:angular2-uuid/index.js',
            '@progress/kendo-angular-charts': 'npm:@progress/kendo-angular-charts/dist/cdn/js/kendo-angular-charts.js',


            // other libraries
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'rxjs': 'npm:rxjs',
    
        },

 

and the module.ts file imports it

import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { GridModule } from '@progress/kendo-angular-grid';
import { ChartsModule } from '@progress/kendo-angular-charts';

import { TabStripModule } from '@progress/kendo-angular-layout';

import { InputsModule } from '@progress/kendo-angular-inputs'

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, TabStripModule, GridModule, ChartsModule, InputsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],

    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {

}

 

Any idea what I do wrong?

 

[Dimiter Topalov]

Hi Rafid,

The described issue seems to be caused by a breaking change, introduced in our recent update:

https://github.com/telerik/kendo-angular/issues/340

The Layout package has a peer dependency on the current version of the l10n package. We are working on updating our documentation accordingly.

Meanwhile, please update the @progress/kendo-angular-l10n package to its latest version:

npm install --save @progress/kendo-angular-l10n@^0.2.0

I hope this helps, but if the problem persists, please send us an isolated runnable project (similar to our demos), where it can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress