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

Question

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

What needs to change?

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

tharindu_DG · Accepted Answer · 2015-12-23 03:07:36Z

5

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

edited Dec 23, 2015 at 3:07

tharindu_DG

9,2997 gold badges55 silver badges69 bronze badges

answered Dec 23, 2015 at 2:06

lame_coder

3,1253 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike_Laird Over a year ago

Bingo, you got it, and thank you. Where you have 'dist/hello', it should be the path to the app component that loads in the component selector in index.html. In my case, that was - angular2-oPost/src/app. Of course, this brings up the old joke - my code doesn't work, I wonder why. Now my code works, I wonder why.

Mike_Laird Over a year ago

A nice added benefit is I'm seeing really fast load times - 20 to 30ms Nice.

ewahner Over a year ago

Simple...effective..this is what SO was made for.

Tim McNamara · Accepted Answer · 2015-12-23 11:44:00Z

0

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

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

answered Dec 23, 2015 at 11:44

Tim McNamara

1,3982 gold badges10 silver badges11 bronze badges

1 Comment

Mike_Laird Over a year ago

Thanks. The Console error is almost the same - GET localhost/src/boot[HTTP/1.1 404 Not Found 31ms] The Quickstart names a directory app. I name the same directory src That's the reason I have src in this section of code.

yonia · Accepted Answer · 2016-03-20 15:21:10Z

0

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

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

That should fix it

answered Mar 20, 2016 at 15:21

yonia

1,7511 gold badge14 silver badges12 bronze badges

Comments

Daniel C. Deng · Accepted Answer · 2016-10-06 01:12:27Z

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

Delete the entire node_modules folder.
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>

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related