Question

我正在按照角度入门应用程序进行精确设置。在某些时候，我想在我的应用程序中使用https://www.npmjs.com/package/angular2-uuid库。为此，我将以下行添加到package.json：

"angular2-uuid": "^1.1.0",

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

import { UUID } from 'angular2-uuid';

在npm安装之后，所有内容都正确编译，但是当我尝试在浏览器中加载应用程序时，它无法找到带有404错误的UUID模块：

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

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

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

谢谢。

Answer 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知道在哪里找到您的图书馆，您就可以在自己的应用中正确使用它。

404在typescript angular app中解析模块时

1 个答案: