Équipe FIRE
Étude sur les web components
Projet Angular- Création- Structure- Composants Angular- DépendancesComposants web- Fonction- Recherche de pistes
Auto-formation
Piste 1
4 - Création> ng-packagr ng-package.json > dist/package5 - Publication> npm pack > archive tarball (.tgz)> npm publish > registre npm6 - Réutilisation> npm install <nom-package>
1 - Installation > npm install -g -ng-packagr2 - Configuration- ng-package.json3 - Organisation> ng generate library <nom>- bibliothèque (lib/projet)> placer les composants dans la lib
Ng-packagr
Piste 2
4 - Réutilisation> copier polyfills.js / main.js dans dist/package-projet=> Nouveau projet <script src="./polyfills.js"><script src="./main.js">=> Page web<composant-custom>
1 - Installation > ng add @angular/elements2 - Modification composants> @Input/@Output> app.module.ts> createCustomElement( )> ngDoBootstrap( ) { }3 - Création> ng build --output-hashing none> dist/package-projet
Angular Elements
+ PortabilitéRéutilisation dans n'importe quelle application, sous n'importe quel framework+ Facilité d'utilisationSimple et intégré à l'écosystème Angular- Taille du packageGénération de package parfois lourd (inclut toutes les fonctionnalités d'Angular, même non nécessaires)- Complexité potentielleGestion des dépendances plus difficile car moins de contrôle sur la configuration
Angular Elements
Avantages / inconvénients
+ Contrôle précisPlus de contrôle sur la configuration du package (dépendances, métadonnées)+ Optimisation de la tailleConfiguration + précise = optimisation de la taille- Intégration dans d'autres frameworksPlus difficile à intégrer dans des projets non-Angular- Complexité de configurationConfiguration manuelle plus difficile
Ng-packagr
Avantages / inconvénients
Composants RAM ?
