Kendo UI Angular : (SystemJS) 意外的标记 <

Question

我在使用 IIS 的 ASP.NET 核心解决方案上使用 VS2015 RC3、Angular2 2.0.0。

每当我尝试添加新的 UI 模块（例如下拉菜单或输入）时，我都会收到 SystemJS 错误，但奇怪的是我的按钮可以正常工作...

master.module.ts :

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';

@NgModule({
    imports: [
        CommonModule,
        MasterRouting,
        ButtonsModule,  // => Works fine and button is showing as expected 
        InputsModule,   // Error : Unexpected Token
        DropDownsModule // Error : Unexpected Token
    ],
    [...]

我收到这些错误（取决于我尝试在我的 "imports" 数组中添加哪个模块：

InputsModule 错误： 指向我的 master.modules.ts

中的导入行

zone.js:192 Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at Object.eval (http://localhost:39351/app/master/master.module.js:35:30)

下拉模块错误：

zone.js:192 Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at Object.eval (http://localhost:39351/node_modules/@progress/kendo-angular-dropdowns/dist/npm/js/combobox.component.js:630:19)

这个向我展示了 kendo 库中的导入：

module.exports = require("@telerik/kendo-dropdowns-common/dist/npm/js/bundle");

我确定我的 wwwroot 中有...

编辑： 正如您在错误列表中看到的那样，它正在尝试使用不正确的路径评估@telerik 包，所以我猜错误来自那里，但是那他们为什么不为文档中的 telerik 包设置 SystemJS 配置？我在那里遗漏了什么吗？

我完全迷路了，非常感谢任何帮助...

以下是一些其他文件，以备不时之需：

tsconfig.json :

{
  "compilerOptions": {
    "outDir": "./wwwroot/app/",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "inlineSourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "./node_modules/**",
    "./wwwroot/**",
    "./typings/**"
  ]
}

systemjs.config.js :

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        // Our components
        'app': 'app', // 'dist',

        // Angular2 + rxjs
        '@angular': 'node_modules/@angular',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        // Kendo Angular2
        '@progress/kendo-angular-buttons': 'node_modules/@progress/kendo-angular-buttons',
        '@progress/kendo-angular-dropdowns': 'node_modules/@progress/kendo-angular-dropdowns',
        '@progress/kendo-angular-inputs': 'node_modules/@progress/kendo-angular-inputs',
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        // Our components
        'app': { defaultExtension: 'js'},

        // Angular2 + rxjs 
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },

        '@progress/kendo-angular-buttons': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        '@progress/kendo-angular-dropdowns': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
        '@progress/kendo-angular-inputs': {
            main: './dist/npm/js/main.js',
            defaultExtension: 'js'
        },
    };

    /**** node_modules basic config ! Do not touch  ****/
    // name of packages to assimilate (angular 2 only here)
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];

    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }

    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);

    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
    /**** node_modules basic config ! Do not touch  ****/
})(this);

Answer 1

确实是因为 @telerik 包没有在 SystemJS 中管理...

按照 Telerik 文档，您可以在 plunkr links 中看到要添加到 systemjs.config.js 文件的 @telerik 包。

看到这个 link : http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

我可以在 npm 依赖项中看到包之间的不同依赖项，如果 Telerik 团队没有提到它们，这可能意味着不必担心它，因为它应该使用依赖项进行管理。

这是对我唯一合乎逻辑的解释，这意味着我没有正确使用 systemJS 文件。欢迎发表评论以完成此答案。

Answer 2

好吧，我也检查了这个问题，他们的按钮快速入门 systemjs.config.js 似乎与他们的按钮 plunkr 代码示例 systemjs.config.js 不同所以我要求他们提供有关正确方法的指导。

Kendo UI Angular : (SystemJS) 意外的标记 <

Kendo UI Angular : (SystemJS) Unexpected token <

typescript

systemjs

kendo-ui-angular2

angular