J'ai trois projets Angular cli différents (X, Y, Z). Je veux faire de X un projet parent tandis que je veux ajouter Y et Z comme dépendances du paquet npm à X. Cela signifie que [X] package.json contiendra les dépendances de [Y] et [Z] comme suit.
"dependencies": {
"@angular/common": "^4.0.0",
//.. other angular dependency
"y": "1.0.1",
"z": "1.0.3"
}
Comment créer ces dépendances?
Remarque: pour le moment, j'ai X et Y comme dossier chargé paresseux à l'intérieur de X. Ce que je veux découpler en tant que paquet NPM indépendant.
En gros, vous voulez le faire en 3 étapes:
Voici comment vous le faites en bref:
Je recommande fortement d'utiliser ng-packagr pour créer la bibliothèque à partir de "y" et de "z". ng-packagr
vous permet de transformer un projet Angular CLI
existant en bibliothèque. Fondamentalement, vous devez faire cinq choses:
npm install ng-packagr --save-dev
ajoutez ng-package.json
avec le contenu suivant:
{ "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" } }
ajoutez public_api.ts
aux exportations de vos modules, c.-à-d.
export * from './src/app/modules/example/example.module'
ajouter un script à package.json
: "packagr": "ng-packagr -p ng-package.json"
npm run packagr
Créez le paquet npm en exécutant npm pack
qui générera un fichier y-1.0.0.tgz
-, où y
est le nom de votre projet et 1.0.0
la version que vous avez définie dans votre package.json
Maintenant, vous pouvez installer ceci comme dépendance dans votre projet 'x' en exécutant npm install ./relative/path/to/y-1.0.0.tgz
et vous avez terminé!
Cet article est basé sur cet article .
Celles-ci sont toutes les étapes, si aucune n’est claire, faites-le-moi savoir. Une fois que vous avez créé les deux projets Cli:
1) Exportez le composant que vous souhaitez utiliser à partir de votre projet de bibliothèque:
@NgModule({
...
exports: [MyComponent]
...
2) Installez ng-packagr:
npm install ng-packagr --save-dev
3) Ajoutez deux fichiers à votre projet de bibliothèque, ng-package.json et public_api.ts:
contenu ngpackage.json:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
4) Exportez le module que vous souhaitez utiliser dans le projet principal:
export * from './src/app/modules/whatever.module'
5) Dans votre projet de bibliothèque, éditez le fichier package.json pour qu'il contienne ceci:
"scripts": {
...
"packagr": "ng-packagr -p ng-package.json"
}
6) Exécutez npm run packagr
et, une fois le processus terminé, vous trouverez un dossier dist à la racine du projet. Ceci est votre bibliothèque de composants.
7) cd
dans le dossier dist et exécutez npm pack. Cela créera un fichier à la racine du dossier dist.
8) Ensuite, vous avez la possibilité de le publier sur npm ou de le consommer directement depuis bitbucket, github, etc. Juste dans le package.json du projet principal, ajoutez la dépendance.
9) Une fois installé, vous pouvez importer votre composant dans le fichier app.module.ts de n’importe quelle application, en l’incluant dans son tableau @NgModule imports…
import { HeaderModule } from 'my-package-name';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HeaderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Vous devez conditionner vos projets Y et Z et les publier sur le référentiel npm ou vous pouvez les développer localement et les utiliser via le lien npm ... Voici le générateur Yeoman qui peut vous aider.