Question

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

显然，对于DNX和ASP.NET 5，node_modules和node_modules中的tsconfig.json以及project.json被排除在外。所以我试图删除该选项，然后在编译时遇到此错误：

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

有趣的是，我可以在wwwroot文件中导入类型和模块，它在设计器中工作正常，这意味着它可以识别导入的类型。但是在运行时，我仍然可以从.ts获取导入模块和主要Angular2脚本的404。任何建议都会受到欢迎，因为我没有选择。

环境

Visual Studio Professional 2015 Update 1
DNX 4.6.1和5.0
Chrome版本49，Firefox版本43，IE版本11

更新

这是文件夹结构：

node_modules

以下是_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>

你替换＆＃34; appJs＆＃34;使用文件夹将.ts转换为.js文件
之后，在您的打字稿中导入角度模块将正常工作，例如：

从＆＃39; angular2 / core＆＃39;;
导入{Component}

将从node_modules / angular2 / cote.ts导入，无需在任何地方引用它。这是一个gulp任务，可以从＆＃34; node_modules＆＃34;中复制所需的文件。到＆＃34; wwwroot / js＆＃34;：

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

Answer 2

事实证明，您必须在module中添加tsconfig.json元素并将其值设置为system，这已经是angular2 quickstart的一部分。但是，您还需要向moduleResolution添加另一个名为tsconfig.json的元素，并将其值设置为“node”。这只是Typescript编译器的补充。见Typescript module resolution

此外，关于node_modules没有收到http请求，也不可能这样做，并且之前的帖子建议您需要gulp任务来移动.js内的所有生成的wwwroot文件{1}}以便它们可见。这需要遵循与Typescript文件夹相同的文件夹结构。因此，如果您有/ts/mytest.ts，则wwwroot下需要相同的结构，例如wwwroot/myFolder/ts/mytest.ts，但要注意SystemJS配置，因为它必须指向myFolder。如果您已将Typscript文件夹放在wwwroot下，我建议将其放在项目的根目录下，然后移动生成的.js文件。

angular2与MVC6，浏览器无法访问node_modules

2 个答案: