I have upgraded to [email protected]. Both app.ts and boot.ts are in my src directory (vs. app in Quickstart). src and index.html are in the project directory - angular2-oPost, like the Quickstart example. I have tried a lot of things but always get - boot.js not found, error loading boot.js My index.html load scripts all load and are:

<base href="/src"/>
<!--1. Load library links for ES6-related imports, then load angular2 modules -->
<script src="./angular2-oPost/node_modules/systemjs/dist/system.src.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="./angular2-oPost/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/router.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
      }
    }
  });
  System.import('src/boot').then(null, console.error.bind(console));
</script>

boot.ts is from Quickstart and is simply:

"use strict";
import { bootstrap }    from 'angular2/platform/browser';
import { ResidenceApp } from './app';
bootstrap( ResidenceApp );

app.ts has some statements for imports, @Component, @View, @RouteConfig and a bootstrap statement. None get loaded. The Console error statements are:

GET http://localhost/src/boot.js [HTTP/1.1 404 Not Found 31ms]
15:53:05.058 Error: Unable to load script http://localhost/src/boot.js
Error loading http://localhost/src/boot.js
Stack trace: error@http://localhost/angular2-oPost/node_modules/systemjs/dist/system.src.js:2506:18
[2]</</r.prototype.run@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1994
[2]</</r.prototype.bind/<@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1718

I am using systemjs version 0.19.9 If I change the System.import statement to

System.import('src/boot.js')

then boot is found and loaded, but app.js bees the new problem, and so on to other ponents, if it (or they) are hard coded.

What needs to change?

I have upgraded to [email protected]. Both app.ts and boot.ts are in my src directory (vs. app in Quickstart). src and index.html are in the project directory - angular2-oPost, like the Quickstart example. I have tried a lot of things but always get - boot.js not found, error loading boot.js My index.html load scripts all load and are:

<base href="/src"/>
<!--1. Load library links for ES6-related imports, then load angular2 modules -->
<script src="./angular2-oPost/node_modules/systemjs/dist/system.src.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="./angular2-oPost/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="./angular2-oPost/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="./angular2-oPost/node_modules/angular2/bundles/router.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>System.config({
  packages: {
    src: {
      format: 'register',
      defaultExtension: 'js'
      }
    }
  });
  System.import('src/boot').then(null, console.error.bind(console));
</script>

boot.ts is from Quickstart and is simply:

"use strict";
import { bootstrap }    from 'angular2/platform/browser';
import { ResidenceApp } from './app';
bootstrap( ResidenceApp );

app.ts has some statements for imports, @Component, @View, @RouteConfig and a bootstrap statement. None get loaded. The Console error statements are:

GET http://localhost/src/boot.js [HTTP/1.1 404 Not Found 31ms]
15:53:05.058 Error: Unable to load script http://localhost/src/boot.js
Error loading http://localhost/src/boot.js
Stack trace: error@http://localhost/angular2-oPost/node_modules/systemjs/dist/system.src.js:2506:18
[2]</</r.prototype.run@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1994
[2]</</r.prototype.bind/<@http://localhost/angular2-oPost/node_modules/angular2/bundles/angular2-polyfills.min.js:1:1718

I am using systemjs version 0.19.9 If I change the System.import statement to

System.import('src/boot.js')

then boot is found and loaded, but app.js bees the new problem, and so on to other ponents, if it (or they) are hard coded.

What needs to change?

• javascript
• angular
• systemjs

• I'm using atom-typescript, and it shows "No errors" and piles my typescript files, if that is helpful to know. – Mike_Laird Commented Dec 22, 2015 at 21:30

4 Answers 4

Try below sequence of loading and configuring libraries,

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>

<script>
//configure system loader
     System.config({defaultJSExtensions: true});
</script>

<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>

<script>
 //bootstrap the Angular2 application
 System.import('dist/hello').catch(console.log.bind(console));
</script>

Ref: https://github./pkozlowski-opensource/ng2-play/blob/master/index.html

Not quite the same SystemJS configuration as the QuickStart. Have you tried:

System.config({
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});

i had the same problem on main.ts change the import to

import {AppComponent} from './app.ponent';

That should fix it

The same error just happens to me. If the above sequence of loading and configuring libraries does not work for you, try this.

1. Delete the entire node_modules folder.
2. Re-install by "npm install".

The reason it may work is that you might change the root name and the last run of "npm install" had included the absolute web path when it built the node_modules.

In addition, also pay attention to your packages defined in index.html. If you change any of the folder name that contains the app, for example, if you change the name from "app" to "modules", you need to change that in "packages:", too.

In my case, I placed boot under WebContent/boot folder, in which WebContent is the web root, so here is the script for System.config in index.html:

  <script>
  System.config({
    packages: {
      modules: {
        format: 'register',
        defaultExtension: 'js'
      },
      boot: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('./boot/boot')
        .then(null, console.error.bind(console));
  </script>