Сбой сборки приложения Angular 9 при работе со связанными библиотеками

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

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

Это работало до Angular 8 и ниже, но с Angular 9 ошибки сборки приложения говорили: ОШИБКА в Пытался перезаписать путь / 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, но это не запускает сборку приложения, и мои изменения не отражаются. Я хотел бы знать, как решить проблему с ссылками на npm или есть ли лучший способ совместной работы с библиотеками и приложениями.

Моя библиотека 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 && npm run sonar && 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 && cd dist/my-lib && 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"
    ]
  }
}

angular angular-ivy npm-link
person Tanmay Ray    schedule 09.09.2020    source источник
comment
Обычно я закатываю глаза, когда люди говорят это, но в данном случае это действительно может помочь, поскольку, возможно, возникает проблема с правами доступа к файлам. Вы пробовали стереть node_modules и снова запустить npm i? Также закройте все терминалы или редакторы, открытые в этом каталоге.   -  person Richard Dunn    schedule 09.09.2020
comment
@RichardDunn На что конкретно ты закатываешь глаза? Это было непонятно. Я спрашиваю, потому что единственный способ, которым я успешно скомпоновал (и наблюдал изменения) в библиотеке в версии 9/10, - это выключить ivy в приложении-потребителе.   -  person Mark Witmer    schedule 02.10.2020
comment
Я закатил глаза на собственное предложение, но, перечитав вопрос, я не думаю, что вообще правильно прочитал его. Я бы попробовал установить символические ссылки на ваши библиотеки, это похоже на поток, который у вас есть сейчас, поэтому результаты могут быть такими же, но это легко попробовать. В противном случае может работать ссылка npm.   -  person Richard Dunn    schedule 03.10.2020

Ответы (3)


arrow_upward
0
arrow_downward

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

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

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

person Jack Doe    schedule 15.10.2020

arrow_upward
0
arrow_downward

это подходит для меня

"configurations": {
    "production": {
        "tsConfig": "projects/mylib/tsconfig.lib.prod.json"
    }
}
person asma    schedule 01.12.2020

arrow_upward
0
arrow_downward

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

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

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

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

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

person Tinquiet    schedule 19.02.2021