Kendo UI for Angular 2 - 加载 LayoutModule 时出错

Question

当我尝试在我的应用程序中加载 LayoutModule 时出现以下错误：

(SystemJS) 无法解析 PanelBarComponent 的所有参数：([object Object], [object Object], ?, [object Object]).

这是我的 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);

然后在 app.module:

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

imports: [
...
LayoutModule,
...
]

根据 http://www.telerik.com/kendo-angular-ui/components/layout/，所有对等依赖项似乎都存在。我不确定是什么问题。

谢谢。

Answer 1

我刚刚解决了一个类似的错误，但来自可排序组件。

问题源于 @progress/kendo-angular-l10n。拿到这个依赖的最新版本后，错误修复：

npm install --save @progress/kendo-angular-l10n@latest

Kendo UI for Angular 2 - 加载 LayoutModule 时出错

Kendo UI for Angular 2 - Error while loading LayoutModule

kendo-ui-angular2