为什么 Angular 2 从相对 node_modules 而不是映射 node_modules 导入？

Question

我认为这是 WebStorm 的问题，而不是核心 Angular 问题。这就是当我按下 Alt + Enter 时它的导入方式，然后当我打开网页时它显示 404 node_module.

import {Router} from "../../../../node_modules/@angular/router/src/router";
import {ActivatedRoute} from "../../../../node_modules/@angular/router/src/router_state";

以前是这样导入的，没错：

import {Router, ActivatedRoute} from "@angular/router";

它以前工作正常，但现在它不从 system.config.js 中的映射文件导入。我不知道为什么会这样。我尝试更改 system.config.js 和 tsconfig.json 中的差异内容。不知道是不是和那个有关。

我的System.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/platform-server': 'npm:@angular/platform-server/bundles/platform-server.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',


      // other libraries
      'rxjs':                      'npm:rxjs',
      'ng2-translate/ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js',
      'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js',
      'primeng':                   'npm:primeng'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      primeng: {
        defaultExtension: 'js'
      },
    }
  });
})(this);

tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": false,
      "suppressImplicitAnyIndexErrors": true,
      "removeComments": false,
      "typeRoots": [
        "node_modules/@types"
      ]
    },
    "exclude": [
      "node_modules",
      "typings",
      "aot"
    ]
  }

Answer 1

我遇到了同样的问题，对我来说帮助使用 File -> Invalidate Caches / Restart 并删除 .idea 中的文件（将其留空）。在那之后进口对我来说很好。

Answer 2

在 .idea 目录中我的 projectName.iml 文件中有一行

<content url="file://$MODULE_DIR$/node_modules" />

这似乎是我的问题所在，删除它后它又开始工作了。

为什么 Angular 2 从相对 node_modules 而不是映射 node_modules 导入？

Why Angular 2 imports from relative node_modules rather than mapped node_modules?

webstorm

angular