title: Uncaught (in promise) Error: SyntaxError: Unexpected token <(…) in system.src.js
body: <p>Uncaught (in promise) Error: SyntaxError: Unexpected token &lt;(…) in system.src.js when trying to run angular1 and angular2 simultaneously using upgrade adapter.</p>
  
  <p>Iam using <a href="https://angular.io/docs/ts/latest/guide/upgrade.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/upgrade.html</a> as reference. </p>
  
  <p>systemjs.config.js</p>
  
  <pre><code>var map = {
  'app':                        '/app', // 'dist',
  '@angular':                   '/node_modules/@angular',
  'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
  'rxjs':                       '/node_modules/rxjs'
  };
  var packages = {
  '/app':                       { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  
  System.import('app/main');
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  
      &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
      &lt;meta name="apple-mobile-web-app-title" content="UpToDate" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;link href="/app/assets/utd-icon.png" rel="apple-touch-icon" /&gt;
      &lt;meta name="fragment" content="!" /&gt;
      &lt;link rel="canonical" href="{{configCtrl2.info.canonicalUrl}}"/&gt;
      &lt;meta name="description" content="{{configCtrl2.info.metaDescription}}"/&gt;
      &lt;meta charset="UTF-8"/&gt;
  
      &lt;style type="text/css"&gt;
          #appContainer {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              background: url(/app/assets/utd-menu/utd-icon.png) no-repeat;
              background-attachment: fixed;
              background-position: center;
              background-size: 48px 48px;
          }
      &lt;/style&gt;
  
  
  
  
      &lt;!-- inject:app:css --&gt;&lt;link rel="stylesheet" href="/app/assets/app-a9ca3a4af9.css"&gt;&lt;!-- endinject --&gt;
      &lt;!-- inject:pace:js --&gt;&lt;script src="/app/dist/pace-fe9335c2fc.min.js"&gt;&lt;/script&gt;&lt;!-- endinject --&gt;
  
  
  
      &lt;!-- inject:system:js --&gt;&lt;script src="/app/dist/system.src.js"&gt;&lt;/script&gt;&lt;!-- endinject --&gt;
  
  
      &lt;!-- inject:router:js --&gt;&lt;script src="/app/dist/router.dev.min.js"&gt;&lt;/script&gt;&lt;!-- endinject --&gt;
      &lt;!-- inject:http:js --&gt;&lt;script src="/app/dist/http.dev.min.js"&gt;&lt;/script&gt;&lt;!-- endinject --&gt;
  
  
      &lt;!-- inject:systemjs:js --&gt;&lt;script src="/app/dist/systemjs.config.js"&gt;&lt;/script&gt;&lt;!-- endinject --&gt;
  
      &lt;base href="/index.html"&gt;
  
  &lt;/head&gt;
  
  &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>main.ts</p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  import { AppComponent } from './app/app.component.ts';
  bootstrap(AppComponent);
  </code></pre>
  
  <p>upgrade-adapter.ts</p>
  
  <pre><code>import { UpgradeAdapter} from '@angular/upgrade';
  
  export const upgradeAdapter = new UpgradeAdapter();
  </code></pre>
  
  <p>I have tried almost everything and followed the instructions per the upgrade exercise but I cant seem to shake off this error.</p>
  
  <pre><code>system.src.js:1 Uncaught (in promise) Error: SyntaxError: Unexpected token &lt;(…)
  
  system.src.js:1 Uncaught (in promise) Error: SyntaxError: Unexpected token &lt;(…)
  </code></pre>
  
  <p>The index page loads with Loading...</p>
  
  <p>file structure</p>
  
  <pre><code>app
  |
  |__components
  |__dist
  |    |___systemjs.config.js
  |    |___system.src.js
  |
  |__index.html
  |__main.ts
  </code></pre>