将 Moment 与 Angular 库 13 一起使用会导致错误

当我在角度库中使用 moment.js(最新版本)时,我面临以下问题:

vendor.js:sourcemap:106713 ERROR TypeError: (momentWEBPACK_IMPORTED_MODULE2namespace_cache || (intermediate value)(intermediate value)) 不是函数。例如,当我在浏览器中调试 moment().year() 时,它可以工作。

任何人都可以有一个想法,这个错误的原因是什么?也许是 EcmaScript 版本。

我将不胜感激。

> "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"
>     ],
stack overflow using Moment with Angular library 13 causes an error
原文答案

答案:

作者头像

devdocs 有一个解决这个问题的方法:

因此,您需要在库 tsconfig.lib.json 和项目 tsconfig.json 中添加:

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

然后使用语法 import moment from 'moment';

作者头像

您可以尝试在 Angular 应用程序中禁用严格模式和模板检查,如下示例 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
  }
}

有关更多信息,请参阅如何在角度应用程序中关闭严格为真

此外,当您在应用程序中使用时刻时,请尝试按如下方式导入:

import * as moment from 'moment'; 
作者头像

我有同样的问题,我让它工作的唯一方法是除了在 tsconfig.lib.json 上使用 allowSyntheticDefaultImports 我还必须在我的库的 package.json 的依赖项部分添加时刻(也将此异常添加到 allowedNonPeerDependencies on ng-package.json)。

作者头像

对我来说,解决方案是,以这种方式在库代码中使用时刻

import moment from 'moment/moment'; 

在项目中,导入看起来像这样

import * as moment from 'moment/moment';