在打字稿角度应用程序中解析模块时出现404答案

【问题标题】：404 when resolving module in typescript angular app在打字稿角度应用程序中解析模块时出现404
【发布时间】：2017-02-08 06:02:13
【问题描述】：

我正在遵循 Angular 入门应用程序的确切设置。在某些时候，我想在我的应用程序中使用 https://www.npmjs.com/package/angular2-uuid 库。为此，我在 package.json 中添加以下行：

"angular2-uuid": "^1.1.0",

并在我的 ts 代码中使用以下 import 语句：

import { UUID } from 'angular2-uuid';

npm install 后一切编译正确，但是当我尝试在浏览器中加载应用程序时，它找不到带有 404 错误的 UUID 模块：

 GET http://localhost:8080/angular2-uuid 404

其他模块路径中有node_modules，可以加载成功。我怀疑 URL 中缺少 node_modules 部分是 404 错误的原因。

任何想法如何解决这个问题？定位模块时如何告诉 TS 编译器或模块解析系统在 node_modules 文件夹下查找？

谢谢。

【问题讨论】：

你能添加你的systemjs.config.js文件吗？
Firefox 返回一个空文件而不是 404 导致“XML Parsing Error: no root element found”消息。

标签： angular typescript

【解决方案1】：

您的问题是systemjs 配置问题。

在您的systemjs.config.js 文件中，您必须指定模块的路径：

...
...
paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
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',

      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

      //Here you specify path for your library
      'angular2-uuid':'npm:angular2-uuid'
    },
packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      //And here you specify files extensions for this library.
      'angular2-uuid': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
...
...

这样，systemjs 知道在哪里可以找到您的库，并且您可以在您的应用中正确获取它。

【讨论】：