Angular 13 包/库在导入 Angular 13 项目时抛出错误“时刻不是函数”

Question

我正在升级一个私有 Angular 库/包 (my-lib)，这样我就可以迁移所有其他项目，但是当导入到项目中时，其中一项服务会使用 moment 并引发错误： "ERROR TypeError: 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