Kendo UI for Angular 2 - Error while loading LayoutModule

Question

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.

Answer 1

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