Importe anders als angular2 Deps bricht webapp Kompilierung

Question

In meiner eckigen 2 Anwendung habe ich Probleme mit dem Importieren von Abhängigkeiten anders als Winkel oder meine Anwendungskomponenten. (ZB angular2-Moment)

Ich habe <base href="/">

Anwendung läuft über main (compilation.js enthält alle App-Module):

<script src="/app/compilation.js"></script> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('main') 
       .then(null, console.error.bind(console)); 
</script> 

Sobald ich etwas von node_modules anderen injizieren als Winkel es lässt die Kompilierung fehlschlagen. und ich bekomme einen 404 von main.

import {Component} from "angular2/core"; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import "rxjs/Rx"; 
import {HeaderComponent} from "./header/header.component"; 
import {HomeComponent} from "./home/home.component"; 
import {SidebarComponent} from "./side-bar/sidebar.component"; 
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router"; 
import {enableProdMode} from "angular2/core"; 
//import {TimeAgoPipe} from 'angular2-moment'; <-- this breaks main (404) 

Die Konsole Fehler:

GET http://localhost:3001/main 404 (Not Found) 
scheduleTask @ angular2-polyfills.js:126 

TSconfig ist:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/", 
    "outFile": "app/compilation.js", 
    "declaration": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

Jede Hilfe mehr Haare auf dem Kopf retten würde sehr geschätzt werden.

Answer 1

OK. Hier ist die Antwort, aber immer noch nicht sicher, warum die Dinge so schwer sein müssen?

Lösung gilt nur für Bootstrap und Winkelmoment und glaube nicht, dass alle Komponenten identisch sind.

:

1. einen Pfad für jede Abhängigkeit in system.config definieren
2. Moment definieren als globale

Innerhalb index.html

System.config({ 
    packageConfigPaths: ['node_modules/*/package.json'], 
    paths: { 
     'moment': '/node_modules/moment', 
     'angular2-moment/*': '/node_modules/angular2-moment/*', 
     "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap" 
    }, 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    meta: { 
     moment: { 
      format: 'global', 
      globals: { 
       moment: 'moment' 
      } 
     } 
    } 
}); 

Innerhalb NG2 geladen werden

// you can use ng2-bootstrap file just fine 
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 
// but for angular moment also mention extension. 
import {DurationPipe} from 'angular2-moment/DurationPipe.js'; 

N ow mit all dies:

@Component({ 
    "selector": "my-component", 
    directives: [PAGINATION_DIRECTIVES], 
    pipes: [DurationPipe], 
    "templateUrl": "app/templates/my-template.html", 
}) 

Ich glaube, ich bin Ziehen meine Haare jetzt mehr, als wenn ich die Frage gestellt.

Jemand bitte klären Sie einige davon für mich.