NX WORKSPACES FOR ANGULAR 

What is NX? 

What is NX? Overview 

What is NX? Overview Encapsulation 

What is NX? Overview Encapsulation Speed 

What is NX? Overview Encapsulation Speed Migration 

What is NX? Overview Encapsulation Speed Migration Plugins 

Why? 

App 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App Funktion Pipe Service Component / Directive Module 

App 

App 

Bring Order 

Have Flexibility 

Gregor Woiwode 

Fabian Gosebrink 

No content

Fabian Gosebrink 

Fabian Gosenbrink 

No content

What is 

Tooling 

Tooling 

Tooling 

Tooling 

NG Workspace 

NG Workspace 

NG Workspace 

NX Workspace 

Workspace 

Intelligent Build 

Intelligent Build Cache 

Encapsulation 

Angular Modules 

Feature Modules 

import { NgModule } from '@angular/core'; @NgModule({ imports: [ ... ], declarations: [ AppComponent, HelloComponent, Hello1Component, Hello2Component, Hello3Component, Hello4Component, Hello5Component, Hello6Component, Hello7Component, Hello8Component, Hello9Component, Hello10Component, Hello11Component, Hello12Component, Hello13Component, Hello14Component, Hello15Component 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

import { NgModule } from '@angular/core'; @NgModule({ imports: [ ... ], declarations: [ AppComponent, Feature1Component1, Feature1Component2, Feature1Component3, Feature1Component4, Feature1Component5, Feature1Component6, Feature2Component1, Feature2Component2, Feature2Component3, Feature2Component4, Feature2Component5, Feature2Component6, ... ], bootstrap: [AppComponent] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], declarations: [ Feature1Component1, Feature1Component2, Feature1Component3, Feature1Component4, Feature1Component5, Feature1Component6, ] }) export class Feature1Module { } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ imports: [ CommonModule ], declarations: [ Feature2Component1, Feature2Component2, Feature2Component3, Feature2Component4, Feature2Component5, Feature2Component6, ] }) export class Feature2Module { } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 

import { NgModule } from '@angular/core'; @NgModule({ imports: [ ], declarations: [ AppComponent, Feature1Component1, Feature1Component2, Feature1Component3, Feature1Component4, Feature1Component5, Feature1Component6, Feature2Component1, Feature2Component2, Feature2Component3, Feature2Component4, Feature2Component5, Feature2Component6, ], }) export class AppModule { } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

import { NgModule } from '@angular/core'; import { Feature1Module } from './feature1-module/feature1.module'; import { Feature2Module } from './feature2-module/feature2.module'; @NgModule({ imports: [ BrowserModule, FormsModule, Feature1Module, Feature2Module ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 

import { NgModule } from '@angular/core'; import { Feature1Module } from './feature1-module/feature1.module'; import { Feature2Module } from './feature2-module/feature2.module'; @NgModule({ imports: [ BrowserModule, FormsModule, Feature1Module, Feature2Module ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import { Feature1Module } from './feature1-module/feature1.module'; import { Feature2Module } from './feature2-module/feature2.module'; Feature1Module, Feature2Module import { NgModule } from '@angular/core'; 1 2 3 4 @NgModule({ 5 imports: [ 6 BrowserModule, 7 FormsModule, 8 9 10 ], 11 declarations: [ 12 AppComponent, 13 HelloComponent 14 ], 15 bootstrap: [ AppComponent ] 16 }) 17 export class AppModule { } 18 

Libraries 

Libraries Share code between apps 

No content

No content

No content

No content

import { /* ... */ } from 'lib-to-configure'; import { NgModule, APP_INITIALIZER, Injectable } from '@angular/core'; 1 import { BrowserModule } from '@angular/platform-browser'; 2 3 4 5 import { AppComponent } from './app.component'; 6 7 export class AppModule {} 8 

import { /* ... */ } from 'lib-to-configure'; import { NgModule, APP_INITIALIZER, Injectable } from '@angular/core'; 1 import { BrowserModule } from '@angular/platform-browser'; 2 3 4 5 import { AppComponent } from './app.component'; 6 7 export class AppModule {} 8 

@NgModule({ declarations: [LibToConfigureComponent], imports: [CommonModule], exports: [LibToConfigureComponent], }) export class LibToConfigureModule {} 1 2 3 4 5 6 

@NgModule({ declarations: [LibToConfigureComponent], imports: [CommonModule], exports: [LibToConfigureComponent], }) export class LibToConfigureModule {} 1 2 3 4 5 6 @NgModule({ declarations: [AppComponent], imports: [BrowserModule, LibToConfigureModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} 1 2 3 4 5 6 7 

No content

No content

No content

No content

No content

No content

Rethinking Libraries 

Libraries Share code between apps 

Libraries Share code between apps Provide feature to one app 

Libraries Share code between apps Provide feature to one app Multiple Libs = 1 Feature 

Feature Feature Ui Data access Utils 

No content

No content

Folders 

Folders Lib: Api Lib: Data Lib: Ui Lib: Util Lib: Feature 

Folders Lib: Api Lib: Data Lib: Ui Lib: Util Lib: Feature 

Feature Ui vs. 

Container Presentational vs. 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 items$: Observable; loading$: Observable; import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 9 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 items$: Observable; loading$: Observable; import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 9 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 constructor(private store: Store) {} import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 items$: Observable; loading$: Observable; import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 9 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 constructor(private store: Store) {} import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 15 16 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 items$: Observable; loading$: Observable; import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 9 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 constructor(private store: Store) {} import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 15 16 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 19 } 20 } 21 

Stateful import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 items$: Observable; loading$: Observable; import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 9 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 constructor(private store: Store) {} import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 15 16 17 18 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); 19 } 20 } 21 this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); import { /* ... */ } from '...'; 1 2 @Component({ 3 selector: 'workspace-groups-meetups-list', 4 templateUrl: './groups-meetups-list.component.html', 5 styleUrls: ['./groups-meetups-list.component.scss'], 6 }) 7 export class GroupsMeetupsListComponent implements OnInit { 8 items$: Observable; 9 loading$: Observable; 10 11 constructor(private store: Store) {} 12 13 ngOnInit() { 14 this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); 15 16 this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); 17 18 19 } 20 } 21 import { /* ... */ } from '...'; @Component({ selector: 'workspace-groups-meetups-list', templateUrl: './groups-meetups-list.component.html', styleUrls: ['./groups-meetups-list.component.scss'], }) export class GroupsMeetupsListComponent implements OnInit { items$: Observable; loading$: Observable; constructor(private store: Store) {} ngOnInit() { this.loading$ = this.store.pipe(select(fromGroupStore.selectIsLoading)); this.items$ = this.store.pipe(select(fromGroupStore.selectAllMeetups)); this.store.dispatch(fromGroupStore.getAllMeetupsFromGroup()); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 

Stateful 1 2 3 4 5 6 7 8 9 10 11 12 13 

Stateful 1 2 3 4 5 6 7 8 9 10 11 12 13 13 

Stateless import { /* ... */ } from '...'; @Component({ selector: 'workspace-meetup-list', templateUrl: './meetup-list.component.html', styleUrls: ['./meetup-list.component.scss'], }) export class MeetupListComponent { @Input() items: Meetup[] = []; } 1 2 3 4 5 6 7 8 9 10 11 12 

Stateless 1 2 3 4 5 6 7 8 9 10 11 12 13 14 

Stateless 13 

Stateless 13 1 2 3 4 5 6 7 8 9 10 11 12 13 

Stateless 14 

Stateless 1 2 3 4 5 6 7 8 9 10 11 12 13 14 

Stateless import { /* ... */ } from '...'; @Component({ selector: 'workspace-meetup-list', templateUrl: './meetup-list.component.html', styleUrls: ['./meetup-list.component.scss'], }) export class MeetupListComponent { @Input() items: Meetup[] = []; @Output() itemClicked = new EventEmitter(); bubbleNavigationEvent(meetup: Meetup) { this.itemClicked.emit(meetup); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 

Stateful Stateless [ ... ] ( ... ) 

Stateful Stateless [ ... ] ( ... ) Stateless [ ... ] ( ... ) 

Stateful Stateless [ ... ] ( ... ) Stateless [ ... ] ( ... ) 

Overlook The dependency graph 

“ Nx is built on a technology-agnostic core that maintains modular units of code and understands the dependency graph between them. nx.dev 

Dependency Graph 

What is it? The dependency graph helps you overlook all your applications and libraries. You learn about relations and dependencies of each module in your workspace. 

Why is it helpful? On-Boarding new colleagues Cyclic library dependency 

Graph 

Graph 

Graph 

Command nx dep-graph 1 2 > NX NOTE Dep graph started at http://127.0.0.1:4211 3 

Command nx dep-graph 1 2 > NX NOTE Dep graph started at http://127.0.0.1:4211 3 > NX NOTE Dep graph started at http://127.0.0.1:4211 nx dep-graph 1 2 3 

Affected Dependency Graph 

Why is it helpful? See impact a library has on the workspace. Optimize build, lint, serve, test commands. 

main feature HEAD nx affected:dep-graph \ --base main How it works Analyse differences between git branches 

Command nx affected:dep-graph 1 \ --base # default: main 2 \ --head # default: HEAD 3 4 > NX NOTE Dep graph started at http://127.0.0.1:4211 5 

Command nx affected:dep-graph 1 \ --base # default: main 2 \ --head # default: HEAD 3 4 > NX NOTE Dep graph started at http://127.0.0.1:4211 5 \ --head # default: HEAD nx affected:dep-graph 1 \ --base # default: main 2 3 4 > NX NOTE Dep graph started at http://127.0.0.1:4211 5 

DEMO 

Restrict Module dependencies 

Why is it helpful? Control encapsulation of workspace modules. Prevent accidental module pollution. 

nx.json eslintrc.json or tslint.json Tag projects nx-enforce-module- boundaries Declare dependencies 

nx.json "projects": { { 1 2 "gatherr": { 3 "tags": [] 4 }, 5 "gatherr-e2e": { 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 "auth-feature": { 10 "tags": [] 11 }, 12 "groups-feature": { 13 "tags": [] 14 }, 15 "home-feature": { 16 "tags": [] 17 }, 18 "personal-feature": { 19 "tags": [] 20 }, 21 "profile-feature": { 22 "tags": [] 23 } 24 } 25 } 26 

nx.json "projects": { { 1 2 "gatherr": { 3 "tags": [] 4 }, 5 "gatherr-e2e": { 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 "auth-feature": { 10 "tags": [] 11 }, 12 "groups-feature": { 13 "tags": [] 14 }, 15 "home-feature": { 16 "tags": [] 17 }, 18 "personal-feature": { 19 "tags": [] 20 }, 21 "profile-feature": { 22 "tags": [] 23 } 24 } 25 } 26 "gatherr": { "gatherr-e2e": { "auth-feature": { "groups-feature": { "home-feature": { "personal-feature": { "profile-feature": { { 1 "projects": { 2 3 "tags": [] 4 }, 5 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 10 "tags": [] 11 }, 12 13 "tags": [] 14 }, 15 16 "tags": [] 17 }, 18 19 "tags": [] 20 }, 21 22 "tags": [] 23 } 24 } 25 } 26 

nx.json "projects": { { 1 2 "gatherr": { 3 "tags": [] 4 }, 5 "gatherr-e2e": { 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 "auth-feature": { 10 "tags": [] 11 }, 12 "groups-feature": { 13 "tags": [] 14 }, 15 "home-feature": { 16 "tags": [] 17 }, 18 "personal-feature": { 19 "tags": [] 20 }, 21 "profile-feature": { 22 "tags": [] 23 } 24 } 25 } 26 "gatherr": { "gatherr-e2e": { "auth-feature": { "groups-feature": { "home-feature": { "personal-feature": { "profile-feature": { { 1 "projects": { 2 3 "tags": [] 4 }, 5 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 10 "tags": [] 11 }, 12 13 "tags": [] 14 }, 15 16 "tags": [] 17 }, 18 19 "tags": [] 20 }, 21 22 "tags": [] 23 } 24 } 25 } 26 "tags": [] "tags": [], "tags": [] "tags": [] "tags": [] "tags": [] "tags": [] { 1 "projects": { 2 "gatherr": { 3 4 }, 5 "gatherr-e2e": { 6 7 "implicitDependencies": ["gatherr"] 8 }, 9 "auth-feature": { 10 11 }, 12 "groups-feature": { 13 14 }, 15 "home-feature": { 16 17 }, 18 "personal-feature": { 19 20 }, 21 "profile-feature": { 22 23 } 24 } 25 } 26 

nx.json "tags": ["app"] "tags": ["app-feature"] "tags": ["app-feature"] "tags": ["app-feature"] "tags": ["app-feature"] "tags": ["app-feature"] { 1 "projects": { 2 "gatherr": { 3 4 }, 5 "gatherr-e2e": { 6 "tags": [], 7 "implicitDependencies": ["gatherr"] 8 }, 9 "auth-feature": { 10 11 }, 12 "groups-feature": { 13 14 }, 15 "home-feature": { 16 17 }, 18 "personal-feature": { 19 20 }, 21 "profile-feature": { 22 23 } 24 } 25 } 26 

linter "@nrwl/nx/enforce-module-boundaries": [ { 1 "rules": { 2 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 

linter "@nrwl/nx/enforce-module-boundaries": [ { 1 "rules": { 2 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "enforceBuildableLibDependency": true, { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 

linter "@nrwl/nx/enforce-module-boundaries": [ { 1 "rules": { 2 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "enforceBuildableLibDependency": true, { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "allow": [], { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 

linter "@nrwl/nx/enforce-module-boundaries": [ { 1 "rules": { 2 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "enforceBuildableLibDependency": true, { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "allow": [], { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "depConstraints": [ { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 

linter "@nrwl/nx/enforce-module-boundaries": [ { 1 "rules": { 2 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "enforceBuildableLibDependency": true, { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "allow": [], { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 "depConstraints": [ { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 } 12 }] 13 } 14 } 15 { "sourceTag": "*", "onlyDependOnLibsWithTags": ["*"] } { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 9 10 11 12 }] 13 } 14 } 15 

linter { "sourceTag": "app", "onlyDependOnLibsWithTags": ["app-feature"] }] { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 "error", 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 }, 12 13 14 15 16 }] 17 } 18 } 19 

linter "error", { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 }, 12 { 13 "sourceTag": "app", 14 "onlyDependOnLibsWithTags": ["app-feature"] 15 }] 16 }] 17 } 18 } 19 

Wildcards https://nx.dev/latest/angular/structure/monorepo-tags#exceptions 

No content

linter "warn", { 1 "rules": { 2 "@nrwl/nx/enforce-module-boundaries": [ 3 4 { 5 "enforceBuildableLibDependency": true, 6 "allow": [], 7 "depConstraints": [ 8 { 9 "sourceTag": "*", 10 "onlyDependOnLibsWithTags": ["*"] 11 }, 12 { 13 "sourceTag": "app", 14 "onlyDependOnLibsWithTags": ["app-feature"] 15 }] 16 }] 17 } 18 } 19 

No content

DEMO 

Speed Up Optimize Build- & Test- Runs 

No content

No content

No content

No content

No content

No content

No content

"paths": { "@workspace/shared/ui-common": ["libs/shared/ui-common/src/index.ts"], "@workspace/shared/ui-layout": ["libs/shared/ui-layout/src/index.ts"], "@workspace/shared/data": ["libs/shared/data/src/index.ts"], "@workspace/shared/utils": ["libs/shared/utils/src/index.ts"], "@workspace/category/data": ["libs/category/data/src/index.ts"], "@workspace/category/api": ["libs/category/api/src/index.ts"], "@workspace/auth/api": ["libs/auth/api/src/index.ts"], "@workspace/auth/feature": ["libs/auth/feature/src/index.ts"], "@workspace/auth/util": ["libs/auth/util/src/index.ts"], "@workspace/auth/data": ["libs/auth/data/src/index.ts"], "@workspace/home/feature": ["libs/home/feature/src/index.ts"], "@workspace/home/ui": ["libs/home/ui/src/index.ts"], "@workspace/maps/util": ["libs/maps/util/src/index.ts"], "@workspace/groups/api": ["libs/groups/api/src/index.ts"], "@workspace/groups/feature": ["libs/groups/feature/src/index.ts"], "@workspace/groups/ui": ["libs/groups/ui/src/index.ts"], "@workspace/groups/data": ["libs/groups/data/src/index.ts"], "@workspace/personal/feature": ["libs/personal/feature/src/index.ts"], { 1 "compileOnSave": false, 2 "compilerOptions": { 3 "rootDir": ".", 4 "sourceMap": true, 5 "declaration": false, 6 "moduleResolution": "node", 7 "emitDecoratorMetadata": true, 8 "experimentalDecorators": true, 9 "importHelpers": true, 10 "target": "es5", 11 "module": "esnext", 12 "typeRoots": ["node_modules/@types"], 13 "lib": ["es2017", "dom"], 14 "skipLibCheck": true, 15 "skipDefaultLibCheck": true, 16 "baseUrl": ".", 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 

import { /* ... */ } from 'lib-to-configure'; import { NgModule, APP_INITIALIZER, Injectable } from '@angular/core'; 1 import { BrowserModule } from '@angular/platform-browser'; 2 3 4 5 import { AppComponent } from './app.component'; 6 7 export class AppModule {} 8 

libs/shared-utils 

libs/shared-utils 

libs/shared-utils /ServiceA libs/shared-utils 

libs/shared-utils /ServiceA libs/shared-utils /ServiceB libs/shared-utils 

Lib1 Lib2 

Changes on Service A or B builds both libs! 

libs/shared-utils 

libs/shared-utils Use with caution! 

libs// App Specific Library libs// 

libs/shared// Generic for one App libs/shared/ 

libs/shared/feature-logging libs/shared/feature-notification libs/shared/feature-... Generic for x Apps 

Move Command nx g @nrwl/angular:move --project my-feature-lib shared/my-feature-lib 1 

Migration Update your Workspace 

Why is it helpful? Benefit from automatic migration scripts. Get new features enabling your team building more efficient solutions. 

Prepare Migration nx migrate Update package.json Identify available migrations Write migrations.json Preparation complete 

Execute Migration Install packages (npm, ...) nx migrate --run-migrations=migrations.json nx migrate latest 

nx migrate latest 1 2 > NX NOTE Dep graph started at http://127.0.0.1:4211 3 Command 

nx migrate latest 1 2 > NX NOTE Dep graph started at http://127.0.0.1:4211 3 > NX NOTE Dep graph started at http://127.0.0.1:4211 nx migrate latest 1 2 3 Command 

↑ nx migrate latest Fetching meta data about packages. It may take a few minutes. Fetching @nrwl/workspace@latest Fetching @nrwl/[email protected] ... Fetching [email protected] Fetching @types/[email protected] Fetching [email protected] Fetching [email protected] .... Fetching @angular/cli@^11.2.0 ... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 - migrations.json has been generated 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 - Run 'nx migrate --run-migrations=migrations.json' 26 Prepare Migration 

↑ nx migrate latest Fetching meta data about packages. It may take a few minutes. Fetching @nrwl/workspace@latest Fetching @nrwl/[email protected] ... Fetching [email protected] Fetching @types/[email protected] Fetching [email protected] Fetching [email protected] .... Fetching @angular/cli@^11.2.0 ... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 - migrations.json has been generated 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 - Run 'nx migrate --run-migrations=migrations.json' 26 - migrations.json has been generated ↑ nx migrate latest 1 2 Fetching meta data about packages. 3 It may take a few minutes. 4 Fetching @nrwl/workspace@latest 5 Fetching @nrwl/[email protected] 6 ... 7 8 Fetching [email protected] 9 Fetching @types/[email protected] 10 Fetching [email protected] 11 Fetching [email protected] 12 .... 13 14 Fetching @angular/cli@^11.2.0 15 ... 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 - Run 'nx migrate --run-migrations=migrations.json' 26 Prepare Migration 

↑ nx migrate latest Fetching meta data about packages. It may take a few minutes. Fetching @nrwl/workspace@latest Fetching @nrwl/[email protected] ... Fetching [email protected] Fetching @types/[email protected] Fetching [email protected] Fetching [email protected] .... Fetching @angular/cli@^11.2.0 ... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 - migrations.json has been generated 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 - Run 'nx migrate --run-migrations=migrations.json' 26 - migrations.json has been generated ↑ nx migrate latest 1 2 Fetching meta data about packages. 3 It may take a few minutes. 4 Fetching @nrwl/workspace@latest 5 Fetching @nrwl/[email protected] 6 ... 7 8 Fetching [email protected] 9 Fetching @types/[email protected] 10 Fetching [email protected] 11 Fetching [email protected] 12 .... 13 14 Fetching @angular/cli@^11.2.0 15 ... 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 - Run 'nx migrate --run-migrations=migrations.json' 26 - Run 'nx migrate --run-migrations=migrations.json' ↑ nx migrate latest 1 2 Fetching meta data about packages. 3 It may take a few minutes. 4 Fetching @nrwl/workspace@latest 5 Fetching @nrwl/[email protected] 6 ... 7 8 Fetching [email protected] 9 Fetching @types/[email protected] 10 Fetching [email protected] 11 Fetching [email protected] 12 .... 13 14 Fetching @angular/cli@^11.2.0 15 ... 16 17 > NX The migrate command has run successfully. 18 19 - package.json has been updated 20 - migrations.json has been generated 21 22 > NX Next steps: 23 24 - Make sure package.json changes make sense and then run 25 26 Prepare Migration 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 migrations.json 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 "version": "12.x.x", { 1 "migrations": [ 2 { 3 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 migrations.json 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 "version": "12.x.x", { 1 "migrations": [ 2 { 3 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "description": "Update the decoration script when using Angular CLI", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 migrations.json 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 "version": "12.x.x", { 1 "migrations": [ 2 { 3 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "description": "Update the decoration script when using Angular CLI", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 migrations.json 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 "version": "12.x.x", { 1 "migrations": [ 2 { 3 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "description": "Update the decoration script when using Angular CLI", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "package": "@nrwl/workspace", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 migrations.json 

"migrations": [ ] { 1 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 11 } 12 "version": "12.x.x", { 1 "migrations": [ 2 { 3 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "description": "Update the decoration script when using Angular CLI", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 6 "package": "@nrwl/workspace", 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "package": "@nrwl/workspace", { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 7 "name": "update-decorate-angular-cli" 8 }, 9 ... 10 ] 11 } 12 "name": "update-decorate-angular-cli" { 1 "migrations": [ 2 { 3 "version": "12.x.x", 4 "description": "Update the decoration script when using Angular CLI", 5 "factory": "./src/migrations/update-11-0-0/update-decorate-angular-cli", 6 "package": "@nrwl/workspace", 7 8 }, 9 ... 10 ] 11 } 12 migrations.json 

> NX Running migrations from 'migrations.json' 1 2 Running migration rename-workspace-schematic-script 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 Running migration update-ngcc-postinstall 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 Running migration migration-v11.1-can-activate-with-redirect-to 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 Running migration always-use-project-level-tsconfigs-with-eslint 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 > NX Successfully finished running migrations from 'migrations.json' 16 Execute Migration 

> NX Running migrations from 'migrations.json' 1 2 Running migration rename-workspace-schematic-script 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 Running migration update-ngcc-postinstall 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 Running migration migration-v11.1-can-activate-with-redirect-to 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 Running migration always-use-project-level-tsconfigs-with-eslint 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 > NX Successfully finished running migrations from 'migrations.json' 16 Running migration rename-workspace-schematic-script Running migration update-ngcc-postinstall Running migration migration-v11.1-can-activate-with-redirect-to Running migration always-use-project-level-tsconfigs-with-eslint > NX Running migrations from 'migrations.json' 1 2 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 > NX Successfully finished running migrations from 'migrations.json' 16 Execute Migration 

> NX Running migrations from 'migrations.json' 1 2 Running migration rename-workspace-schematic-script 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 Running migration update-ngcc-postinstall 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 Running migration migration-v11.1-can-activate-with-redirect-to 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 Running migration always-use-project-level-tsconfigs-with-eslint 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 > NX Successfully finished running migrations from 'migrations.json' 16 Running migration rename-workspace-schematic-script Running migration update-ngcc-postinstall Running migration migration-v11.1-can-activate-with-redirect-to Running migration always-use-project-level-tsconfigs-with-eslint > NX Running migrations from 'migrations.json' 1 2 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 > NX Successfully finished running migrations from 'migrations.json' 16 > NX Successfully finished running migrations from 'migrations.json' > NX Running migrations from 'migrations.json' 1 2 Running migration rename-workspace-schematic-script 3 Successfully finished rename-workspace-schematic-script 4 --------------------------------------------------------- 5 Running migration update-ngcc-postinstall 6 Successfully finished update-ngcc-postinstall 7 --------------------------------------------------------- 8 Running migration migration-v11.1-can-activate-with-redirect-to 9 Successfully finished migration-v11.1-can-activate-with-redirect-to 10 --------------------------------------------------------- 11 Running migration always-use-project-level-tsconfigs-with-eslint 12 Successfully finished always-use-project-level-tsconfigs-with-eslint 13 --------------------------------------------------------- 14 15 16 Execute Migration 

Caution Migrations can fail. Be aware of script errors or situations NX cannot automatically complete the migration for you. 

Missing @nrwl/tao https://github.com/nrwl/nx/issues/2120 A misconfigured dependency prevented the migration from running. npm install --save-dev @nrwl/tao 1 FIX 

Trouble- shooting - Read errors carefully. - Check GitHub for existing issues. - File an issue if you have encountered a new bug. 

ESLint Updating to the latest NX workspace allows to migrating from TSLint to ESLint automatically. You can migrate one project after another to split the effort. 

nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 init : Initialize the @nrwl/angular plugin 7 application : Create an Angular application 8 library : Create an Angular library 9 karma : Add karma configuration to a workspace 10 karma-project : Add karma testing to a project 11 ngrx : Add an ngrx config to a project 12 downgrade-module : Setup Downgrade Module 13 upgrade-module : Add an upgrade module 14 storybook-configuration : Create stories/specs for all components declared in a library 15 storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story 16 stories : Create stories/specs for all components declared in a library 17 component-cypress-spec : Create a cypress spec for a ui component that has a story 18 component-story : Create a stories.ts file for a component 19 move : Move an Angular application or library to another folder 20 add-linting : Add linting configuration to an Angular project 21 convert-tslint-to-eslint : Convert a project from TSLint to ESLint 22 List nx commands 

nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 init : Initialize the @nrwl/angular plugin 7 application : Create an Angular application 8 library : Create an Angular library 9 karma : Add karma configuration to a workspace 10 karma-project : Add karma testing to a project 11 ngrx : Add an ngrx config to a project 12 downgrade-module : Setup Downgrade Module 13 upgrade-module : Add an upgrade module 14 storybook-configuration : Create stories/specs for all components declared in a library 15 storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story 16 stories : Create stories/specs for all components declared in a library 17 component-cypress-spec : Create a cypress spec for a ui component that has a story 18 component-story : Create a stories.ts file for a component 19 move : Move an Angular application or library to another folder 20 add-linting : Add linting configuration to an Angular project 21 convert-tslint-to-eslint : Convert a project from TSLint to ESLint 22 init : Initialize the @nrwl/angular plugin application : Create an Angular application library : Create an Angular library karma : Add karma configuration to a workspace karma-project : Add karma testing to a project ngrx : Add an ngrx config to a project downgrade-module : Setup Downgrade Module upgrade-module : Add an upgrade module storybook-configuration : Create stories/specs for all components declared in a library storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story stories : Create stories/specs for all components declared in a library component-cypress-spec : Create a cypress spec for a ui component that has a story component-story : Create a stories.ts file for a component move : Move an Angular application or library to another folder add-linting : Add linting configuration to an Angular project convert-tslint-to-eslint : Convert a project from TSLint to ESLint nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 List nx commands 

nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 init : Initialize the @nrwl/angular plugin 7 application : Create an Angular application 8 library : Create an Angular library 9 karma : Add karma configuration to a workspace 10 karma-project : Add karma testing to a project 11 ngrx : Add an ngrx config to a project 12 downgrade-module : Setup Downgrade Module 13 upgrade-module : Add an upgrade module 14 storybook-configuration : Create stories/specs for all components declared in a library 15 storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story 16 stories : Create stories/specs for all components declared in a library 17 component-cypress-spec : Create a cypress spec for a ui component that has a story 18 component-story : Create a stories.ts file for a component 19 move : Move an Angular application or library to another folder 20 add-linting : Add linting configuration to an Angular project 21 convert-tslint-to-eslint : Convert a project from TSLint to ESLint 22 init : Initialize the @nrwl/angular plugin application : Create an Angular application library : Create an Angular library karma : Add karma configuration to a workspace karma-project : Add karma testing to a project ngrx : Add an ngrx config to a project downgrade-module : Setup Downgrade Module upgrade-module : Add an upgrade module storybook-configuration : Create stories/specs for all components declared in a library storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story stories : Create stories/specs for all components declared in a library component-cypress-spec : Create a cypress spec for a ui component that has a story component-story : Create a stories.ts file for a component move : Move an Angular application or library to another folder add-linting : Add linting configuration to an Angular project convert-tslint-to-eslint : Convert a project from TSLint to ESLint nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 convert-tslint-to-eslint : Convert a project from TSLint to ESLint nx list @nrwl/angular 1 2 > NX Capabilities in @nrwl/angular: 3 4 GENERATORS 5 6 init : Initialize the @nrwl/angular plugin 7 application : Create an Angular application 8 library : Create an Angular library 9 karma : Add karma configuration to a workspace 10 karma-project : Add karma testing to a project 11 ngrx : Add an ngrx config to a project 12 downgrade-module : Setup Downgrade Module 13 upgrade-module : Add an upgrade module 14 storybook-configuration : Create stories/specs for all components declared in a library 15 storybook-migrate-defaults-5-to-6 : Generate default Storybook configuration files using Story 16 stories : Create stories/specs for all components declared in a library 17 component-cypress-spec : Create a cypress spec for a ui component that has a story 18 component-story : Create a stories.ts file for a component 19 move : Move an Angular application or library to another folder 20 add-linting : Add linting configuration to an Angular project 21 22 List nx commands 

nx g convert-tslint-to-eslint --project 1 DELETE /tslint.json CREATE /.eslintrc.json UPDATE angular.json UPDATE .eslintrc.json Migrate to ESLint 

NX Plugins Cypress, Storybook, Bring your own 

Plugins Nx is a plugin system. nx list 1 List all available plugins 

Protractor Your choice 

Protractor Your choice Deprecation Note https://github.com/angular/protractor/issues/5502 

Story Book 

Why is it helpful? Benefit from automatic migration scripts. Get new features enabling your team building more efficient solutions. 

No content

Install https://nx.dev/latest/angular/storybook/overview 

Configure 

Configure 

Configure 

Write 

Write 

Write 

Write 

Write 

Run 

DEMO 

Wrap up 

Wrap up 

Wrap up Workspace Enterprise Applications 

Wrap up Workspace Enterprise Applications Latest Toolset 

Wrap up Workspace Enterprise Applications Latest Toolset Affected Build & Cache 

Wrap up Workspace Enterprise Applications Latest Toolset Affected Build & Cache SoC through Libs 

Wrap up Workspace Enterprise Applications Latest Toolset Affected Build & Cache SoC through Libs Dep Graph 

Wrap up Workspace Enterprise Applications Latest Toolset Affected Build & Cache SoC through Libs Dep Graph Two-Step Migration 

Wrap up Workspace Enterprise Applications Latest Toolset Affected Build & Cache SoC through Libs Dep Graph Two-Step Migration Plugin Architecture 

Next Talk... 

Thank you!