Tanta roba ad Angular day 2018. Paolo Galfione ci spiegherà come gestire applicazioni Enterprise con Angular 6 e Schematics
All’Angular Day di Verona, il prossimo 15 giugno, Paolo Galfione terrà il talk Gestire applicazioni di classe Enterprise con Angular 6 e Schematics, dove approfondirà Schematics e Workspace, due nuove features disponibili con Angular 6.
Ecco una brevissima anticipazione del tema:
Schematics
Gli Schematics sono una libreria, presente nella nuova versione di Angular. A che cosa servono? Non è semplicissimo farsi un’idea leggendo la documentazione. In sintesi si tratta di un tool di workflow per la generazione e manipolazione di “Tree”, ovvero di alberature di files.
Uno Schematics altro non è infatti che una serie di regole: prende in ingresso un altro schematics, lo “manipola”, e produce in uscita a sua volta uno Schematics modificato. L’alberatura in sé non è agganciata a nessun file system, e consente il chaining di diversi Schematics, in modo da modularizzare il più possibile le operazioni su un progetto.
Uno dei vantaggi degli Schematics è appunto la facilità di concatenarli insieme. Nell’esempio qui sotto (preso da blog.angular.io) lo Schematic ‘component’ è chiamato dalla collection @schematics/angular per aggiungere un componente all’applicazione e agganciare una header a ciascun file TypeScript aggiunto dallo Schematic stesso.
import { Rule, SchematicContext, Tree, chain, externalSchematic } from '@angular-devkit/schematics'; const licenseText = ` /** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ `; export function myComponent(options: any): Rule { return chain([ externalSchematic('@schematics/angular', 'component', options), (tree: Tree, _context: SchematicContext) => { tree.getDir(options.sourceDir) .visit(filePath => { if (!filePath.endsWith('.ts')) { return; } const content = tree.read(filePath); if (!content) { return; } // Prevent from writing license to files that already have one. if (content.indexOf(licenseText) == -1) { tree.overwrite(filePath, licenseText + content); } }); return tree; }, ]); }
Il Tree viene considerato una sorta di area di staging, e non effettua modifiche fisiche ai files finché non avviene il “commit”. Per cronaca, occorre dire che Angular CLI già usa gli Schematics dietro le quinte, e che di fatto gli Schematics sono stati resi “disponibili” per uso diretto a seguito di un refactoring del cuore di CLI, esportandoli in quello che ora viene chiamato DevKit.
Workspace
Cos’è un workspace in Angular 6?
An Angular Workspace is a directory which is generated via Angular CLI and able to contain multiple projects or libraries that derive the configuration out of a single file.
Tutta la documentazione è disponibile ovviamente su GitHub. A ogni modo si tratta di una ridefinizione dell’alberatura, in modo da consentire la configurazione del processo di build per diverse applicazioni in modo indipendente.

LINK
Your first @angular/schematics
Understanding the Angular CLI Workspace File