Angular2 + System.js - 使所有文件在本地加载

时间:2015-08-20 13:56:03

标签: javascript angular systemjs

我正在制作Angular2应用程序,主要的HTML就是这个:

rsp+10h

我的目标是让所有文件都在本地加载。所以 - 当我把这三个文件放在lib文件夹中时 - 我在网络检查器中看到它无法从那里加载“es6-modules-loader@0.16.6.js”,所以我从Internet上下载了该文件并放入它在“lib”文件夹中。然后一切正常:)

BUT:

今天网络连接停了一段时间,我无法运行该项目,因为它实际上从网络中加载了两个以上的文件:

<!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>

我在system.js的末尾看到了它们。

所以我的问题是:如何从本地文件系统中加载所有内容?

1 个答案:

答案 0 :(得分:0)

这是我的设置,我希望它适合你

我通过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>

简单地说,systemjs将无法找到任何angular2文件,因此您必须在System.config中添加paths以告知systemjs angular2的文件所在的位置。

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

这是我的设置,不一定是最好的设置,但它对我有用。

我希望它可以帮到你。