CODEWITHSUNDEEP
javascriptangularsystemjs
pesho hristov
pesho hristov

Reputation: 2060

Angular2 + System.js - make all files load locally

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 "[email protected]" 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/[email protected]
https://github.jspm.io/jmcriffey/[email protected]/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?

Upvotes: 0

Views: 1330

Answers (1)

Eric Martinez
Eric Martinez

Reputation: 31777

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.

Upvotes: 0

Related Questions