带有 MVC6 的 angular2，浏览器无法访问 node_modules 内的脚本

Question

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

显然对于 DNX 和 ASP.NET 5，tsconfig.json 和 project.json 中排除了 node_modules 以及wwwroot。所以我试图删除那个选项，然后在编译时得到这个错误:

“指定的路径、文件名或两者都太长。完全限定的文件名必须少于 260 个字符，目录名必须少于 248 个字符。”

有趣的是，我可以在 .ts 文件中导入类型和模块，它在设计器中工作正常，这意味着它可以识别导入的类型。但是在运行时，对于那些导入的模块和来自 node_modules 的主要 Angular2 脚本，我仍然会收到 404。欢迎提出任何建议，因为我别无选择。

环境

1. Visual Studio Professional 2015 更新 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 默认使用较早的版本，但您可以更改它: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/'));
});