导入 Angular 13 项目时，Angular 13 包会抛出错误“moment 不是函数”

Question

我正在将私有库 (privLib) 升级到 Angular 13，因此我可以迁移所有其他项目，但是当导入到项目中时，其中一项服务使用 moment 并抛出错误：“ERROR TypeError: moment is not a function” .

在开发模式下单独使用库没有问题。它构建没有任何问题，发布也没有问题。相反，当在其他项目中导入时，如果 privLib 使用的组件具有“moment 不是函数”错误，则会抛出错误。

部分文件：

服务.ts

从“时刻”导入时刻；

...

moment([dateParsed.getFullYear(), dateParsed.getMonth(), dateParsed.getDate()]) ----> 抛出错误的行

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "esModuleInterop":true,
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "es2018",
      "es2015",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true,
    "fullTemplateTypeCheck": true, 
    "enableIvy": true
  }
}

ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "assets": [
    "src/assets",
    "src/scss/style-mixins.scss"
  ],
  "lib": {
    "entryFile": "public_api.ts",
    "styleIncludePaths": [
      "src/scss/"
    ]
  },
  "allowedNonPeerDependencies": [
    "."
  ]
}

时刻版本是^2.29.1

我已经尝试在这里关注其他问题，但其中一些问题已经“解决”，但没有解释如何解决。其他人没有为我解决问题

编辑：添加了Package.json

{
  "name": "privLib",
  "version": "105701.0.3",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ux:lib": "ng-packagr -p ng-package.json -c tsconfig.json && bundle-scss --config && npm pack ./dist",
    "clean:install": "rm -rf node_modules/ && npm i",
    "analyze": "ng run privLib:analyze",
    "postinstall": "ngcc --properties es2015 browser module main --first-only"
  }
  "dependencies": {
    "@angular-slider/ngx-slider": "~2.0.3",
    "@angular/animations": "~13.4.0",
    "@angular/cdk": "~13.3.9",
    "@angular/common": "~13.4.0",
    "@angular/compiler": "~13.4.0",
    "@angular/core": "~13.4.0",
    "@angular/forms": "~13.4.0",
    "@angular/material": "~13.3.9",
    "@angular/material-moment-adapter": "~13.3.9",
    "@angular/platform-browser": "~13.4.0",
    "@angular/platform-browser-dynamic": "~13.4.0",
    "@angular/router": "~13.4.0",
    "@fortawesome/angular-fontawesome": "~0.10.2",
    "@fortawesome/fontawesome-svg-core": "~6.4.2",
    "@fortawesome/free-brands-svg-icons": "~6.4.2",
    "@fortawesome/free-regular-svg-icons": "~6.4.2",
    "@fortawesome/free-solid-svg-icons": "~6.4.2",
    "@types/estree": "^1.0.2",
    "@types/ws": "8.5.4",
    "angular2-notifications": "9.0.0",
    "bootstrap": "~4.5.3",
    "chart.js": "~2.9.4",
    "hamburgers": "~1.2.1",
    "hammerjs": "~2.0.8",
    "jquery": "~3.5.1",
    "moment": "^2.29.1",
    "ng2-charts": "~2.4.3",
    "ng2-file-upload": "~2.0.0-3",
    "ngx-bootstrap": "~8.0.0",
    "ngx-captcha": "~11.0.0",
    "ngx-mask": "~11.1.5",
    "ngx-popper": "~7.0.0",
    "popper.js": "~1.16.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.11",
    "@angular-eslint/builder": "^13.5.0",
    "@angular-eslint/eslint-plugin": "^13.5.0",
    "@angular-eslint/eslint-plugin-template": "^13.5.0",
    "@angular-eslint/schematics": "13.5.0",
    "@angular-eslint/template-parser": "^13.5.0",
    "@angular/cli": "^13.3.11",
    "@angular/compiler-cli": "^13.4.0",
    "@angular/language-service": "^13.4.0",
    "@babel/compat-data": "^7.8.6",
    "@babel/helper-plugin-utils": "^7.13.0",
    "@ngx-builders/analyze": "^2.0.0",
    "@types/core-js": "^2.5.2",
    "@types/jasmine": "^3.4.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "bundle-scss": "~1.3.4",
    "eslint": "^8.2.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsdoc": "latest",
    "eslint-plugin-prefer-arrow": "latest",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^13.3.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~4.6.4",
    "webpack": "^4.41.5"
  }
}

Answer 1

根据您提供的内容，我想说您的软件包没有提供作为依赖项的时刻。

https://github.com/ng-packagr/ng-packagr/blob/main/docs/dependency.md

解释得很好。我建议您将 moment 添加到 package.json 中的对等依赖项列表中

https://blog.domenic.me/peer-dependency/ 解释了如何执行此操作。

另一方面，我在您的依赖项列表中看到了jquery。我无法想象这是单页应用程序的有效依赖项的场景。

请遵循 ng-packagr 的建议并提供必要的依赖项作为对等依赖项。然后再次尝试构建您的解决方案。