Kendo UI Angular:(SystemJS)意外令牌< [英] Kendo UI Angular : (SystemJS) Unexpected token <
问题描述
我在使用IIS的ASP.NET Core解决方案上使用VS2015 RC3，Angular2 2.0.0.
I'm using VS2015 RC3, Angular2 2.0.0 on an ASP.NET Core solution using IIS.
每当我尝试添加新的UI模块(例如下拉菜单或输入)时，都会收到SystemJS错误，但奇怪的是我的按钮可以正常工作...
Whenever I try to add a new UI module such as dropdowns or inputs, I get a SystemJS error, but the weird thing is that my buttons work without any issue...
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
],
[...]
我得到这些错误(取决于我尝试在我的导入"数组中添加哪个模块:
I get these errors (depending on which module I try to add in my "imports" array :
InputsModule错误::指向我的 master.modules.ts
zone.js:192错误:(SystemJS)意外令牌<语法错误: 意外令牌< 在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/app/master/master.module.js:35:30)
DropdownsModule错误:
zone.js:192错误:(SystemJS)意外令牌<语法错误: 意外令牌< 在Object.eval( http://localhost:39351/node_modules/@progress/kendo-angular-dropdowns/dist/npm/js/combobox.component.js:630:19 )
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库中的导入:
this one shows me the import in the kendo library :
module.exports = require("@ telerik/kendo-dropdowns-common/dist/npm/js/bundle");
module.exports = require("@telerik/kendo-dropdowns-common/dist/npm/js/bundle");
我确定我的wwwroot中有...
which I made sure I had in my wwwroot...
正如您在错误列表中所看到的那样，它正在尝试使用错误的路径来评估@telerik捆绑包，因此我想错误是从那里来的，但是为什么不这样做呢?他们在文档中为telerik软件包设置了SystemJS配置?我在那儿想什么吗?
EDIT : As you can see in the error list, it's trying to evaluate the @telerik bundle with an incorrect path, so I guess the error is coming from there, but then why don't they setup SystemJS configuration for the telerik packages in the documentation ? Am I missing something there ?
我完全迷路了，因此任何帮助都将不胜感激...
I'm completely lost, so any help with be greatly appreciated...
这里还有一些其他文件，以防万一:
Here are some others files in case they help :
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);
推荐答案
确实是因为@telerik软件包未在SystemJS中进行管理...
It was indeed because of the @telerik packages not being managed in SystemJS...
由于您可以遵循Telerik文档，因此可以在plunkr链接中看到@telerik程序包，以将其添加到systemjs.config.js文件中.
As you can follow the Telerik documentation, you can see in the plunkr links the @telerik packages to add to the systemjs.config.js file.
查看此链接: http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/
我可以在npm依赖关系中看到软件包之间的不同依赖关系，如果Telerik团队没有提及它们，那可能意味着人们不必担心它，因为应该通过依赖关系进行管理.
I can see in the npm dependencies the different dependencies between the packages, and if the Telerik team is not mentionning them, it probably means one must not worry about it as it should be managed with dependencies.
这是对我唯一的合乎逻辑的解释，这意味着我没有正确使用systemJS文件. 欢迎发表评论以完成此答案.
This is the only logical explanation to me, and that means I don't use the systemJS file correctly. Comments are welcome to complete this answer.
这篇关于Kendo UI Angular:(SystemJS)意外令牌<的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
