404 wenn CoockieService (Angular2-Cookie) Anbieter hinzugefügt wird

Question

Ich möchte Cookies in meinem Angular 2 Projekt verwenden und versuchte angular2-cookie in meinem Projekt zu implementieren. Ich folgte den Anweisungen von here.

Dies ist mein aktueller Code:

import { Component, OnDestroy } from 'angular2/core'; 
import { ROUTER_DIRECTIVES } from 'angular2/router'; 
import {CookieService} from 'angular2-cookie/core'; 

@Component({ 
    templateUrl: 'app/fragen/fragen.component.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class FragenComponent implements OnDestroy { 
    public pageTitle: string = 'Wettbewerbs Fragen'; 
} 

Als ich providers: [CookieService] füge ich bekomme 404 (nicht gefunden) Fehler in der Browser-Konsole.

Ich installierte angular2-cookie/core korrekt mit Npm und ich verwende TypeScript.

Es spielt keine auch^t Arbeit, wenn ich einen Konstruktor hinzufügen, etwa so:

constructor(private _cookieService:CookieService){} 

Die Fehlermeldung:

angular2-polyfills.js:126 GET http://localhost:3000/angular2-cookie/core 404 (Not Found)scheduleTask @ angular2-polyfills.js:126ZoneDelegate.scheduleTask @ angular2-polyfills.js:403Zone.scheduleMacroTask @ angular2-polyfills.js:340(anonymous function) @ angular2-polyfills.js:147send @ VM34076:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ angular2-polyfills.js:648(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:390Zone.run @ angular2-polyfills.js:283(anonymous function) @ angular2-polyfills.js:635ZoneDelegate.invokeTask @ angular2-polyfills.js:423Zone.runTask @ angular2-polyfills.js:320drainMicroTaskQueue @ angular2-polyfills.js:541ZoneTask.invoke @ angular2-polyfills.js:493 

angular2-polyfills.js:390 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-cookie/core(…)ZoneDelegate.invoke @ angular2-polyfills.js:390Zone.run @ angular2-polyfills.js:283(anonymous function) @ angular2-polyfills.js:635ZoneDelegate.invokeTask @ angular2-polyfills.js:423Zone.runTask @ angular2-polyfills.js:320drainMicroTaskQueue @ angular2-polyfills.js:541ZoneTask.invoke @ angular2-polyfills.js:493 

Answer 1

Ich denke, dass Sie die Bibliothek in SystemJS konfigurieren vergessen:

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

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

Beachten Sie, dass eine gebündelte Datei auch für die Bibliothek bereitgestellt wird:

<script src="node_modules/angular2-cookie/bundles/angular2-cookie.js"></script> 

Darüber hinaus enthält diese Datei Modulnamen mit der js Erweiterung, so dass Sie ihr Kernmodul auf diese Weise importieren müssen:

import from 'angular2-cookie/core.js'; 

Ich denke, dass der erste Ansatz ist die beste ...