Angular 13 package/library 在导入 Angular 13 项目时抛出错误 "moment is not a function"

Question

我正在升级私有 angular library/package (my-lib)，这样我就可以迁移所有其他项目，但是当导入到项目中时，其中一项服务会使用 moment 并引发错误： “错误类型错误：力矩不是函数”

该库在开发模式下工作，构建和发布都正常，即使导入到项目中，所有组件和资源也能正常加载，没有显示错误，依赖项正在下载，但似乎有些第 3 方依赖项是导入后不为“my-lib”所知。

即使在项目中，我也可以导入 moment 并使用它，但是 node_modules 中的“my-lib”看不到那个包。

“my-lib”中的一些文件

service.ts

import * as moment_ from 'moment';

const moment = moment_;
...

moment(value).format('YYYY-MM-DD')  ----> line that throws the error

已经尝试过

import moment from 'moment';

和 tsconfig 中的“allowSyntheticDefaultImports”标志

package.json

"dependencies": {
    ...
    "moment": "~2.29.1",
    ...
},
"devDependencies": {
    "@angular-builders/custom-webpack": "~13.0.0",
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/schematics": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/animations": "~13.1.0",
    "@angular/cli": "~13.1.1",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/compiler-cli": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/language-service": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "eslint": "^8.2.0",
    "ng-packagr": "~13.1.1",
    "rxjs": "~7.4.0",
    "ts-node": "~10.4.0",
    "tslib": "^2.3.0",
    "typescript": "~4.5.2",
    "zone.js": "~0.11.4"
  }

tsconfig.ts

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node",
      "cypress",
      "cypress-xpath",
      "cypress-wait-until"
    ],
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "compilationMode": "partial",
    "enableResourceInlining": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "types": [
      "node",
      "cypress",
      "cypress-xpath",
      "cypress-wait-until"
    ]
  }
}

ng-package.json

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "lib": {
    "entryFile": "./src/my-lib/public_api.ts",
    "cssUrl": "inline"
  },
  "allowedNonPeerDependencies": ["."]
}

这是从 angular 9 到 13 的更新，可能我遗漏了一些东西，但找不到解释行为变化的示例或文档。

ps：“require”函数具有相同的行为

const a = require('assets/test.png');   --> throws error require is not a function when my-lib is imported into a project and tries to run the this line

如果您需要更多详细信息或有一些建议，我会很感激。

提前致谢

Answer 1

我在尝试运行 stackblitz 时遇到了这个问题。使用 import moment from 'moment' 语法在 compilerOptions 和中设置 "esModuleInterop":true 为我修复了它。让我知道是否有效。

启用 esmoduleInterop 也会启用 allowSyntheticDefaultImports。

更多信息：https://www.typescriptlang.org/tsconfig#esModuleInterop

Angular 13 package/library 在导入 Angular 13 项目时抛出错误 "moment is not a function"

Angular 13 package/library throws error "moment is not a function" when imported into a Angular 13 project

angular

typescript

momentjs

angular-library

ng-packagr