Search code examples
javascriptangularsystemjs

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 -->
<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 becomes the new problem, and so on to other components, if it (or they) are hard coded.

What needs to change?


Solution

  • 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.com/pkozlowski-opensource/ng2-play/blob/master/index.html