using Moment with Angular library 13 causes an error
Asked Answered
C

4

5

When i use the moment.js (latest version) in an angular library, i am facing the following problem:

vendor.js:sourcemap:106713 ERROR TypeError: (moment__WEBPACK_IMPORTED_MODULE_2___namespace_cache || (intermediate value)(intermediate value)) is not a function. When i debug in the browser the moment().year() for example it works.

Can anyone have an idea, what is the reason for this error? maybe the EcmaScript version.

I will appreciate for any help.

> "compilerOptions": {
>     "declaration": false,
>     "downlevelIteration": true,
>     "experimentalDecorators": true,
>     "lib": [ "es6", "dom" ],
>     "mapRoot": "./",
>     "module": "esnext",
>     "skipLibCheck": true,
>     "moduleResolution": "node",
>     "outDir": "../dist/out-tsc",
>     "sourceMap": true,
>     "target": "ES2015",
>     "typeRoots": [
>       "../node_modules/@types"
>     ],
Cilicia answered 5/1, 2022 at 15:55 Comment(3)
try "target": "es2020", "module": "es2020", "lib": ["es2020", "dom"]Reisfield
unfortunately, it didnt workCilicia
have you tried using "module": "es2015"? In case you have solved it already, I would like to know how.Liddle
C
14

The devdocs has a solution to this problem:

So, you need add in library tsconfig.lib.json and in project tsconfig.json:

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

And then use the syntax import moment from 'moment';

Cankerous answered 21/1, 2022 at 10:57 Comment(2)
This solution works, here's the issue from ng-packagr in case you want to track down the details: github.com/ng-packagr/ng-packagr/issues/2215. I did not need to touch anything in the angular project consuming the lib. I only changed the tsconfig of the lib itself adding the allowSyntheticDefaultImports: true and import moment from 'moment' instead of import * as moment from 'moment'Liddle
This solution works. Remember to clear your .angular cache files though if your trying to just drag the @yourpackage over the node_modules one.Weitzman
S
4

for me, the solution was, use moment in library code this way

import moment from 'moment/moment'; 

while in project, import looks like this

import * as moment from 'moment/moment';
Sgraffito answered 28/9, 2022 at 10:16 Comment(0)
B
0

You could try to disable strict mode and template check in your angular application as below sample tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": false,
    "noPropertyAccessFromIndexSignature": false,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": false,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  }
}

For more information refer how to turn off strict to true in angular application

In addition when you are using moment in your application try to import as follow:

import * as moment from 'moment'; 
Benoit answered 6/1, 2022 at 0:47 Comment(1)
I tried many things but nothing works. The problem is, that for some reason, after the upgrade to version 13 in my angular library. The lib moment.js is not imported. In the angular app. It works perfectly. I dont get any compile errors.Cilicia
F
0

I had the same problem and the only way I got it to work was besides using allowSyntheticDefaultImports on tsconfig.lib.json I also had to add moment to the dependencies section on the package.json of my library (also adding this exception to allowedNonPeerDependencies on ng-package.json).

Fluorinate answered 16/2, 2022 at 23:31 Comment(1)
i also did it this way but it didnt work.Sensualism

© 2022 - 2024 — McMap. All rights reserved.