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"
}
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.
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'.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With