Create modern Web Apps with the new Angular and it's ecosystem

Modern Apps

View Slide

View Slide

- Winston Churchill

View Slide

View Slide

Fabian Gosebrink
https://oﬀering.solutions
Google Developer
Expert
Microsoft MVP Pluralsight Author

View Slide

View Slide

main.ts
app.module.ts
app.component.ts

View Slide

platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
1
2
3

View Slide

import { NgModule } from '@angular/...';
import { BrowserModule } from '@angular/...';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11

View Slide

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `{{ title }}`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'oldangularapp';
}
1
2
3
4
5
6
7
8
9
10

View Slide

import { bootstrapApplication } from '@angular/platform-browser';
import { ImageGridComponent } from'./image-grid';
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: `

`,
})
export class PhotoGalleryComponent {
// component logic
}
bootstrapApplication(PhotoGalleryComponent);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

View Slide

@Component({
standalone: true,
template: `

`,
})
// component logic
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
standalone: true,
1
2
3
@Component({
4
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16

View Slide

@Component({
standalone: true,
template: `

`,
})
// component logic
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
standalone: true,
1
2
3
@Component({
4
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16

View Slide

@Component({
standalone: true,
template: `

`,
})
// component logic
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
standalone: true,
1
2
3
@Component({
4
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16
// component logic
}
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
13
14
15
16

View Slide

@Component({
standalone: true,
template: `

`,
})
// component logic
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
standalone: true,
1
2
3
@Component({
4
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16
// component logic
}
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
13
14
15
16 bootstrapApplication(PhotoGalleryComponent);
1
2
3
@Component({
4
standalone: true,
5
6
7
template: `
8

9
`,
10
})
11
12
// component logic
13
}
14
15
16

View Slide

View Slide

ng generate @angular/core:standalone

View Slide

Convert all components, directives, and
pipes to standalone
Remove unnecessary NgModule classes
Bootstrap the application using
standalone APIs

View Slide

View Slide

export const appConfig: ApplicationConfig = {
providers: [
// ...
importProvidersFrom(
ToastrModule.forRoot({ /* ... */ }),
BrowserAnimationsModule
),
],
};
1
2
3
4
5
6
7
8
9

View Slide

providers: [
// ...
),
],
};
1
2
3
4
5
6
7
8
9
),
1
providers: [
2
// ...
3
4
5
6
7
],
8
};
9

View Slide

providers: [
// ...
provideRouter(APP_ROUTES),
provideHttpClient(
withInterceptors([...]),
),
),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

View Slide

providers: [
// ...
provideHttpClient(
),
),
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
provideHttpClient(
),
1
providers: [
2
// ...
3
4
5
6
7
8
9
10
11
),
12
],
13
};
14

View Slide

provideHttpClient(
withFetch()
),
1
providers: [
2
// ...
3
4
5
6
7
8
9
10
11
),
12
],
13
};
14

View Slide

provideAuth({ /* ... */ }),
1
providers: [
2
// ...
3
4
provideHttpClient(
5
6
withFetch()
7
),
8
9
10
11
12
),
13
],
14
};
15

View Slide

View Slide

@Injectable()
export class MyInterceptor implements HttpInterceptor {
constructor(private authService: AuthService){}
intercept(request: HttpRequest>, next: HttpHandler): Observable {
const accessToken = this.authService.getToken();
const clonedRequest = req.clone({
headers: req.headers.set('Authorization', `Bearer ${accessToken}`),
});
return next.handle(clonedRequest);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

export function myInterceptor(req: HttpRequest, next: HttpHandlerFn) {
const loadingService = inject(AuthService);
const accessToken = this.authService.getToken();
const clonedRequest = req.clone({
headers: req.headers.set('Authorization', `Bearer ${accessToken}`),
});
return next(clonedRequest);
}
1
2
3
4
5
6
7
8
9
10

View Slide

providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
1
2
3

View Slide

providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
],
1
2
3
providers: [
provideHttpClient(withInterceptors([authInterceptor()])),
],
1
2
3

View Slide

@Injectable({ providedIn: 'root' })
export class AuthorizationGuard implements CanActivate {
constructor(
private oidcSecurityService: OidcSecurityService,
private router: Router
) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable {
return this.oidcSecurityService.isAuthenticated$.pipe(
map(({ isAuthenticated }) => {
// allow navigation if authenticated
if (isAuthenticated) {
return true;
}
// redirect if not authenticated
return this.router.parseUrl('');
})
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

View Slide

export const authenticatedGuard = () => {
const router = inject(Router);
const securityService = inject(OidcSecurityService);
return securityService.isAuthenticated$.pipe(
map(({ isAuthenticated }) => {
// allow navigation if authenticated
if (isAuthenticated) {
return true;
}
// redirect if not authenticated
return router.parseUrl('');
})
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

View Slide

export const DOGGOS_ROUTES: Routes = [
{
path: 'my',
component: MyDoggosComponent,
canActivate: [isAuthenticated],
},
{
path: 'my/add',
component: AddDoggoComponent,
},
];
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

{
path: 'my',
},
{
path: 'my/add',
},
];
1
2
3
4
5
6
7
8
9
10
11
12
1
{
2
path: 'my',
3
4
5
},
6
{
7
path: 'my/add',
8
9
10
},
11
];
12

View Slide

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
{{ fullName() }}
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
{{ fullName() }}
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
{{ fullName() }}
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
{{ fullName() }}
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }}
Click
`,
})
export class App {
constructor() {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
{{ fullName() }}
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21
@Component({
1
selector: 'my-app',
2
standalone: true,
3
template: `
4
{{ fullName() }}
5
Click
6
`,
7
})
8
export class App {
9
10
11
12
13
constructor() {
14
15
}
16
17
18
19
}
20
}
21

View Slide

import { toObservable } from '@angular/core/rxjs-interop';
@Component({...})
export class App {
count = signal(0);
count$ = toObservable(this.count);
ngOnInit() {
this.count$.subscribe(() => ...);
}
}
1
2
3
4
5
6
7
8
9
10
11

View Slide

import { toSignal } from '@angular/core/rxjs-interop';
@Component({
template: `
{{ row }}
`
})
export class App {
dataService = inject(DataService);
data = toSignal(this.dataService.data$, []);
}
1
2
3
4
5
6
7
8
9
10
11
12

View Slide

View Slide

Jest in Angular CLI
{
"projects": {
"my-app": {
"architect": {
"test": {
"builder": "@angular-devkit/build-angular:jest",
"options": {
"tsConfig": "tsconfig.spec.json",
"polyfills": ["zone.js", "zone.js/testing"]
}
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

View Slide

Autocomplete imports in
templates

View Slide

Required Inputs
@Component(...)
export class App {
@Input({ required: true }) title: string = '';
}
1
2
3
4

View Slide

Injectable Destroy
import { Injectable, DestroyRef } from '@angular/core';
@Injectable(...)
export class AppService {
destroyRef = inject(DestroyRef);
destroy() {
this.destroyRef.onDestroy(() => /* cleanup */ );
}
}
1
2
3
4
5
6
7
8
9
10

View Slide

Self Closing Tags
1

1

View Slide

New Template Syntax
trackByFunction(index, item) {
return item.id;
}

Item #{{ idx }}: {{ item.name }}

1
2
3
4
5
6
7

View Slide

New Template Syntax
trackByFunction(index, item) {
return item.id;
}


1
2
3
4
5
6
7
{#for item of items; track item.id; let idx = $index, e = $even}
{/for}
1
2
3

View Slide

New Template Syntax
{#for item of items; track item.id}
{{ item }}
{:empty}
There were no items in the list.
{/for}
1
2
3
4
5

View Slide

New Template Syntax

Main case was true!

Extra case was true!

False case!

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

View Slide

New Template Syntax
{#if cond.expr}
Main case was true!
{:else if other.expr}
Extra case was true!
{:else}
False case!
{/if}
1
2
3
4
5
6
7

View Slide

View Slide

@Component({
selector: 'app-my-doggos',
standalone: true,
templateUrl: './my-doggos.component.html',
styleUrls: ['./my-doggos.component.css'],
imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor],
})
export class MyDoggosComponent implements OnInit {
private readonly store = inject(Store);
doggos = this.store.select(getMyDoggos);
ngOnInit(): void {
this.store.dispatch(DoggosActions.loadMyDoggos());
}
deleteDoggo(doggo: Doggo) {
this.store.dispatch(DoggosActions.deleteDoggo({ doggo }));
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

View Slide

Component
Store
State
Reducer
Eﬀects
Actions

View Slide

View Slide

Share code between apps

View Slide

Provide feature to one app

View Slide

Provide feature to one app
Multiple Libs = 1 Feature

View Slide

Feature
Ui
Feature
Domain Utils
Util-
Environments
Util-Auth UI-Common Util-Common
About Doggos
App
Shared

View Slide

type:app, scope:doggo-rating-app

View Slide

type:feature
scope:about

View Slide

type:feature
type:ui
type:feature
type:domain type:utils
scope:about scope:doggos

View Slide

type:feature
type:ui
type:feature
type:domain type:utils
scope:about scope:doggos
scope:shared
type:util type:util type:ui type:util

View Slide

View Slide

{
"name": "about-feature",
"$schema": "../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
"sourceRoot": "libs/about/feature/src",
"prefix": "ps-doggo-rating",
"targets": {
// ...
},
"tags": ["type:feature", "scope:about"]
}
1
2
3
4
5
6
7
8
9
10
11

View Slide

{
"targets": {
// ...
},
}
1
2
3
4
5
6
7
8
9
10
11
{
1
2
3
4
5
6
"targets": {
7
// ...
8
},
9
10
}
11

View Slide

"@nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "scope:doggo-rating-app",
"onlyDependOnLibsWithTags": [
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
"sourceTag": "scope:about",
"onlyDependOnLibsWithTags": ["scope:about", "scope:shared"]
},
{
"sourceTag": "scope:doggos",
"onlyDependOnLibsWithTags": ["scope:doggos" "scope:shared"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

View Slide

"error",
{
"allow": [],
"depConstraints": [
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
},
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21

View Slide

"error",
{
"allow": [],
"depConstraints": [
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
},
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
"depConstraints": [
1
"error",
2
{
3
4
"allow": [],
5
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21

View Slide

"error",
{
"allow": [],
"depConstraints": [
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
},
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
"depConstraints": [
1
"error",
2
{
3
4
"allow": [],
5
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
7
8
9
10
11
12
13
14
{
15
16
17
},
18
{
19
20
"onlyDependOnLibsWithTags": ["scope:doggos", "scope:shared"]
21

View Slide

"error",
{
"allow": [],
"depConstraints": [
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
},
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
"depConstraints": [
1
"error",
2
{
3
4
"allow": [],
5
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
7
8
9
10
11
12
13
14
{
15
16
17
},
18
{
19
20
21
{
},
[],
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
15
16
17
18
{
19
20
21
},
22
{
23
"sourceTag": "scope:shared",
24
"onlyDependOnLibsWithTags": ["scope:shared"]
25
},
26
{
27

View Slide

"error",
{
"allow": [],
"depConstraints": [
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
{
},
{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
"depConstraints": [
1
"error",
2
{
3
4
"allow": [],
5
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
{
19
20
21
{
"scope:doggos",
"scope:about",
"scope:shared"
]
},
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
7
8
9
10
11
12
13
14
{
15
16
17
},
18
{
19
20
21
{
},
1
"error",
2
{
3
4
"allow": [],
5
"depConstraints": [
6
{
7
8
9
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
15
16
17
18
{
19
20
21
{
},
y p g [
"scope:doggos",
10
"scope:about",
11
"scope:shared"
12
]
13
},
14
{
15
16
17
},
18
19
20
21
22
{
23
"sourceTag": "scope:shared",
24
"onlyDependOnLibsWithTags": ["scope:shared"]
25
},
26
{
27
"sourceTag": "type:app",
28
29
"type:feature",
30
"type:util",
31

View Slide

View Slide

https://go.nx.dev/angular-enterprise-monorepo-patterns-new-book

View Slide

View Slide

@Component({
standalone: true,
})
ngOnInit(): void {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

View Slide

@Component({
standalone: true,
})
ngOnInit(): void {
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Component({
1
2
standalone: true,
3
4
5
6
})
7
8
9
10
11
12
ngOnInit(): void {
13
14
}
15
16
17
18
}
19
}
20

View Slide

doggos = this.store.selectSignal(getMyDoggos);
@Component({
1
2
standalone: true,
3
4
5
6
})
7
8
9
10
11
12
ngOnInit(): void {
13
14
}
15
16
17
18
}
19
}
20

View Slide

View Slide

Create modern Web Apps with the new Angular and it's ecosystem

Create modern Web Apps with the new Angular and it's ecosystem

Fabian Gosebrink

More Decks by Fabian Gosebrink

Other Decks in Technology

Featured

Transcript