Jak ustawić projekt kątowy jako zależność w package.json innego projektu kątowego

Question

Mam trzy różne projekty Angli cli (X, Y, Z). Chcę uczynić [X] projektem nadrzędnym, podczas gdy ja chcę dodać Y i Z jako zależności pakietu npm do X. Oznacza to, że [X] pakiet.json będzie zawierał zależności [Y] i [Z] w następujący sposób.

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

Jak utworzyć te zależności?

Uwaga: Teraz mam Y i Z jako leniwy załadowany folder wewnątrz X. Który chcę odłączyć jako niezależny pakiet npm.

Answer 1

Musisz spakować swoje projekty Y i Z i opublikować je na repozytorium npm lub możesz je rozwijać lokalnie i używać ich za pośrednictwem npm link ... Tutaj generator Yeoman, który może ci pomóc.

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

Answer 2

Zasadniczo chcesz to zrobić w 3 krokach:

1. Zamień swoje projekty "Y" i "Z" do biblioteki
2. Pakiet że biblioteka w produkt NPM-pakietu
3. Niech „x” konsumować tę bibliotekę

Oto jak to zrobić w skrócie:

1. Bardzo polecam używanie ng-packagr do tworzenia biblioteki z "y" i "z". ng-packagr umożliwia wzięcie istniejącego projektu Angular CLI i przekształcenie go w bibliotekę. Zasadniczo trzeba robić pięć rzeczy:

   • zainstalować pakiet z: npm install ng-packagr --save-dev

   • dodać ng-package.json o następującej treści:

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

   • dodać public_api.ts z eksportu swoich modułów , tj.

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

   • skrypt dodatek do package.json: "packagr": "ng-packagr -p ng-package.json"

   • uruchomić skrypt: npm run packagr

2. utworzyć NPM-pakiet, uruchamiając npm pack które będą generować y-1.0.0.tgz -file, gdzie jest y nazwa twojego projektu i 1.0.0 wersja ustawiona w twojej

3. Teraz możesz zainstalować to jako zależność w projekcie "x", uruchamiając npm install ./relative/path/to/y-1.0.0.tgz i gotowe!

Ten post jest oparty na tym article.

Answer 3

To są wszystkie kroki, jeśli którekolwiek z nich nie jest jasne, daj mi znać. Gdy masz dwa CLI projektów Utworzono:

1) wywóz komponent, którego chcesz używać z projektu Biblioteka:

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

2) Instalowanie NG-packagr:

npm install ng-packagr --save-dev 

3) dodać dwa pliki do projektu biblioteki, ngpackage.json i public_api.ts: treść

ngpackage.json:

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

4) Eksportowanie modułu chcesz użyć w głównym projektu:

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

5) edycję projektu biblioteka plik package.json zawierać to:

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

6) Uruchom npm run packagr, a gdy proces się zakończy, znajdziesz folder dist w katalogu głównym projektu. To jest twoja biblioteka komponentów.

7) cd do folderu dist i uruchom pakiet npm. Spowoduje to utworzenie pliku w katalogu głównym folderu dist.

8) Następnie możesz opublikowac go na npm, lub pobrać bezpośrednio z bitbucket, github itp. Wystarczy w package.json głównego projektu dodać zależność.

9) Po zainstalowaniu, można zaimportować komponent do app.module.ts dowolnej aplikacji, w tym przez to w swojej tablicy importu @NgModule ...

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