Seltsames Typoskript/angular2 Importverhalten

Question

Ich habe versucht, ein Demo für eine andere SO Frage zu erstellen, zuerst mit angular-cli, dann mit punker.

Ich fand einen seltsamen Verhaltensunterschied in import zwischen den beiden Versionen.

Das Problem in der zweiten import des folgenden Codes ist:

moment.service.ts

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

// Following work in plunker setup 
import m from 'moment'; 
// Following work in angular-cli setup 
//import * as m from 'moment'; 

@Injectable() 
export class MomentService { 
    moment = m; 
} 

In Winkel-cli Code muss ich verwenden:

import * as m from 'moment'; 

Wenn ich die punker-Setup, egal in Punker oder mit lokalen Server ausführen, muss ich folgen oder es wird nicht im Browser ausgeführt:

import m from 'moment'; 

Jeder kann den Unterschied im Verhalten erklären ??

Plunker: Link

Github: plunker code local version (umfassen ein server.js lokal zu dienen)

Github: angular-cli version

Answer 1

TL: Format DR Jede Demo wird mit einem anderen Modul. In Plunker wird das gesamte Modul als Standardexport behandelt. Im CLI-Projekt gibt es keinen Standardexport.

Jede Demo verwendet ein anderes Modulformat. Der Plocker gibt kein Format an, ich bin mir nicht sicher, welches Format systemjs standardmäßig verwendet, aber ich glaube nicht, dass es ES6 ist. Das CLI-Projekt verwendet das ES6-Modulformat.

Wenn Sie einen Blick auf here werfen, sehen Sie, wenn das Modulformat AMD, commonjs oder global ist, wird das gesamte Modul als Standardexport exportiert. Dies wird bei ES6-Modulen nicht passieren. Sie müssen den Standardexport explizit definieren, was momentsjs nicht tut.

Also, in der Plocker-Demo funktioniert import m from 'moment', weil Ihre Konfiguration Systemjs und Typoskript, das gesamte Modul als Standard-Export behandeln, wenn es keine gibt. Aufgrund der Konfiguration im CLI-Projekt wird das Modul nicht als Standardexport behandelt, daher müssen Sie import * as m from 'moment' verwenden, das besagt, dass alle benannten Exporte ab dem Moment unter dem Namespace 'm' importiert werden.

Here is a discussion on TypeScript's repo regarding this