Angular2 + System.js - make all files load locally

2019-03-05 08:08发布

问题:

I'm making Angular2 app, and the main HTML is this one:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>App</title>
        <script src="./lib/traceur-runtime.js"></script>
        <script src="./lib/system.js"></script>
        <script src="./lib/angular2.dev.js"></script>
    </head>
    <body>

        <app></app>
        <script src="./js/bootstrap.js"></script>

    </body>
</html>

My goal is to make all files load locally. So - when I put those three files in the lib folder - I saw in the network inspector that it can't load "es6-modules-loader@0.16.6.js" from there, so I downloaded that file from Internet and put it in the "lib" folder. Then all worked fine :)

BUT:

Today the network connections stopped for a while, and I couldn't run the project, cause it actually loaded two more files from the net:

https://github.jspm.io/jmcriffey/bower-traceur@0.0.87.js
https://github.jspm.io/jmcriffey/bower-traceur@0.0.87/traceur.js

I see them defined at the end of system.js.

So my question is: How can I make everything loads from the local filesystem?

回答1:

This is my set up, I hope it works for you

I installed all this packages through npm.

<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>

<!-- alpha35 -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

With simply this, systemjs will not be able to find any of the angular2 files, so you have to add paths in System.config to tell to systemjs where angular2's files are.

System.config({
    traceurOptions: {
        annotations: true,
        types: true,
        memberVariables: true
    },
    paths: {
       'angular2/*' : 'node_modules/angular2/*'
    },
    defaultJSExtensions: true // or you specify the .js
});

This is my set up, not necessarily the best one, but it works for me.

I hope it helps you.