Angular 8 Moment - Error: Cannot call a namespace ('moment')

Question

while building an angular 8 project using moment I face this error message :

ng build @myproject/common

Error: Cannot call a namespace ('moment')

I found similar issues over internet and suggested solutions described as below for Angular 6/7. But none of them worked for me with angular 8.

changing regular moment import

import * as moment from 'moment';

to

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

using default import through tsconfig.json compiler options

import moment from moment;

with tsconfig.json including

  "compilerOptions": {
     "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
   ......
  }

any idea to fix this ?

---

ng version

    Angular CLI: 8.3.22
Node: 12.13.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.22
@angular-devkit/build-angular      0.803.22
@angular-devkit/build-ng-packagr   0.803.22
@angular-devkit/build-optimizer    0.803.22
@angular-devkit/build-webpack      0.803.22
@angular-devkit/core               8.3.22
@angular-devkit/schematics         8.3.22
@angular/cdk                       8.2.3
@angular/cli                       8.3.22
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@ngtools/webpack                   8.3.22
@schematics/angular                8.3.22
@schematics/update                 0.803.22
ng-packagr                         5.7.1
rxjs                               6.4.0
typescript                         3.5.3
webpack                            4.39.2

---

package.json

 "dependencies": {
    "@angular/animations": "~8.2.9",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.9",
    "@angular/compiler": "~8.2.9",
    "@angular/core": "^8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.9",
    "@angular/material": "~8.2.2",
    "@angular/platform-browser": "~8.2.9",
    "@angular/platform-browser-dynamic": "~8.2.9",
    "@angular/router": "~8.2.9",
    "@rollup/plugin-json": "^4.0.1",
    "crypto-js": "^3.1.9-1",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "roboto-fontface": "^0.10.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "typeface-rajdhani": "0.0.72",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.8",
    "@angular-devkit/build-ng-packagr": "~0.803.8",
    "@angular/cli": "^8.3.22",
    "@angular/compiler-cli": "~8.2.9",
    "@angular/language-service": "~8.2.9",
    "@types/crypto-js": "^3.1.43",
    "@types/googlemaps": "^3.37.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-packagr": "^5.4.0",
    "protractor": "~5.4.0",
    "rimraf": "^3.0.0",
    "ts-node": "~7.0.0",
    "tsickle": "^0.37.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }

Carlcarla

Answer 1

Actually, the first work around does the trick but I have another angular component invoked with cdk-overlay by the primary component that also uses the wrong moment import semantic :

so

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

is the right solution for Angular 8 moment import issue as stated in this post subject.

Problem solved.

Carlcarla

Solved with this. I feel this is should be the accepted answer :) – Instar

This solved a build problem for me with a Vaadin 23.1.6 application. I had two individual .js files in my frontend directory with this import statement. Adapted both as you described and the maven build was successful again. – Hols

Answer 2

If anyone has this problem with vite

It's because you used import * as something from "something"

You should have used import something from "something"

Siam

I am using nuxt3 with vite and try to implement jzz library experiencing the same issue. import JZZ from 'jzz' fixes building the project, but something happens that JZZ() is not called – logging the imported function reveals something completely different. – Dippy

Answer 3

I ran into a similar problem in an earlier version of angular (maybe this can be helpful):

"esModuleInterop": true,

in tsconfig.json. That lets you just import library from "library" from CommonJS libraries, instead of import * as library from 'library'.

Catalectic

Had the issue too, and this helped me solve it, thanks. Official documentation about this config setting. Fun thing, in their example they use moment too ;) – Baalman