Scribd
Upload
155 views

Enterprise Angular With NX: Sustainable Architectures & Fast Builds

This document discusses using Nx to build Angular applications and libraries in a monorepo structure. It describes how to set up an Nx workspace with multiple related projects. Nx provides tools to visualize module structure, tag projects, cache builds for faster incremental changes, and automate processes. The presenter demonstrates Nx features and advocates its use for maintaining related Angular codebases together.

Uploaded by

jcovera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
155 views

Enterprise Angular With NX: Sustainable Architectures & Fast Builds

This document discusses using Nx to build Angular applications and libraries in a monorepo structure. It describes how to set up an Nx workspace with multiple related projects. Nx provides tools to visualize module structure, tag projects, cache builds for faster incremental changes, and automate processes. The presenter demonstrates Nx features and advocates its use for maintaining related Angular codebases together.

Uploaded by

jcovera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

ManfredSteyer

Enterprise Angular with Nx:


Sustainable Architectures & Fast Builds
Manfred Steyer, ANGULARarchitects.io

@BASTAcon & @ManfredSteyer


@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@BASTAcon & @ManfredSteyer
@ManfredSteyer
Manfred Steyer

@ManfredSteyer
@ManfredSteyer
Monorepo
Structure

@ManfredSteyer
Advantages
Everyone uses the latest versions

No version conflicts

Sharing Libs: Easy

@ManfredSteyer
Moving back and forth

Npm Registry

@ManfredSteyer
Two Flavors
Project Monorepo

• Like Workspaces/Solutions in different IDEs

Company-wide Monorepo

• E. g. used at Google or Facebook

@ManfredSteyer
Creating a Workspace with the CLI
npm install -g @angular/cli

ng new workspace

cd workspace

ng generate app my-app


ng generate lib my-lib

ng serve --project my-app


ng build --project my-app

@ManfredSteyer
Tooling & Generator
https://nrwl.io/nx

@ManfredSteyer
Visualize
Module
Structure

@ManfredSteyer
Creating a Workspace with the CLI
npm install -g @angular/cli

ng new workspace

cd workspace

ng generate app my-app


ng generate lib my-lib

ng serve --project my-app


ng build --project my-app

@ManfredSteyer
Creating a Workspace with Nx
npm install -g @angular/cli

npm init nx-workspace myworkspace

cd workspace

ng generate app my-app


ng generate lib my-lib

ng serve --project my-app


ng build --project my-app

@ManfredSteyer
Creating a Workspace with NX
npm install -g @angular/cli

npm init nx-workspace myworkspace

cd workspace

ng generate app my-app


ng generate lib my-lib --directory my-domain

ng serve --project my-app


ng build --project my-app

@ManfredSteyer
DEMO

@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
Tagging Apps and Libs (nx.json)
"booking": {
"tags": ["domain:booking", "type:app"]
},
"booking-feature-search": {
"tags": ["domain:booking", "type:feature"]
},

@ManfredSteyer
Tagging Apps and Libs (nx.json)
"booking": {
"tags": ["domain:booking", "type:app"]
},
"booking-feature-search": {
"tags": ["domain:booking", "type:feature"]
},

@ManfredSteyer
Linting (.eslintrc)
{
"sourceTag": "domain:booking",
"onlyDependOnLibsWithTags":
["domain:booking", "domain:shared"]
}

@ManfredSteyer
DEMO

@ManfredSteyer
@ManfredSteyer
Options

File System

Nx Cloud

Custom Cache

@ManfredSteyer
Configuration (nx.json)
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/workspace/tasks-runners/default",
[…]
}
},

@ManfredSteyer
Configuration (nx.json)
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/workspace/tasks-runners/default",
"options": {
"cacheableOperations": ["build", "lint", "test", "e2e"],
[…]
}
}
},

@ManfredSteyer
Using

nx build app-or-lib --with-deps

@ManfredSteyer
Prerequisite for Incremental Builds

ng g lib lib-name --buildable

@ManfredSteyer
DEMO

@ManfredSteyer
Also Test and Lint-Results Can be Cached
nx build app-or-lib --with-deps
nx lint app-or-lib --with-deps
nx test app-or-lib --with-deps
nx e2e app-or-lib --with-deps

@ManfredSteyer
DEMO

@ManfredSteyer
@ManfredSteyer
Nx Console
for Visual
Studio Code

@ManfredSteyer
•
•
•
•

@ManfredSteyer
@ManfredSteyer
Smart
Comp. Booking Boarding Shared

Dumb Comp.
Feature Feature Feature Feature Feature

UI UI UI UI UI UI UI UI UI

Domain Domain Domain Domain Domain Domain

Util Util Util Util Util Util

@ManfredSteyer @ManfredSteyer
Booking Boarding Shared

Feature Feature Feature Feature Feature

UI UI UI UI UI UI UI UI UI

Domain Domain Domain Domain Domain Domain

Util Util Util Util Util Util

@ManfredSteyer @ManfredSteyer
Automate

@ManfredSteyer
Usage

@ManfredSteyer
DEMO

@ManfredSteyer
Free eBook
ANGULARarchitects.io/book

@ManfredSteyer
•
•
•
•

@ManfredSteyer
@ManfredSteyer
Slides & Examples

Remote and In-House

http://softwarearchitekt.at/workshops
d
@ManfredSteyer

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy