web-dev-qa-db-fra.com

angular 6 - meilleure pratique de partage de code commun entre projets

Comment partager du code entre projets?

J'ai deux applications créées en utilisant:

ng generate application app1

ng generate application app2

Je voudrais projects/app1/src/app.module.ts pour importer un module depuis projects/app2/src/shared/common.module.ts

Quelle est la meilleure pratique pour cela sans créer un 3e projet appelé commun ou quelque chose? Créez un projet/commun ou ayez simplement un dossier appelé common et plaquez les fichiers TypeScript ici et importez-les.

angular6angular-cli-v6
8
bhantol

Utilisez des projets de bibliothèque!

ng generate library common

Cela ajoutera automatiquement des alias de chemin d'accès au _ tsconfig.json

  "common": [
    "dist/prod/common"
  ],
  "common/*": [
    "dist/prod/common/*"
  ]

Ce qui vous permettra de vous référer aux modules et composants exportés, services et pipes définis dans le projet de bibliothèque common.

Par exemple, dans l'un de vos app.module.ts:

import { SharedModule } from 'common';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [...],
  exports: [...]
  bootstrap: [AppComponent]
})
export class AppModule { }

Une alternative pour prendre en charge le rechargement à chaud pendant ng serve d'une application consommatrice (par exemple, pour le développement) consiste à importer à partir du public_api au niveau du projet, comme suit:

import { SharedModule } from 'projects/common/src/public_api';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  ...
})
export class AppModule { }

Essayez-le, je l'ai beaucoup utilisé et ça marche à merveille! Je vous recommande fortement de lire ce document:

14
Fernando Espinosa

Si la majorité des applications partagent le code commun, je proposerai une autre approche utilisant des modules de routage dynamique et de chargement différé. Dans la même base de code, vous pouvez ajouter tout le code spécifique à l'application dans un nouveau module. Ensuite, vous ajoutez un indicateur supplémentaire dans le fichier d'environnement et créez un nouveau fichier d'environnement, afin que l'application puisse être intégrée dans un ensemble différent par la configuration d'internement --c. pour plus de détails, jetez un œil à ceci article

1
peanut