problem with momentjs

Type of Issue

[x ] Bug Report
[ ] Feature Request

Description

I have a build error when I include momentjs.

Cannot call a namespace ('moment')

I check the other articles about momentjs but couldn’t make it work. Maybe I’m missing something

How To Reproduce

I have used the https://github.com/dherges/ng-packaged.

In my package.json I have installed momentjs:

"moment": "^2.19.1",

In my ng-package.json I have:

  "externals": {
      "moment": "moment"
    }

In my my-lib/package.json I put the peerDependencies like:

{
  "name": "@moblibs/my-lib",
  "version": "1.0.0",
  "repository": "https://github.com/dherges/ng-packaged.git",
  "author": "david <[e-mail]>",
  "license": "MIT",
  "private": true,
  "peerDependencies": {
    "@angular/core": "^4.1.2",
    "@angular/common": "^4.1.2",
    "moment": "^2.19.1"
  }
}

In my component I import it like:

import * as moment from 'moment';

When I build my my-lib I have the following error

BUILD ERROR
Cannot call a namespace ('moment')
Error: Cannot call a namespace ('moment')
    at error (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:185:14)
    at Module.error (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:8390:3)
    at Node.bind (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:6419:17)
    at eachChild.child (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:5819:34)
    at keys.forEach.key (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:5847:5)
    at Array.forEach (native)
    at Node.eachChild (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:5840:13)
    at Node.bind (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:5819:8)
    at Node.bind (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:6242:9)
    at eachChild.child (C:\wksp\componentgeneration\ng-packaged\node_modules\rollup\dist\rollup.js:5819:34)

Expected Behaviour

To be able to build my library without error with momentjs.

Version Information

@angular/cli: 1.4.9
node: 7.9.0
os: win32 x64
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.5.3

please include any version information that might be relevant, e.g. other third-party libraries “moment”: “^2.19.1”,

[ovione]

I made it work modifying the import in my library component FooComponent from import * as moment from 'moment';

to

import * as momentImported from 'moment'; const moment = momentImported;

I read that in https://stackoverflow.com/questions/39519823/using-rollup-for-angular-2s-aot-compiler-and-importing-moment-js

With that said now I’m able to generate the lib, install it into my project, build my project for prod and aot enabled and start it and test it in a browser.

Of course it works without giving any errors but is this the bes way ?

thanks O

[matheo]

@ranglang the namespace fix worked for me, replacing the import of moment like:

import * as momentNs from 'moment';
const moment = momentNs;

and sometimes I was using the type moment.Moment; and I had to replace it with momentNs.Moment and it worked. Do not forget about the “externals” setup, that got renamed to umdModuleIds in the latest version, mine looks like:

  "ngPackage": {
    "dest": "./dist",
    "lib": {
      "entryFile": "./src/datepicker/index.ts",
      "umdModuleIds": {
        "@angular/cdk": "ng.cdk",
        "@angular/material": "ng.material",
        "lodash": "_",
        "moment": "moment",
        "moment-timezone": "moment"
      }
  }