Упакуйте/импортируйте локальный разработанный модуль в проект

Я пытаюсь импортировать локально разработанный проект/модуль Angular в угловое приложение, не публикуя его в репозиторий npm.

Во-первых, я следовал этому руководству, чтобы создать свой модуль в формате UMD (я пропустил часть публикации):

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

Затем я попытался установить свой модуль в финальное приложение, выполнив эту командную строку:

npm install ../path-to-my-module --save

Это успешно добавило мой модуль как @myscope/myModule в package.json моего приложения, но проблема в том, что импорт модуля в приложение не распознается. В итоге я получил следующую ошибку:

Cannot find module @myscope/myModule

У меня в node_modules создана папка @myscope, а внутри нее есть ярлык на ../path-to-my-module с именем myModule

Может ли быть источником проблемы тот факт, что есть ярлык? и если да то как исправить?


person Strider    schedule 05.01.2018    source источник
comment
Он добавляет пакет в ваш package.json, но, скорее всего, не устанавливает модуль в ваш node_modules.   -  person Z. Bagley    schedule 05.01.2018
comment
У меня в node_modules создается папка @myscope/myModule, а внутри нее есть ссылка на ../path-to-my-module. Я добавлю эту информацию в свой вопрос   -  person Strider    schedule 05.01.2018


Ответы (1)


Я нашел эту статью, которая помогла мне решить мою проблему:

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e


Если кратко, то как я поступил:

  1. Install ng-packagr:
    • Install it globally:
      npm install -g ng-packagr
    • Установите его в модуль проекта:
      npm install ng-packagr --save-dev
  2. create ng-package.json in the root folder of the project, and add the following:
    {
      "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
      "lib": {
        "entryFile": "public_api.ts"   
        "externals": {
          "@angular/cdk": "ng.cdk",
          "@angular/cdk/accordion": "ng.cdk.accordion",
           //...
        }
      }
    }

В моем случае мне пришлось добавить внешние зависимости, чтобы избежать ошибок упаковки/сборки:

  1. создайте public_api.ts в корневой папке проекта и добавьте следующее:

    export * from './src/app/modules/myFeature/my-feature.module'

  2. Отредактируйте package.json и добавьте строку packagr к тегу scripts:

"scripts": {
  //...
  "packagr": "ng-packagr -p ng-package.json"
}

  1. Создайте пакет, выполнив следующую команду из корневой папки:

    npm run packagr

  2. Установите его для локальной разработки:

    • Pack the module by running the following command from the dist folder:
      npm pack
    • Установите упакованный модуль из финального проекта:
      npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

Затем я мог бы импортировать свой модуль из любого другого модуля или компонента моего окончательного проекта.

person Strider    schedule 08.01.2018
comment
Привет, мне удалось сделать то же самое. Мой вопрос заключается в том, как непрерывно создавать библиотеку компонентов без необходимости пересобирать ее каждый раз, когда вы хотите увидеть изменения в своем проекте, которые фактически потребляют библиотеку компонентов? - person TerNovi; 06.04.2018
comment
К сожалению, я не нашел прямого способа, позволяющего отразить изменение, сделанное в библиотеке компонентов, непосредственно в финальном проекте, который ее использует. Может быть, автоматизация сценария может сделать эту работу? Например: 1. Соберите библиотеку npm run packagr 2. Упакуйте ее npm pack 3. Установите ее npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz - person Strider; 08.04.2018
comment
После некоторых копаний я нашел несколько примеров, которые должны перезагружаться всякий раз, когда изменяется один из файлов в проекте библиотеки. Взгляните сюда. До сих пор я пробовал это, и я не получил результатов, которые они упоминают. github.com/jvandemo/ . Другая вещь, которую я вижу, это то, что был билет в отношении невозможности перекомпилировать файлы ts внутри проекта lib. github.com/jvandemo/generator-angular2-library/issues/72. Этот пример с йоменом, и я переключился, чтобы попробовать. - person TerNovi; 08.04.2018
comment
вместо npm pack можно использовать npm link? - person Sumit Ramteke; 18.07.2018
comment
@TerNovi В Angular CLI 6.2 есть способ создать библиотеку в режиме --watch: github.com/angular/angular-cli/wiki/ - person Markus Pscheidt; 03.10.2018