Skip to content

Commit e680dc3

Browse files
damienboddamienbod
authored
Merge pull request #26 from damienbod/dev-update-angular-breaking-changes
Switch to Angular CLI, Angular 20.3.0
2 parents 821a59d + 05c1604 commit e680dc3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+7104
-35906
lines changed

‎.github/workflows/azure-webapps-dotnet-core.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ jobs:
4141
working-directory: ui
4242
run: npm install --force
4343

44-
- name: ui-nx-build
44+
- name: ui-angular-cli-build
4545
working-directory: ui
4646
run: npm run build
4747

‎.github/workflows/dotnet.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ jobs:
2626
working-directory: ui
2727
run: npm install --force
2828

29-
- name: ui-nx-build
29+
- name: ui-angular-cli-build
3030
working-directory: ui
3131
run: npm run build
3232

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
## ASP.NET Core, Angular BFF using Microsoft Entra ID Changelog
22

3+
### 2025-10-31 1.0.3
4+
- Switch to Angular CLI and vite
5+
- Angular 20.3.0
6+
-
37
### 2025-08-03 1.0.2
48
- Updated packages
59
- Angular 20.1.4

‎README.md‎

Lines changed: 85 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# BFF security architecture using ASP.NET Core and nx Angular standalone
1+
# BFF security architecture using ASP.NET Core and Angular CLI
22

33
[![.NET and npm build](https://github.com/damienbod/bff-aspnetcore-angular/actions/workflows/dotnet.yml/badge.svg)](https://github.com/damienbod/bff-aspnetcore-angular/actions/workflows/dotnet.yml) [![Build and deploy to Azure Web App](https://github.com/damienbod/bff-aspnetcore-angular/actions/workflows/azure-webapps-dotnet-core.yml/badge.svg?branch=deploy)](https://github.com/damienbod/bff-aspnetcore-angular/actions/workflows/azure-webapps-dotnet-core.yml) [![License](https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg)](https://github.com/damienbod/bff-aspnetcore-angular/blob/main/LICENSE)
44

@@ -7,25 +7,55 @@
77
The ASP.NET Core project is setup to run in development and production. In production, it uses the Angular production build deployed to the wwwroot. In development, it uses MS YARP reverse proxy to forward requests.
88

99
> [!IMPORTANT]
10-
> In production, the Angular nx project is built into the **wwwroot** of the .NET project.
10+
> In production, the Angular CLI project is built into the **wwwroot** of the .NET project.
1111
12-
![BFF production](https://github.com/damienbod/bff-aspnetcore-angular/blob/main/images/bff-arch-production_01.png)
12+
![BFF production](https://github.com/damienbod/bff-aspnetcore-angular/blob/main/images/bff-arch-production_01.drawio.png)
1313

14-
Configure the YARP reverse proxy to match the Angular nx URL. This is only required in development. I always use HTTPS in development and the port needs to match the Angular nx developement env.
14+
Configure the YARP reverse proxy to match the Angular CLI URL. This is only required in development. I always use HTTPS in development and the port needs to match the Angular CLI developement env.
1515

1616
> [!IMPORTANT]
1717
> In a real Angular project, the additional dev routes need to be added so that the __dev refresh__ works!
1818
1919
```json
2020
"UiDevServerUrl": "https://localhost:4201",
21-
"ReverseProxy": {
21+
"ReverseProxy": {
2222
"Routes": {
2323
"assets": {
2424
"ClusterId": "cluster1",
2525
"Match": {
2626
"Path": "assets/{**catch-all}"
2727
}
2828
},
29+
"angularfsdev": {
30+
"ClusterId": "cluster1",
31+
"Match": {
32+
"Path": "@fs/{**catch-all}"
33+
}
34+
},
35+
"angularngdev": {
36+
"ClusterId": "cluster1",
37+
"Match": {
38+
"Path": "@ng/{**catch-all}"
39+
}
40+
},
41+
"vitedev": {
42+
"ClusterId": "cluster1",
43+
"Match": {
44+
"Path": "@vite/{**catch-all}"
45+
}
46+
},
47+
"wssvite": {
48+
"ClusterId": "cluster1",
49+
"Match": {
50+
"Path": "/",
51+
"QueryParameters": [
52+
{
53+
"Name": "token",
54+
"Mode": "Exists"
55+
}
56+
]
57+
}
58+
},
2959
"routealljs": {
3060
"ClusterId": "cluster1",
3161
"Match": {
@@ -44,12 +74,6 @@ Configure the YARP reverse proxy to match the Angular nx URL. This is only requi
4474
"Path": "/src_{nomatterwhat}_ts.js"
4575
}
4676
},
47-
"signalr": {
48-
"ClusterId": "cluster1",
49-
"Match": {
50-
"Path": "/ng-cli-ws"
51-
}
52-
},
5377
"webpacknodesrcmap": {
5478
"ClusterId": "cluster1",
5579
"Match": {
@@ -74,69 +98,77 @@ Configure the YARP reverse proxy to match the Angular nx URL. This is only requi
7498
}
7599
```
76100

77-
## Setup Angular nx
101+
## Setup Angular CLI
78102

79-
Add the certificates to the nx project for example in the **/certs** folder
103+
Add the certificates to the CLI project for example in the **/certs** folder
80104

81-
Update the nx project.json file:
105+
Update the Angular CLI angular.json file:
82106

83107
```json
84108
"serve": {
85-
"executor": "@angular-devkit/build-angular:dev-server",
86-
"options": {
87-
"browserTarget": "ui:build",
88-
"sslKey": "certs/dev_localhost.key",
89-
"sslCert": "certs/dev_localhost.pem",
90-
"port": 4201
91-
},
109+
"builder": "@angular/build:dev-server",
110+
"options": {
111+
"sslKey": "certs/dev_localhost.key",
112+
"sslCert": "certs/dev_localhost.pem",
113+
"port": 4201,
114+
},
92115
```
93116

94117
> [!NOTE]
95118
> The default Angular setup uses port 4200, this needs to match the YARP reverse proxy settings for development.
96119

97-
Update the outputPath for the (nx build) to deploy the production paths to the wwwroot of the .NET project
120+
Update the outputPath for the (angular cli build) to deploy the production paths to the wwwroot of the .NET project
98121

99122
```
100-
"build": {
101-
"executor": "@angular-devkit/build-angular:browser",
102-
"outputs": ["{options.outputPath}"],
103-
"options": {
104-
"outputPath": "../server/wwwroot",
105-
"index": "./src/index.html",
106-
"main": "./src/main.ts",
107-
"polyfills": ["zone.js"],
108-
"tsConfig": "./tsconfig.app.json",
109-
"assets": ["./src/favicon.ico", "./src/assets"],
110-
"styles": ["./src/styles.scss"],
111-
"scripts": []
112-
},
123+
"architect": {
124+
"build": {
125+
"builder": "@angular/build:application",
126+
"options": {
127+
"outputPath": {
128+
"base": "../server/wwwroot",
129+
"browser": ""
130+
},
131+
"browser": "src/main.ts",
132+
"polyfills": [
133+
"zone.js"
134+
],
135+
"tsConfig": "tsconfig.app.json",
136+
"assets": [
137+
{
138+
"glob": "**/*",
139+
"input": "public"
140+
}
141+
],
142+
"styles": [
143+
"src/styles.css"
144+
]
145+
},
113146
```
114147

115148
> [!NOTE]
116-
> When creating a new Angular nx project, it adds git files as well, delete these as this is not required.
149+
> When creating a new Angular CLI project, it adds git files as well, delete these as this is not required.
117150

118151
## Prerequisites
119152

120153
Node >= v24.10.0
121154

122155
```cmd
123-
npm add --global nx
124156
npm install @angular/cli -g latest
125157
npm install --force
126158
npm run build
127159
```
128160

129161
## Setup development
130162

131-
The development environment is setup to use the default tools for each of the tech stacks. Angular nx is used like recommended. I use Visual Studio code. A YARP reverse proxy is used to integrate the Angular development into the backend application.
163+
The development environment is setup to use the default tools for each of the tech stacks. Angular CLI is used like recommended. I use Visual Studio code. A YARP reverse proxy is used to integrate the Angular development into the backend application.
132164

133-
![BFF development](https://github.com/damienbod/bff-aspnetcore-angular/blob/main/images/bff-arch-development_01.png)
165+
![BFF development](https://github.com/damienbod/bff-aspnetcore-angular/blob/main/images/bff-arch-development_01.drawio.png)
134166

135167
> [!NOTE]
136168
> Always run in HTTPS, both in development and production
137169

138170
```
139-
nx serve --ssl
171+
ng serve --ssl
140172
```
141173

142174
## Azure App Registration setup
@@ -205,7 +237,7 @@ The client secret or client certificate needs to be setup, see Microsoft Entra I
205237
Start the Angular project from the **ui** folder
206238

207239
```
208-
nx serve --ssl
240+
ng serve --ssl
209241
```
210242

211243
Start the ASP.NET Core project from the **server** folder
@@ -218,7 +250,7 @@ Or just open Visual Studio and run the solution.
218250

219251
## github actions build
220252

221-
Github actions is used for the DevOps. The build pipeline builds both the .NET project and the Angular nx project using npm. The two projects are built in the same step because the UI project is built into the wwwroot of the server project.
253+
Github actions is used for the DevOps. The build pipeline builds both the .NET project and the Angular CLI project using npm. The two projects are built in the same step because the UI project is built into the wwwroot of the server project.
222254

223255
```yaml
224256

@@ -236,27 +268,28 @@ jobs:
236268

237269
steps:
238270

239-
- uses: actions/checkout@v3
271+
- uses: actions/checkout@v4
240272
- name: Setup .NET
241-
uses: actions/setup-dotnet@v3
273+
uses: actions/setup-dotnet@v4
242274
with:
243-
dotnet-version: 8.0.x
275+
dotnet-version: 9.0.x
244276

245277
- name: Restore dependencies
246278
run: dotnet restore
247279

248280
- name: npm setup
249281
working-directory: ui
250-
run: npm install
282+
run: npm install --force
251283

252-
- name: ui-nx-build
284+
- name: ui-angular-cli-build
253285
working-directory: ui
254286
run: npm run build
255287

256288
- name: Build
257289
run: dotnet build --no-restore
258290
- name: Test
259291
run: dotnet test --no-build --verbosity normal
292+
260293
```
261294

262295
## github actions Azure deployment
@@ -271,15 +304,15 @@ deployment test server: https://bff-angular-aspnetcore.azurewebsites.net
271304
- Yarp.ReverseProxy
272305
- Microsoft.Identity.Web
273306
- ASP.NET Core
274-
- Angular
275-
- Nx
307+
- Angular, Angular CLI
276308

277-
## Angular nx Updates
309+
## Angular CLI Updates
278310

279311
```
280-
nx migrate latest
312+
npm install -g @angular/cli latest
313+
ng update
281314

282-
nx migrate --run-migrations=migrations.json
315+
ng update @angular/cli @angular/core
283316
```
284317

285318
## Links

‎images/bff-arch-cache_02.drawio.png‎

43.4 KB
Loading

‎images/bff-arch-cache_02.png‎

-48 KB
Binary file not shown.

‎images/bff-arch-development_01.drawio.png‎

38.2 KB
Loading

‎images/bff-arch-development_01.png‎

-37.4 KB
Binary file not shown.

‎images/bff-arch-production_01.drawio.png‎

31.7 KB
Loading

‎images/bff-arch-production_01.png‎

-34.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)