Пакет/библиотека Angular 13 выдает ошибку «момент не является функцией» при импорте в проект Angular 13

Я обновляю частную библиотеку/пакет angular (my-lib), чтобы я мог перенести все другие проекты, но при импорте в проект одна из служб использует момент и выдает ошибку: «ОШИБКА TypeError: момент не является функцией»

Библиотека работает в режиме разработки, а сборка и публикация проходят нормально, и даже при импорте в проект все компоненты и ресурсы загружаются нормально, ошибки не отображаются, зависимости загружаются, но кажется, что некоторые сторонние зависимости неизвестны "моему -lib" после импорта.

Даже в проекте я могу импортировать момент и использовать его, но «моя библиотека» в node_modules не видит этот пакет.

некоторые файлы в "my-lib"

сервис.тс

      import * as moment_ from 'moment';

const moment = moment_;
...

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

уже пробовал

      import moment from 'moment';

и флаг «allowSyntheticDefaultImports» в tsconfig

пакет.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: функция «требовать» имеет такое же поведение

      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

Если вам нужна дополнительная информация или есть предложения, я буду признателен.

заранее спасибо

Источник

3 ответа

У меня была эта проблема, пытаясь запустить момент в stackblitz. Параметр "esModuleInterop":trueв compilerOptions и используя import moment from 'moment'синтаксис исправил это для меня. Дай мне знать, если это работает.

Включение esmoduleInteropтакже позволяет allowSyntheticDefaultImports.

Дополнительная информация: https://www.typescriptlang.org/tsconfig#esModuleInterop .

Источник

Поскольку в данный момент у меня недостаточно представителей, чтобы написать комментарий, я хотел подчеркнуть то, что сказал Крис Гамильтон в комментариях, которые помогли мне решить проблему:

Убедитесь, что для параметра allowSyntheticDefaultImports не задано значение false. Может быть, просто добавьте его и установите для него значение true.

У меня были те же проблемы при обновлении библиотеки до Angular 13. Уже исправил импорт (import moment from 'moment'), добавил вcompileOptions базовых проектов main.ts, но это не сработало. Я дополнительно должен был добавить"allowSyntheticDefaultImports": trueчтобы он работал, хотя ранее для него не было установлено значение false. По-видимому, в некоторых случаях он должен быть там в дополнение к"esModuleInterop":true.

Источник

Невозможно комментировать ни из-за представителя, но ответ Криса избавил нас от некоторых головных болей (мы обновились с Angular 11 -> 14)... Еще одна вещь, которую мы должны были сделать и заметили, мы использовали ng-packagr для наши компоненты, поскольку они используются другим приложением в качестве зависимости... в этом случае нам пришлось передать конфигурацию (которая не использовала полный режим компиляции плюща) через ng-packagr -c, который установил для allowSyntheticDefaultImports значение true, поскольку esModuleInterop похоже, это свойство не установлено только для ng-packagr.

Источник
Другие вопросы по тегам