CODEWITHSUNDEEP
angulartypescript
crypto5
crypto5

Reputation: 851

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 https://www.npmjs.com/package/angular2-uuid 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.

Upvotes: 1

Views: 2967

Answers (1)

Supamiu
Supamiu

Reputation: 8731

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

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

Upvotes: 7

Related Questions