web-dev-qa-db-fra.com

Comment configurer un projet angulaire en tant que dépendance dans package.json d'un autre projet angulaire

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.

angularnpmangular-clisinopia
6
Partha Sarathi Ghosh

En gros, vous voulez le faire en 3 étapes:

  1. Transformez vos projets "y" et "z" en une bibliothèque
  2. Emballez cette bibliothèque dans un paquet npm
  3. Laissez "x" consommer cette bibliothèque

Voici comment vous le faites en bref:

  1. 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:

    • installer le paquet avec: 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"

    • lancer le script: npm run packagr

  2. 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

  3. 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 .

4
tommueller

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 { }
1
axl-code

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.

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

0
Ashwani Kumar