Błędy podczas korzystania z MomentJS w bibliotece Angular Typescript

Question

Buduję bibliotekę komponentów Angular (2+) przy użyciu jvandemo/generator-angular2-library jako startera, który używa Rollup jako konstruktora modułów. Składnik, który tworzę w bibliotece, używa MomentJS.

Miałem różne problemy z budowaniem z włączeniem MomentJS.

Najpierw użyłem import moment from 'moment'; do zaimportowania momentu do komponentu, ale powoduje to następujący błąd podczas kompilacji;

[17:26:28] Starting 'ngc'... 
Error at /Users/chris/angular-library/.tmp/components/my-library/my-component.component.ts:6:8: Module '"/Users/chris/my-library/node_modules/moment/moment"' has no default export. 

znalazłem this SO question że powiedział do korzystania z import * as moment from 'moment'; jednak, że dostanę;

'moment' is imported by build/components/my-component.component.js, but could not be resolved – treating it as an external dependency 

events.js:182 
     throw er; // Unhandled 'error' event 
    ^
Error: Cannot call a namespace ('moment') 
    at error (/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14) 

O ile mi wiadomo, są to tylko dwie opcje i nie mogę się zabrać do pracy, czego mi brakuje?

Edit

Dodałem this issue do biblioteki GitHub repo, który zawiera minimalistyczny replikację kroki

Answer 1

Błąd jest bardzo jasne i konkretne

Error: Cannot call a namespace ('moment') at error (/Users/chris/angular-library/node_modules/rollup/dist/rollup.js:185:14)

Jest za ES Module Specyfikacji.

Oznacza to, że poniższy jest nieprawidłowy sposób importowania momentu, ponieważ obiekt przestrzeni nazw modułu, taki jak utworzony przez * as ns, może nie zostać wywołany.

import * as moment from 'moment'; 

Prawidłową formą jest forma, która ngc jest podnoszenie błąd na

import moment from 'moment'; 

Po pierwsze do tej pracy, musisz podać flagę --allowSyntheticDefaultImports.

tsconfig.json

{ 
    "compilerOptions": { 
    "allowSyntheticDefaultImports": true 
    } 
} 

Zakładając, że ngc rozpozna opcję, trzeba jeszcze dodatkowy problem wypracowania. powyżej

Flaga jest dla użytkowników narzędzi takich jak SystemJS lub Webpack które wykonują syntezę, umożliwiających taki kod do typecheck.

Zauważ, że jeśli do kompilacji modułów CommonJS --module commonjs poprawna składnia import jest raczej

import moment = require('moment'); 

Answer 2

w dyrektywie próbki nie miałem problemu kompilacji, kiedy stosuje się następującą:

import { Directive, ElementRef } from '@angular/core'; 
import * as moment from '../node_modules/moment/moment'; 
@Directive({ 
    selector: '[sampleDirective]' 
}) 
export class SampleDirective { 

    constructor(private el: ElementRef) { 
    moment.isDate('test'); 
    } 

} 

Pliki są kompilowane z katalogu budowania, który jest podkatalogiem z katalogu głównego. dostaniesz dodatkowo ostrzec o "to", wspomniano tutaj:

https://github.com/rollup/rollup/issues/794

muszę powiedzieć w gulfile że biblioteka jest zewnętrzna:

external: [ 
    '@angular/core', 
    '@angular/common', 
    'moment' 
    ], 

I z linku github, należy dodać blok onwarn obu sekcjach Rollup: to jest sekcja 'zbiorczy: UMD' i 'zbiorczy: fesm'

onwarn: function(warning) { 
    // Skip certain warnings 

    // should intercept ... but doesn't in some rollup versions 
    if (warning.code === 'THIS_IS_UNDEFINED') { return; } 

    // console.warn everything else 
    console.warn(warning.message); 
}, 

Czy to ci więcej?