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

Question

我升级了一个私有的角度库/包(my-lib)，以便迁移所有其他项目，但是当导入到项目中时，其中一个服务使用矩并抛出一个错误："ERROR TypeError: the不是一个函数“。

库在dev模式下工作，构建和发布也是正常的，即使将所有组件和资源导入项目时，所有组件和资源都很好地加载，并且没有显示错误，依赖项被下载，但是在导入后，一些第三方依赖项并不为“my”所知。

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

“我的库”中的一些文件

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": ["."]
}

这是从角度9到13的更新，我可能遗漏了什么，但找不到解释行为变化的例子或文档。

ps：“要求”函数具有相同的行为。

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

Answer 2

由于我目前没有足够的代表来写评论，所以我想强调克里斯·汉密尔顿在评论中所说的话，这有助于我解决问题：

确保没有将allowSyntheticDefaultImports设置为false。可能只是添加它，并将其设置为真，以获得良好的度量。

在将库升级到角13时，我也遇到了同样的问题。我已经修复了导入(import moment from 'moment')，将"esModuleInterop":true添加到基本项目main.ts的compilerOptions中，但它没有工作。此外，我还必须添加"allowSyntheticDefaultImports": true才能使其工作，尽管以前没有将它设置为false。显然，在某些情况下，除了"esModuleInterop":true之外，它还需要存在。

Answer 3

也不能评论，因为代表，但克里斯的回答，为我们节省了一些头痛(我们升级从角度11 ->14).对我们来说，我们必须做的另一件事是，我们使用ng-packagr作为组件，因为它们被另一个应用程序作为dependency...in使用--在这种情况下，我们必须通过ng-packagr -c传递一个配置(该配置没有使用完整的常春藤编译模式)，而ng-packagr -c将allowSyntheticDefaultImports设置为true，因为esModuleInterop似乎也没有为ng packagr设置此属性。