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

标签 angular typescript visual-studio-2015 asp.net-core asp.net-core-mvc

尝试将 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.jsonproject.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 的屏幕截图:

enter image description here

enter image description here

enter image description here

enter image description here

最佳答案

您可以将所有引用的文件复制到 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/

相关文章:

javascript - Angular 延迟加载模块错误 - 'RouterModule.forRoot() called twice'

typescript - ts(2339) 类型 'ariaLabel' 上不存在属性 'HTMLElement'

javascript - Typescript 认为响应数组是一个对象

.net - 0x80070002 在VS 2015社区版中创建新的.Net Core项目时出错

visual-studio-2015 - 安装 VS2015 后 IIS Express 不工作

angular - 检测组件输入的属性何时发生 Angular 变化

html - Angular 4 firebase下拉选择标签选项

angular - 在上部模块中导入 Angular Material 不起作用

typescript - 使用 AngularFire 和 Firestore 使用 Ng2 智能表显示嵌套对象

javascript - 如何在 Cordova Visual Studio 中添加 JavaScript 库?