Wie verwende ich Angular2 mit JSPM?

Question

Ich habe Angular2 mit JSPM (v17) verwendet, aber die einzige Möglichkeit, es zum Laufen zu bringen, besteht darin, Typoskript zu konfigurieren, um meine Module als commonjs zu kompilieren. Aber dabei sehe ich die folgende Warnung immer für jede Datei:

TypeScript [Warning] transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format

Wenn ich Modul system stelle ich erhalte den folgenden Laufzeitfehler:

TypeError: Cannot read property 'forRoot' of undefined

, die von diesem Bit geworfen wird Code:

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

Wenn ich mein Routing-Modul aus dem Projekt entfernen, ich folgende Fehlermeldung am Ende sehen:

core_1.Component is not a function

um meine AppComponent:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>hello world</h1>`, 
}) 
export class AppComponent { } 

Offenbar jeder Winkel Importe kommen zurück als null.

Hier ist mein tsconfig.json:

{ 
    "compilerOptions": { 
     "target": "es2016", 
     "module": "system", 
     "moduleResolution": "node", 
     "inlineSourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": [ 
      "es2016", 
      "dom" 
     ], 
     "noImplicitAny": true, 
     "suppressImplicitAnyIndexErrors": true 
    }, 
    "exclude": [ 
     "jspm_packages" 
    ] 
} 

Ich habe das Format für alle @angular Pakete überschrieben auch versucht zu esm, aber dann sehe ich die folgenden Laufzeitfehler:

Can't add property ng, object is not extensible

Ist commonjs die einzige Weg zu gehen oder fehlt mir eine Einstellung?

Answer 1

Von Guy Bedford:

Yes this was a change in SystemJS 0.20 where named exports for non-ES modules are no longer supported, in order to align with how interop will work in NodeJS between ES modules and CommonJS, which is to only provide compatibility with the default import form - import module from 'module' (equivalent to import {default as module} from 'module').

Um Commonjs Module mit dem Namen Exporte zu umfassen, ich brauchte eine Überschreibung zu jeder Winkel Bibliothek hinzuzufügen, einschließlich aller anderen Bibliotheken von Drittanbietern, die Commonjs waren.

"meta": { 
    "*.js": { 
    "esModule": true 
    } 
} 

Vorerst scheint es das Beste zu Typoskript gerade eingestellt commonjs als Modulsystem zu verwenden.