当导入 Angular 13 项目时，Angular 13 包/库抛出错误“moment is not a function”

Question

我正在升级私有角度库/包（my-lib），以便我可以迁移所有其他项目，但是当导入到项目中时，其中一项服务使用 moment 并抛出错误：“错误类型错误：moment 不是函数”

该库在开发模式下工作，构建和发布都正常，即使导入到项目中，所有组件和资源都加载良好并且没有显示错误，依赖项已下载，但似乎某些 3rd 方依赖项不被“我的”所知-lib”导入后。

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

“my-lib”中的一些文件

服务.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”标志

包.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 中运行时遇到了这个问题。设置"esModuleInterop":true并compilerOptions 使用语法import moment from 'moment'为我解决了这个问题。让我知道这是否有效。

启用esmoduleInterop还可以启用allowSyntheticDefaultImports.

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