title: Kendo UI Angular : (SystemJS) Unexpected token <
body: <p>I'm using VS2015 RC3, Angular2 2.0.0 on an ASP.NET Core solution using IIS.</p>
  
  <p>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...</p>
  
  <p><strong>master.module.ts</strong> :</p>
  
  <pre><code>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,  // =&gt; Works fine and button is showing as expected 
          InputsModule,   // Error : Unexpected Token
          DropDownsModule // Error : Unexpected Token
      ],
      [...]
  </code></pre>
  
  <p>I get these errors (depending on which module I try to add in my "imports" array : </p>
  
  <p><strong>InputsModule error :</strong> pointing at the import line in my <strong>master.modules.ts</strong></p>
  
  <blockquote>
    <p>zone.js:192 Error: (SystemJS) Unexpected token &lt;  SyntaxError:
    Unexpected token &lt;
          at Object.eval (<a href="http://localhost:39351/app/master/master.module.js:35:30" rel="noreferrer">http://localhost:39351/app/master/master.module.js:35:30</a>)</p>
  </blockquote>
  
  <p><strong>DropdownsModule error :</strong> </p>
  
  <blockquote>
    <p>zone.js:192 Error: (SystemJS) Unexpected token &lt;  SyntaxError:
    Unexpected token &lt;
          at Object.eval (<a href="http://localhost:39351/node_modules/@progress/kendo-angular-dropdowns/dist/npm/js/combobox.component.js:630:19" rel="noreferrer">http://localhost:39351/node_modules/@progress/kendo-angular-dropdowns/dist/npm/js/combobox.component.js:630:19</a>)</p>
  </blockquote>
  
  <p>this one shows me the import in the kendo library : </p>
  
  <blockquote>
    <p>module.exports =
    require("@telerik/kendo-dropdowns-common/dist/npm/js/bundle");</p>
  </blockquote>
  
  <p>which I made sure I had in my wwwroot...</p>
  
  <p><strong>EDIT :</strong> 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 ?</p>
  
  <p><a href="https://i.stack.imgur.com/DJH6r.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DJH6r.png" alt="enter image description here"></a></p>
  
  <p>I'm completely lost, so any help with be greatly appreciated...</p>
  
  <hr>
  
  <p>Here are some others files in case they help :</p>
  
  <p><strong>tsconfig.json</strong> :</p>
  
  <pre><code>{
    "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/**"
    ]
  }
  </code></pre>
  
  <p><strong>systemjs.config.js</strong> :</p>
  
  <pre><code>(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);
  </code></pre>