Блог

Я разрабатываю приложение и кучу библиотек, которые будут использоваться в приложении. Все они недавно обновлены до Angular 9. Библиотеки настроены на сборку без ivy, а приложение настроено на сборку с ivy, что соответствует рекомендациям по обновлению. Процесс локальной разработки, которому я следовал, выглядит следующим образом —

1. Создайте библиотеку и приложение с помощью —watch.
2. Внесите изменения в библиотеку. После успешной сборки библиотеки скопируйте dist/my-lib и вставьте его в папку node_modules приложения (это запускает сборку приложения).

Это работало до Angular 8 и ниже, но с Angular 9 выдает ошибку сборки приложения: ОШИБКА при попытке перезаписать path/node_modules/my-lib/lib/services/payment.service.d.ts.__ivy_ngcc_bak файлом резервной копии ngcc, который запрещен.

Итак, теперь я должен дополнительно выполнить следующее —

1. Остановите сборку приложения.
2. Удалите библиотеку из node_modules приложения, а затем скопируйте и вставьте новую.
3. Запустите приложение снова.

В документах angular указано использовать ссылку npm https://angular.io/guide/creating-libraries#linked-libraries. Но я не могу понять значение :

конфигурация библиотеки package.json указывает на правильные точки входа. Например, main должен указывать на файл JavaScript, а не на файл TypeScript.

Я попробовал npm link, но это не запускает сборку приложения, и мои изменения не отражены. Я хотел бы знать, как решить проблему с npm link или есть ли лучший способ совместной работы с библиотеками и приложениями.

Файл package.json моей библиотеки выглядит следующим образом (поскольку я работаю над клиентским приложением, я публикую только структуру package.json):

 {
  "name": "my-lib",
  "version": "1.2.0",
  "description": "description",
  "repository": {
    "url": "http://private-nexus-url"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-ci": "npm run test-headless amp;amp; npm run sonar amp;amp; npm run publish",
    "test-headless": "ng test --watch=false --browsers=ChromeHeadlessNoSandbox --code-coverage",
    "sonar": "sonar-scanner",
    "test": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-lib": "ng build --prod my-lib",
    "publish": "npm run build-lib amp;amp; cd dist/my-lib amp;amp; npm publish",
    "postinstall": "ngcc"
  },
  "dependencies": {
    "@angular/animations": "^9.1.6",
    "@angular/common": "^9.1.6",
    "@angular/compiler": "^9.1.6",
    "@angular/core": "^9.1.6",
    "@angular/forms": "^9.1.6",
    "@angular/platform-browser": "^9.1.6",
    "@angular/platform-browser-dynamic": "^9.1.6",
    "@angular/router": "^9.1.6",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.5",
    "@angular-devkit/build-ng-packagr": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    ...
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "prettier --write",
      "git add"
    ]
  }
}
  

У меня была абсолютно такая же проблема. Оказывается, postinstall: ngcc запись, которая у вас есть, необходима только для Angular версии 9.0.0

Я использую версию 9.1.10, и удаление postinstall: ngcc записи устранило проблему для меня.

Кроме того, я выбрал перепроектирование библиотеки, поскольку мы интегрируем другую систему сборки. Мне действительно не нравится связывать библиотеки. Да, вы избегаете любых проблем с контрольной суммой, которые могут возникнуть при разработке библиотеки параллельно с вашим основным приложением (если вы включаете библиотеку в качестве зависимости в свой package.json, то есть). Мое выгодное долгосрочное решение состоит в том, чтобы иметь отдельную библиотеку, которая используется приложением для доставки / артефакта, имеет package.json и соответствующую запись package-lock.json.

это работает для меня

 "configurations": {
    "production": {
        "tsConfig": "projects/mylib/tsconfig.lib.prod.json"
    }
}
  

Для использования локальной библиотеки в другом проекте agular вы можете сделать это :

1. после создания вашей библиотеки вы можете создать ее с помощью: ng build yourLibrary
2. Перейдите в папку dist : ./dist/yourlibrary/
3. Свяжите их с помощью npm: npm link npm link создайте аналогичный файл в локальном пакете npm
4. Перейдите на главную страницу вашего приложения и свяжите библиотеку с вашим приложением: npm link yourLibrary

После этого вы можете использовать библиотеку в своем проекте: пример :

в вашем app.module.ts импортируйте библиотеку следующим образом: импортируйте {yourLibraryModule} из ‘yourLibrary’;

Они используют вашу библиотеку как другой модуль узла. и запустите свое приложение, для меня это нормально.