Question

我正在尝试在教程之后使用Angular 2.0运行ASP5应用程序。经过几个步骤，我意识到当我尝试在没有互联网连接的情况下进行操作时它不起作用（我通常在我坐火车的时候正在处理它）。当然，如果没有互联网连接，本教程建议的导入将无效：

<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>

因此，我尝试在node_modules文件夹中包含本地文件，如下所示：

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

文件存在且正确无误。但是当我尝试调试项目时，我会收到所有四个文件的以下错误：SyntaxError: missing ; before statement，当我通过浏览器查看文件时，我收到的只是写有Hello World!的文件。我显然似乎错过了一些东西，但由于我以前从未使用过整个npm部分，我不知道为什么会发生这种情况，谷歌搜索几个小时后似乎没有其他人似乎有这个问题。

是访问限制吗？缺少JS模块？任何人都可以解释我如何在我的html中包含我的node_modules文件夹中的文件吗？

Answer 1

在Asp.Net 5 / wwwroot是您的Web应用程序的默认根目录，因此当您输入：

node_modules / angular2 /捆绑/ angular2-polyfills.js

它实际上是在以下路径中搜索的：

的wwwroot / node_modules / angular2 /捆绑/ angular2-polyfills.js

虽然文件存在于项目根目录中，即

node_modules / angular2 /捆绑/ angular2-polyfills.js

但由于它不在Web应用程序根目录中，因此您会看到这些脚本出现404错误。

解决方案是将这些文件复制到wwwroot文件夹。

我建议写一个gulp任务来自动将文件复制到wwwroot / script / lib文件夹

然后您可以像这样使用它们：

//Sample Gulp file code
var paths = {
    npmSrc: "./node_modules/",
    libTarget: "./wwwroot/lib/"
};

var libsToMove = [
    paths.npmSrc + '/es6-shim/es6-shim.min.js',
    paths.npmSrc + '/angular2/es6/dev/src/testing/shims_for_IE.js',
    paths.npmSrc + '/angular2/bundles/angular2-polyfills.min.js',
    paths.npmSrc + '/systemjs/dist/system.js',
    paths.npmSrc + '/rxjs/bundles/rx.min.js',
    paths.npmSrc + '/angular2/bundles/angular2.dev.js',
    paths.npmSrc + '/angular2/bundles/router.js',
    paths.npmSrc + '/angular2/bundles/http.min.js',
];

然后在您的html页面或视图中，您可以使用以下内容：

<script src="~/lib/es6-shim.min.js"></script>
<script src="~/lib/shims_for_IE.js"></script>
<script src="~/lib/angular2-polyfills.min.js"></script>
<script src="/lib/system.js"></script>
<script src="~/lib/rx.min.js"></script>
<script src="/lib/angular2.dev.js"></script>
<script src="/lib/router.js"></script>
<script src="/lib/http.min.js"></script>

你应该在项目的根目录中看到一个gulp文件，如果它不存在，只需创建一个名为＆＃34; gulpfile.js＆＃34;的文件。在项目的根目录中。

我希望这会有所帮助：）

如何从node_modules文件夹导入脚本

1 个答案: