angular2与MVC6,浏览器无法访问node_modules内的脚本

Question

尝试将Angular2与TypeScript一起使用,这意味着从node_modules文件夹导入.我有node_modules内置npm安装在他们的默认状态,主项目文件夹,但引用.js任何给定网页中的任何脚本将导致浏览器中找不到404错误.尝试删除node_modules,仍然没有工作.因此经过大量的尝试和失败后,令人惊讶的是,即使在一个全新的ASP.NET 5项目中,预先安装和配置了所有内容,浏览器也无法访问引用的.js脚本node_modules或导入类型(它会对这些脚本进行ajax调用)在TypeScript文件中引用,并失败).

显然,与DNX和ASP.NET 5,有一个排斥node_modules在tsconfig.json和project.json伴随着wwwroot.所以我试图删除该选项,然后在编译时遇到此错误:

"指定的路径,文件名或两者都太长.完全限定的文件名必须少于260个字符,目录名必须少于248个字符."

有趣的是,我可以在.ts文件中导入类型和模块,它在设计器中工作正常,这意味着它可以识别导入的类型.但是在运行时,我仍然为那些导入的模块和主要的Angular2脚本获得404s node_modules.欢迎任何建议,因为我没有选择.

环境

1. Visual Studio Professional 2015 Update 1
2. DNX 4.6.1和5.0
3. 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的屏幕截图:

Answer 1

您可以将所有引用的文件复制到wwwroot或更好地创建gulp/grunt任务来执行此操作.至于文件/目录长度问题 - 这在NPM的更高版本中已得到修复,但默认情况下Visual Studio使用较早版本,但您可以更改它:这是如何.我推荐第二种选择,对我来说非常适合.执行此操作后,只需删除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>

你将.ts被转换为.js文件的文件夹替换"appJs"
之后在你的打字稿中导入角度模块可以正常工作,例如:

从'angular2/core'导入{Component};

将从node_modules/angular2/cote.ts导入,而无需在任何地方引用它.这是一个gulp任务,可以将您所需的文件从"node_modules"复制到"wwwroot/js":

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/'));
});