CODEWITHSUNDEEP
angular
J. Doe
J. Doe

Reputation: 21

Angular 2 Corrent Way to Import Modules

I am trying to import this module to enable oauth2.

I imported the module like this:

main.ts

import { OAuthService } from 'angular2-oauth2/oauth-service';

and in the systemjs.config.js:

   var map = {
     'app': 'app', // 'dist',
     '@angular': 'node_modules/@angular',
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs': 'node_modules/rxjs',
      'angular2-oauth2': 'node_modules/angular2-oauth2'
    };
// packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {main: 'main.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'},
    'angular2-in-memory-web-api': {defaultExtension: 'js'},
    'angular2-oauth2': {defaultExtension: 'js'}
  };

For me this way seems correct. However, now I get errors that the dependencies (sha256, js-base64, buffer, base64-js) are missing.

...
zone.js:101 GET http://localhost:3000/base64-js 404 (Not Found)
zone.js:101 GET http://localhost:3000/sha256 404 (Not Found)

So I tried to add this dependencies in the same way. Which technically work, but then the dependencies of the dependencies are asked.

So, I am wondering how exactly do I import npm modules including their dependencies. I believe it is not meant, that I list all dependencies in the systemjs.config.js.

THX in advance

Upvotes: 2

Views: 1066

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202316

Because angular2-oauth2 relies on other modules:

├─┬ [email protected] 
│ ├── [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ └── [email protected] 
│ ├── [email protected] 
│ └─┬ [email protected] 
│   ├── [email protected] 
│   └── [email protected]

You also need to config them within SystemJS:

var map = {
  'app': 'app', // 'dist',
  '@angular': 'node_modules/@angular',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  'rxjs': 'node_modules/rxjs',
  'angular2-oauth2': 'node_modules/angular2-oauth2',
  'base64-js': 'node_modules/base64-js/lib/b64.js',
  'sha256': 'node_modules/sha256/lib/sha256.js'
};

Upvotes: 1

Related Questions