2017-10-18 5 views
2

Lors du développement de deux projets locaux en angularjs (où l'on importe l'autre), je cours simplement "npm link" dans le dossier du module B puis exécute "npm link module- B "dans le dossier de mon module principal et chaque fois que je changeais un fichier dans le module BI le verrait directement dans mon navigateur desservant le module A.Comment développer localement deux modules angulaires où le module A importe le module B

Mais cela ne semble pas être aussi facile avec angulaire (4).

J'utilise ng-packagr pour générer un dossier dist.
Je lance le lien npm dans le dossier dist.
Je lance le module de liaison npm-B dans le dossier de mon module principal.
Ensuite, je lance ng serve --preserve-symlinks. Jusqu'ici tout va bien, il peut comprendre les composants du module B. Mais si j'essaie de changer quelque chose dans le module B, relancer ng-packagr, le "ng serve" de mon module principal ne parvient pas à compiler, je dois arrêter et commencez le service ng.

Je pense que ng-packagr supprime d'abord le dossier dist, ce qui déclenche une reconstruction dans ngervice qui échoue et ne remarque pas les nouveaux fichiers créés après la suppression du dossier dist.

Faut-il utiliser ng-packagr ou existe-t-il une autre façon de faire un développement multi-projet-local?

Mise à jour:

Si nous commentons cette section en ng-packagr.js il ne marche pas supprimer le dossier et les mises à jour du navigateur chaque fois qu'un fichier est modifié et ngpackagr est exécuté:

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

Mais l'exécution de ng-packagr prend un certain temps en fonction de la taille de la bibliothèque. Comme il construit le tout et pas seulement les fichiers qui sont modifiés.

Répondre

3

Ok, je pense que je l'ai fonctionné. Cette solution semble beaucoup plus simple et n'utilise pas ng-packagr. Ce que j'ai fait était:

  • Dans le module B, j'ai déplacé toutes mes dépendances angulaires @ des dépendances vers des dépendances.
  • Ajout index.ts dans le dossier racine du module B contenant:
    export * de "./src/.../panel.module"
  • Exécuter "lien NPM" à partir du dossier racine du module B
  • Run "lien NPM module B" du module A dossier de racine
  • Run ng servir --preserve-symlinks

le fichier index.ts le fait que l'importation reste le même si vous prenez le module à partir d'un NPM référentiel ou développement local:
import {moduleB} de "module-b";

Je pense que cette solution ne fonctionne que pour les composants qui sont destinés à être exécutés uniquement dans un «conteneur parent», comme un projet utilisant le composant. Si moduleB aurait, disons un demo-module/page, je pense qu'il faudrait le décomposer en deux étapes, d'abord le module de démo en tant que projet npm séparé et le module Component d'un projet Child-npm.

+0

J'essaie de faire la même chose avec le développement local angulaire et les bibliothèques partagées etc ... Avez-vous un github qui montre plus comment vous avez cette configuration? –

+0

Désolé, pas atm. Mais dès que j'aurai le temps d'en fixer un, je le posterai –

+1

Quelles versions de 'angular-cli' et' npm' utilisez-vous? Parce qu'avec la version angulaire '5.2.4' et la version npm' 5.6.0', 'ng serve' qui conduit' ERROR in ./node_modules/module-b/index.ts La construction du module a échoué: Erreur: C: \ mon-espace de travail \ module-a \ node_modules \ module-b \ index.ts est absent de la compilation TypeScript. S'il vous plaît assurez-vous qu'il est dans votre tsconfig via la propriété 'files' ou 'include'. Apparemment, Typescript est devenu plus strict, [comme committe ici) (https://github.com/angular/angular-cli/issues/8284# émissionecomment-341417325). –