Как настроить угловой проект как зависимость в package.json другого углового проекта

Question

У меня есть три разных проекта Angular Cli (X, Y, Z). Я хочу сделать [X] родительским проектом, в то время как я хочу добавить Y и Z как зависимости пакета npm к X. Это означает, что [X] package.json будет содержать зависимости [Y] и [Z] следующим образом.

"dependencies": {
    "@angular/common": "^4.0.0",
    //.. other angular dependency
    "y": "1.0.1",
    "z": "1.0.3"
}

Как создать эти зависимости?

Примечание: сейчас у меня Y и Z как лениво загруженная папка внутри X. которую я хочу отделить как независимый пакет npm.

Answer 1

В основном вы хотите сделать это в 3 шага:

1. Превратите свои проекты "y" и "z" в библиотеку
2. Упакуйте эту библиотеку в пакет npm
3. Пусть "х" потребляет эту библиотеку

Вот как вы это делаете вкратце:

1. Я настоятельно рекомендую использовать ng-packagr для создания библиотеки из "y" и "z". ng-packagr позволяет взять существующий Angular CLI проект и превратить его в библиотеку. В основном вы должны сделать пять вещей:

   • установить пакет с: npm install ng-packagr --save-dev

   • добавлять ng-package.json со следующим содержанием:

     {
        "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
        "lib": {
          "entryFile": "public_api.ts"
         }
     }
     

   • добавлять public_api.ts с экспортом ваших модулей, т.е.

     export * from './src/app/modules/example/example.module'
     

   • добавить скрипт в package.json:"packagr": "ng-packagr -p ng-package.json"

   • запустите скрипт: npm run packagr

2. Создайте npm-пакет, запустив npm pack который будет генерировать y-1.0.0.tgz-файл, где y это название вашего проекта и 1.0.0 версия, которую вы установили в своем package.json

3. Теперь вы можете установить это как зависимость в вашем проекте 'x', запустив npm install ./relative/path/to/y-1.0.0.tgz и вы сделали!

Этот пост основан на этой статье.

Answer 2

Это все шаги, если что-то не понятно, дайте мне знать. После того, как вы создали два проекта Cli:

1) Экспортируйте компонент, который вы хотите использовать, из вашего библиотечного проекта:

@NgModule({
  ...
  exports: [MyComponent]
  ...

2) Установите ng-packagr:

npm install ng-packagr --save-dev

3) Добавьте два файла в ваш библиотечный проект, ng-package.json и public_api.ts:

Содержание ngpackage.json:

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

4) Экспортируйте модуль, который вы хотите использовать в основном проекте:

export * from './src/app/modules/whatever.module'

5) В вашем проекте библиотеки отредактируйте файл package.json, чтобы он содержал:

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

6) Беги npm run packagrи после завершения процесса вы найдете папку dist в корневом каталоге вашего проекта. Это ваша библиотека компонентов.

7) cd в папку dist и запустите npm pack. Это создаст файл в корне папки dist.

8) Затем у вас есть возможность опубликовать его на npm или использовать его непосредственно из bitbucket, github и т. Д. Просто в package.json основного проекта добавьте зависимость.

9) После установки вы можете импортировать ваш компонент в app.module.ts любого приложения, включив его в свой массив импорта @NgModule…

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

Вам нужно упаковать свои проекты Y и Z и опубликовать их в репозитории npm, или вы можете разработать их локально и использовать их по ссылке npm... Вот генератор Yeoman, который может вам помочь.

https://github.com/jvandemo/generator-angular2-library