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

Question

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

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

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

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

这似乎对我造成了问题，将其删除并重新开始工作。

Answer 2

我遇到了同样的问题，并帮助我使用文件 - ＆gt;使高速缓存/重新启动无效并删除.idea中的文件（只需将其留空）。之后进口对我来说很好。