Mike_Laird Mike_Laird - 1 year ago 58
Javascript Question

cannot load boot.js while following Angular2 Quickstart for beta.0

I have upgraded to Angular2@2.0.0-beta.0. 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 -->
packages: {
src: {
format: 'register',
defaultExtension: 'js'
System.import('src/boot').then(null, console.error.bind(console));

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

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


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

What needs to change?

Answer Source

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>

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

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

 //bootstrap the Angular2 application

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download