BUILD Error when using momentjs

[Nevergonnachange]

Type of Issue

[X] Bug Report
[ ] Feature Request

Description

As a few people before me, I cannot run ng-packagr when using moment. I tried the suggested solutions in other issues but I cannot get it to work.

I added the following:

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

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

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

When using
import moment from 'moment'

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

How To Reproduce

Include moment into something and try to run ng-packagr

I uploaded a small example of my setup to GitHub where the issue is reproducible
https://github.com/Nevergonnachange/moment-ng-packagr/tree/master/src

Expected Behaviour

Build passes

Version Information

ng-packagr: v1.6.0
node: v7.10.1
@angular: v5.0.0
rxjs: 5.5.2
zone.js: 0.8.18
moment: 2.19.2

Thank you very much in advance.

[crowmagnumb]

Try using moment-es6 instead of moment like so ...

import moment from 'moment-es6';

[dherges]

Hi @Nevergonnachange,

thanks for putting the repro up!

$ DEBUG=true yarn build
yarn run v1.3.2
$ ng-packagr -p ng-package.json
Building Angular library
[debug] Searching for ng-package config at #/moment-ng-packagr/ng-package.json
[debug] Ng-package config found at #/moment-ng-packagr/ng-package.json
[debug] loading package.json
[debug] Beginning package search from root #/moment-ng-packagr
[debug] Resolved secondary package paths: 
[debug] rimraf #/moment-ng-packagr/dist
Generating bundle for moment-ng-packagr
Cleaning bundle build directory
[debug] rimraf #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr
Processing assets
[debug] processAssets #/moment-ng-packagr to #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts
[debug] render stylesheet #/moment-ng-packagr/src/time-line.component.css
[debug] postcss with autoprefixer for #/moment-ng-packagr/src/time-line.component.css
Running ngc
[debug] ngc #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts/tsconfig.lib.json, { basePath: #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts })
[debug] prepareTsConfig: Resolved tsconfig path to #/moment-ng-packagr/node_modules/ng-packagr/lib/conf/tsconfig.ngc.json
[debug] Reading tsconfig from #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts/tsconfig.lib.json
[debug] re-mapping sources for #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts/moment-ng-packagr.js
Compiling to FESM15
[debug] rollup #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts//moment-ng-packagr.js to #/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/moment-ng-packagr.js (es)

So this is not a ngc / tsc compile error but rollup goes bust when budling the individual js files to a flat es module file.

Here are some related answers to moment.js and rollup:

• https://stackoverflow.com/a/40346098
• https://stackoverflow.com/a/43847642
• moment conflict rollup/rollup-plugin-typescript#68

Can you tell if any of these and which one works for you?

---

FYI: The rollup config ng-packagr generates is the following (bundleOptions):

{
  "context": "this",
  "external": [
    /* angular and rxjs default config here ... */
    "moment"
  ],
  "input": "#/moment-ng-packagr/.ng_pkg_build/moment-ng-packagr/ts//moment-ng-packagr.js",
   "plugins": [
     nodeResolve({ jsnext: true, module: true }),
     commonJs(),
   ]
}

[Nevergonnachange]

Thank you very much for your fast response!

import moment from 'moment-es6';

Works fine for me.

The

import moment from 'moment';
+
"allowSyntheticDefaultImports": true

Adding a tsconfig.json with allowSyntheticDefaultImports set in the project root does not change anything. (as far as I understand I cannot change the tsconfig.json file for the ng-packagr).

I will for now use the moment-es6 workaround. It would still be nice to be able to get rid of it.

Thanks very much for you time and this awesome project.

[crowmagnumb]

Yeah, I had the same problem with the allowSyntheticDefaultImports solution. Didn't work. But the moment-es6 usage does. Which is fine until the moment project itself adopts it.

[dherges]

Ok, I dedicated moment.js its own section in that not-so-famous #129 :-)

[crowmagnumb]

By the way, I just switched to moment-with-locales-es6 because once I hooked up the library that uses moment-es6 to be used in another project I got the following warning ....

WARNING in /Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus/ng-date-utils.es5.js
Module not found: Error: Can't resolve './locale' in '/Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus'
resolve './locale' in '/Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus'
  using description file: /Users/ken/dev/animalus/au-ng/package.json (relative path: ./dist/ng-date-utils/@animalus)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/ken/dev/animalus/au-ng/package.json (relative path: ./dist/ng-date-utils/@animalus)
    using description file: /Users/ken/dev/animalus/au-ng/package.json (relative path: ./dist/ng-date-utils/@animalus/locale)
      as directory
        /Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus/locale doesn't exist
[/Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus/locale]
 @ /Users/ken/dev/animalus/au-ng/dist/ng-date-utils/@animalus/ng-date-utils.es5.js 1589:12-46
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

[JoostK]

For a different workaround without the need to use moment-es6 nor allowSyntheticDefaultImports, please see #163 (comment)

[elliotleelewis]

@crowmagnumb Did you ever figure out a solution to this? Having the same issue now...

[crowmagnumb]

@elliotleelewis Yeah, as I indicated above I imported moment-es6 instead of moment. Well actually moment-with-locales-es6 in the end. But either one should work for you.

[elliotleelewis]

@crowmagnumb Apologies, I misread your initial comment. I'm getting that same error when using moment-with-locales-es6 😞

What version are you using that isn't getting that error?

[crowmagnumb]

2.18.1. Can you give us code examples and output?

[github-actions]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}