Geek Answers Handbook

Kendo UI Angular: (SystemJS) Unexpected Token <

I am using VS2015 RC3, Angular2 2.0.0 to solve ASP.NET Core using IIS.

Whenever I try to add a new user interface module, such as drop-down menus or inputs, I get a SystemJS error, but it is strange that my buttons work without any problems ...

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'm trying to add to the "import" array:

Error InputsModule: pointing to import line in my master.modules.ts

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

DropdownsModule Error:

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

this shows me the import in the kendo library:

module.exports = require ("@ Telerik / kendo-dropdown-total / distance / NPM / JS / packet");

which I made sure that I have in my wwwroot ...

EDIT:. As you can see in the list of errors, it tries to evaluate the @telerik package with the wrong path, so I think the error comes from there, but then why do they configure SystemJS for telerik packages in the documentation? Am I missing something?

enter image description here

I am completely lost, so any help is greatly appreciated ...

Here are some other files if 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);
+5
source share
2 answers

This is really because @telerik packages are not managed in SystemJS ...

As you can follow the Telerik documentation, you can see @telerik packages in the plunkr links to add to the systemjs.config.js file.

See this link: http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/

I see different dependencies between packages in npm dependencies, and if the Telerik team does not mention them, this probably means that you should not worry about it, since it should be managed with dependencies.

This is the only logical explanation for me, and that means that I am not using the systemJS file correctly. Comments can be executed to respond.

0
source

Well, I also looked at this problem, and it seems that their quickstart systemjs.config.js button is different from their plunkr code sample systemjs.config.js button so I ask them to give directions on the correct approach.

+1
source

More articles:


All Articles