crypto5 crypto5 - 1 year ago 119
TypeScript Question

404 when resolving module in typescript angular app

I am following exact setup from angular getting started application.
At some point I want to use library in my app. For this I add following line to package.json:

"angular2-uuid": "^1.1.0",

And use following import statement in my ts code:

import { UUID } from 'angular2-uuid';

After npm install everything compiles correctly, but when I try to load app in browser, it can't find UUID module with 404 error:

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

Other modules have node_modules in path, and can be loaded successfully. I suspect missing node_modules part in URL is the reason of 404 error.

Any ideas how this can be fixed? How can I tell TS compiler or module resolution system to look under node_modules folder when locating modules?

Thank you.

Answer Source

Your problem is a systemjs config problem.

In your systemjs.config.js file, you have to specify the path of your module:

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
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'

This way, systemjs knows where to find your library, and you'll get it properly in your app.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download