Error in angular 2 directives

Question

I am facing this error while I am trying to import directive in component

GET http://localhost:3000/@angular/core 404 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/@angular/core(…)

Can someone help me on this?

Dup of http://stackoverflow.com/questions/37017724/angular2-gives-angular-core-404-not-found-error-when-using-directives — Günter Zöchbauer, May 04 '16 at 07:17
Sorry,But I didn't get that! Can u please elaborate more on that — Maverick, May 04 '16 at 07:23
I added webpack.config.js and system.config.js, but the error is still there — Maverick, May 04 '16 at 07:27

Thierry Templier · Answer 1 · 2016-05-04T07:50:21.873

You didn't configure the @angular/core module into your SystemJS configuration.

With RC versions, there is not yet bundled files for Angular2. This means that you need to configure the framework modules like below:

var map = {
  'app': 'app',
  'rxjs': 'node_modules/rxjs',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  '@angular': 'node_modules/@angular'
};

var packages = {
  'app': { main: 'main.js',  defaultExtension: 'js' },
  'rxjs': { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core', // <--------
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
  map: map,
  packages: packages
}

System.config(config);

This way, you will be able to import the @angular/core module.

I tried adding this in system.config.js file, but error is "map is undefined" — Maverick, May 04 '16 at 07:35
In fact my snippet was an extract... I updated my answer. See this link for more details: https://angular.io/docs/ts/latest/quickstart.html — Thierry Templier, May 04 '16 at 07:50

score 0 · Answer 2 · answered May 31 '16 at 16:13

0

change this
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
to ->>
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/in-memory-backend.service';

in your main.ts

answered May 31 '16 at 16:13

AutoMEta

1,339
6
22
35

Error in angular 2 directives

2 Answers2