带有 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/

相关文章:

angular - 从 Angular 4 中的选择选项中获取值(value)

Angular2 对预检请求的响应未通过访问控制检查 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Angular 为 ngFor 中的每个元素调用 ngAfterContentInit

git - 如何从 git 中排除 typescript 编译的文件

c++ - VS2015 std::async 奇怪

javascript - Angular/TypeScript,当使用多个组件时,第一个组件影响第二个组件

javascript - 将单击和双击视为相同

node.js - Skaffold 同步文件但 pod 不刷新

c# - Visual Studio 代码分析器 : Finding types with zero references

c# - Visual Studio 2015 - Web 项目上缺少共享项目引用选项卡