ng-packagr: 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 <david@spektrakel.de>",
  "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”,

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 16 (1 by maintainers)

Most upvoted comments

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

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

+30

ovione on Oct 25, 2017

@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"
      }
  }

+20

matheo on Jun 29, 2018

So no one is gonna take this problem seriously between ng-packagr contributors?

+13

gabrielalan on Aug 2, 2018

yes but if I follow that link #163 it is said that in order to use moment in code the import should be: import ... from 'moment';

but this should be import * as momentImported from 'moment';

and then

const moment = momentImported;

Otherwise rollup doesn’t work.

ovione on Oct 26, 2017

Why is this issue closed? I am having the same issue. And adding the

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

Does not help. I am still having the problem.

When using import * as moment from ‘moment’; I get the following

BUILD ERROR
Cannot call a namespace ('moment')
Error: Cannot call a namespace ('moment')

The other import possiblities give me errors aswell:

import moment from ‘moment’

time-line/node_modules/moment/moment"' has no default export

import * as momentImported from ‘moment’; const moment = momentImported;

Cannot find module 'momentImported'

Id appreciate any help. Thanks very much.

EDIT: add used versions rollup: 0.51.5 ng-packagr: 1.6.0 moment: 2.19.2

EDIT2: add repro where build fails https://github.com/Nevergonnachange/moment-ng-packagr/tree/master/src

Nevergonnachange on Nov 15, 2017

I’m still having this issue and as @Nevergonnachange said above, I also tried everything.

beradrian on Jan 2, 2018