0

Uncaught (in promise) Error: SyntaxError: Unexpected token <(…) in system.src.js when trying to run angular1 and angular2 simultaneously using upgrade adapter.

Iam using https://angular.io/docs/ts/latest/guide/upgrade.html as reference.

systemjs.config.js

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');

index.html

<!doctype html>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-title" content="UpToDate" />
    <meta name="format-detection" content="telephone=no" />
    <link href="/app/assets/utd-icon.png" rel="apple-touch-icon" />
    <meta name="fragment" content="!" />
    <link rel="canonical" href="{{configCtrl2.info.canonicalUrl}}"/>
    <meta name="description" content="{{configCtrl2.info.metaDescription}}"/>
    <meta charset="UTF-8"/>

    <style type="text/css">
        #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;
        }
    </style>




    <!-- inject:app:css --><link rel="stylesheet" href="/app/assets/app-a9ca3a4af9.css"><!-- endinject -->
    <!-- inject:pace:js --><script src="/app/dist/pace-fe9335c2fc.min.js"></script><!-- endinject -->



    <!-- inject:system:js --><script src="/app/dist/system.src.js"></script><!-- endinject -->


    <!-- inject:router:js --><script src="/app/dist/router.dev.min.js"></script><!-- endinject -->
    <!-- inject:http:js --><script src="/app/dist/http.dev.min.js"></script><!-- endinject -->


    <!-- inject:systemjs:js --><script src="/app/dist/systemjs.config.js"></script><!-- endinject -->

    <base href="/index.html">

</head>

<my-app>Loading...</my-app>
</body>

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app/app.component.ts';
bootstrap(AppComponent);

upgrade-adapter.ts

import { UpgradeAdapter} from '@angular/upgrade';

export const upgradeAdapter = new UpgradeAdapter();

I have tried almost everything and followed the instructions per the upgrade exercise but I cant seem to shake off this error.

system.src.js:1 Uncaught (in promise) Error: SyntaxError: Unexpected token <(…)

system.src.js:1 Uncaught (in promise) Error: SyntaxError: Unexpected token <(…)

The index page loads with Loading...

file structure

app
|
|__components
|__dist
|    |___systemjs.config.js
|    |___system.src.js
|
|__index.html
|__main.ts
Shruti Srivastava
  • 165
  • 13
  • So what is in system.src.js, the file that contains the actual syntax error? – Thomas Jul 05 '16 at 15:38
  • Its downloaded as a part of the node modules itself. Ill edit and add that as well. – Shruti Srivastava Jul 05 '16 at 15:40
  • This is usually a result of a path to one of your files being incorrect? Or an import path in one of your ts files is incorrect. – khollenbeck Jul 05 '16 at 15:43
  • @KrisHollenbeck thats what my understanding is as well, but the error is so vague, it is difficult to find the source. Is there anything you spotted ? – Shruti Srivastava Jul 05 '16 at 16:49
  • Honestly its hard to tell without knowing what your directory structure looks like. And or how your server might be set up. Did any files fail to load? If so I would look there first. – khollenbeck Jul 05 '16 at 16:59
  • Nope, all the files loaded. My directory structure is something like this:(see edited post) – Shruti Srivastava Jul 05 '16 at 17:55
  • Should this be changed to – Arpit Agarwal Jul 05 '16 at 18:18
  • @ArpitAgarwal I tried that too. Still the same error persists. – Shruti Srivastava Jul 05 '16 at 19:02
  • Have u added this map and package in system's config. System.config({ map, packages }); you should be importing main in index lik – Arpit Agarwal Jul 06 '16 at 05:20
  • @ArpitAgarwal I have a system.config.js file that has the packages and maps and also System.import('app/main'). And I have imported this file in the index.html. You can see it above in the code snippets. – Shruti Srivastava Jul 06 '16 at 12:48
  • In the snippt doesn't look at correct places. You have map and package but not set on System. Import has to go in index and should be done after everything is imported. Just give it a try. Also make app as a last entry in map and packages – Arpit Agarwal Jul 06 '16 at 13:01
  • @ArpitAgarwal changed it but same issue. I took a look at the developer tools of Google Chrome and noticed in the network section that the index.html is being served instead of the main.js and that is why that error of unexpected token '< ' is there. Since its expecting a js file but html file is being served. – Shruti Srivastava Jul 06 '16 at 13:45
  • Possible duplicate of [Index.html served by the web server instead of main.js (Angularjs2)](http://stackoverflow.com/questions/38226099/index-html-served-by-the-web-server-instead-of-main-js-angularjs2) – Arpit Agarwal Jul 06 '16 at 17:25
  • No luck . In fact now this: system.src.js:1 Uncaught (in promise) Error: SyntaxError: Unexpected token < Evaluating https://utd04162.utd.com/contents/resApp/main.js Error loading https://utd04162.utd.com/contents/resApp/main.jst @ system.src.js:1g @ system.src.js:1(anonymous function) @ system.src.js:1y @ system.src.js:1w @ system.src.js:1p @ system.src.js:1h @ system.src.js:1(anonymous function) @ system.src.js:1 – Shruti Srivastava Jul 08 '16 at 15:17

0 Answers0