Error when loading TabStrip for angular 2

2 posts, 0 answers
  1. Rafid
    Rafid avatar
    1 posts
    Member since:
    Sep 2016

    Posted 23 Mar Link to this post

     

    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?

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 27 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top