尝试将 Angular2 与 TypeScript 一起使用,这意味着从 node_modules
文件夹导入。我有 node_modules
内置 npm
安装在他们的默认状态,主项目文件夹,但在任何给定的网站中引用任何 .js
脚本页面将导致浏览器出现 404 not found 错误。尝试删除 node_modules
,仍然没有用。因此,在多次尝试和失败之后,令人惊讶的是,即使在一个全新的 ASP.NET 5 项目中,它已经预先安装和配置了所有内容,浏览器也无法访问 中引用的
也不导入类型(它对 TypeScript 文件中引用的那些脚本进行 ajax 调用,但失败了)。.js
脚本>node_modules
显然对于 DNX 和 ASP.NET 5,tsconfig.json
和 project.json
中排除了 node_modules
以及wwwroot
。所以我试图删除那个选项,然后在编译时得到这个错误:
“指定的路径、文件名或两者都太长。完全限定的文件名必须少于 260 个字符,目录名必须少于 248 个字符。”
有趣的是,我可以在 .ts
文件中导入类型和模块,它在设计器中工作正常,这意味着它可以识别导入的类型。但是在运行时,对于那些导入的模块和来自 node_modules
的主要 Angular2 脚本,我仍然会收到 404。欢迎提出任何建议,因为我别无选择。
环境
- Visual Studio Professional 2015 更新 1
- DNX 4.6.1 和 5.0
- Chrome 版本 49,Firefox 版本 43,IE 版本 11
更新
这是文件夹结构:
MyWebApplication
project.json
package.json
...
-node_modules
...
-wwwroot
...
-ts
-pages
orders-page.ts
tsconfig.json
typings.json
...
以下是 _Layout.cshtml、orders-page.ts 及其错误、tsconfig.json 和 project.json 的屏幕截图:
最佳答案
您可以将所有引用的文件复制到 wwwroot 或更好的方法是创建一个 gulp/grunt 任务来完成它。至于文件/目录长度问题 - 这在 NPM 的更高版本中已修复,但是 Visual Studio 默认使用较早的版本,但您可以更改它:here is how .我推荐第二个选项,非常适合我。执行此操作后,只需删除 node_modules 并恢复 NPM 包,您就不会再遇到该错误。
更新: 你不需要引用任何 typescpript 文件,你所需要的只是在你使用 angular 的 html 中:
<script src="/js/es6-shim.min.js"></script>
<script src="/js/system-polyfills.js"></script>
<script src="/js/shims_for_IE.js"></script>
<script src="/js/angular2-polyfills.js"></script>
<script src="/js/system.js"></script>
<script src="/js/Rx.js"></script>
<script src="/js/angular2.dev.js"></script>
<script src="~/js/router.dev.js"></script>
<script src="~/js/http.dev.js"></script>
<script>
System.config({
packages: {
appJs: {
defaultExtension: 'js'
}
}
});
</script>
将“appJs”替换为将 .ts 转换为 .js 文件的文件夹
之后在你的 typescript 中导入 Angular 模块就可以正常工作,例如:
import {Component} from 'angular2/core';
将从 node_modules/angular2/cote.ts 导入,您无需在任何地方引用它。这是一个将所需文件从“node_modules”复制到“wwwroot/js”的 gulp 任务:
var gulp = require('gulp');
gulp.task('libs', function () {
return gulp.src([
'node_modules/angular2/bundles/js',
'node_modules/angular2/bundles/angular2.*.js*',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/http.*.js*',
'node_modules/angular2/bundles/router.*.js*',
'node_modules/es6-shim/es6-shim.min.js*',
'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
'node_modules/systemjs/dist/*.*',
'node_modules/rxjs/bundles/Rx.js'
]).pipe(gulp.dest('./wwwroot/js/'));
});
关于带有 MVC6 的 angular2,浏览器无法访问 node_modules 内的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36609671/