Errors when using MomentJS in the Angular Typescript library

Question

I am creating an Angular component library (2+) using jvandemo / generator-angular2-library as a starter, which uses Rollup as a module constructor. The component that I create in the library uses MomentJS .

I had various installation issues with the inclusion of MomentJS.

I first used import moment from 'moment'; to import the moment into the component, but this causes the following build error:

 [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. 

I found this SO question that said use import * as moment from 'moment'; but with that I get;

 '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) 

As far as I can tell, these are the only two options, and I can neither work, what am I missing?

Edit

I added this problem to the Github repo library, which contains minimal replication steps

Answer 1

The error is very clear and specific.

Error: it is not possible to call the namespace ("moment") on an error (/ Users / chris / angular-library / node_modules / rollup / dist / rollup.js: 185: 14)

This complies with the ES module specification.

This means that the following is an invalid way to import the moment, because the module namespace object, for example, created by * as ns , cannot be called.

 import * as moment from 'moment'; 

The correct form is the form in which ngc causes an error on

 import moment from 'moment'; 

First, to do this, you need to specify the --allowSyntheticDefaultImports flag.

tsconfig.json

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

Assuming ngc recognizes this option, you still have an additional problem for development.

The flag is higher for users of tools such as SystemJS or Webpack that perform synthesis, allowing this code to check the type.

Note that if you compile CommonJS modules --module commonjs , the correct import syntax will be

 import moment = require('moment'); 

Answer 2

In the sample directive, I had no problems compiling when I used the following:

 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'); } } 

Files are compiled from the assembly directory, which is a subdirectory of the root. You will get additional information about the "this" mentioned here:

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

I need to say in gulfile that the library is external:

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

And from the github link you should add an onwarn block for both collapse sections: This is the section "rollup: umd" and "rollup: 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 ); }, 

Will this help you?