Skip to content

Commit ed57f82

Browse files
pascaliskepascaliske
committed
feat: upgrade to angular v17
1 parent 8a45d22 commit ed57f82

17 files changed

+2058
-2004
lines changed

‎Dockerfile‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ COPY . /build
2323

2424
# build & prerender
2525
RUN yarn run lint && \
26-
yarn run build && \
27-
yarn run build:ssr && \
2826
yarn run prerender
2927

3028
# final image

‎angular.json‎

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
"includePaths": ["src/scss"]
6767
}
6868
},
69+
"defaultConfiguration": "production",
6970
"configurations": {
7071
"production": {
7172
"outputHashing": "all",
@@ -96,10 +97,21 @@
9697
"sourceMap": true,
9798
"namedChunks": true
9899
}
99-
},
100-
"defaultConfiguration": "production"
100+
}
101101
},
102-
"build-ssr": {
102+
"serve": {
103+
"builder": "@angular-devkit/build-angular:dev-server",
104+
"defaultConfiguration": "development",
105+
"configurations": {
106+
"production": {
107+
"buildTarget": "docker-traefik-errors:build:production"
108+
},
109+
"development": {
110+
"buildTarget": "docker-traefik-errors:build:development"
111+
}
112+
}
113+
},
114+
"server": {
103115
"builder": "@angular-devkit/build-angular:server",
104116
"options": {
105117
"outputPath": "dist/docker-traefik-errors/server",
@@ -109,6 +121,7 @@
109121
"includePaths": ["src/scss"]
110122
}
111123
},
124+
"defaultConfiguration": "production",
112125
"configurations": {
113126
"production": {
114127
"outputHashing": "media",
@@ -126,51 +139,25 @@
126139
"extractLicenses": false,
127140
"vendorChunk": true
128141
}
129-
},
130-
"defaultConfiguration": "production"
131-
},
132-
"serve": {
133-
"builder": "@angular-devkit/build-angular:dev-server",
134-
"configurations": {
135-
"production": {
136-
"browserTarget": "docker-traefik-errors:build:production"
137-
},
138-
"development": {
139-
"browserTarget": "docker-traefik-errors:build:development"
140-
}
141-
},
142-
"defaultConfiguration": "development"
143-
},
144-
"serve-ssr": {
145-
"builder": "@nguniversal/builders:ssr-dev-server",
146-
"configurations": {
147-
"development": {
148-
"browserTarget": "docker-traefik-errors:build:development",
149-
"serverTarget": "docker-traefik-errors:build-ssr:development"
150-
},
151-
"production": {
152-
"browserTarget": "docker-traefik-errors:build:production",
153-
"serverTarget": "docker-traefik-errors:build-ssr:production"
154-
}
155-
},
156-
"defaultConfiguration": "development"
142+
}
157143
},
158144
"prerender": {
159-
"builder": "@nguniversal/builders:prerender",
145+
"builder": "@angular-devkit/build-angular:prerender",
160146
"options": {
161-
"routes": ["/"]
147+
"routes": ["/"],
148+
"discoverRoutes": false
162149
},
150+
"defaultConfiguration": "production",
163151
"configurations": {
164152
"production": {
165153
"browserTarget": "docker-traefik-errors:build:production",
166-
"serverTarget": "docker-traefik-errors:build-ssr:production"
154+
"serverTarget": "docker-traefik-errors:server:production"
167155
},
168156
"development": {
169157
"browserTarget": "docker-traefik-errors:build:development",
170-
"serverTarget": "docker-traefik-errors:build-ssr:development"
158+
"serverTarget": "docker-traefik-errors:server:development"
171159
}
172-
},
173-
"defaultConfiguration": "production"
160+
}
174161
},
175162
"lint": {
176163
"builder": "@angular-eslint/builder:lint",

‎package.json‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@
1919
"scripts": {
2020
"prepare": "husky",
2121
"start": "ng serve --ssl",
22-
"start:ssr": "ng run docker-traefik-errors:serve-ssr",
23-
"build": "ng build",
24-
"build:ssr": "ng run docker-traefik-errors:build-ssr",
25-
"prerender": "ng run docker-traefik-errors:prerender --no-guess-routes",
22+
"build:app": "ng build",
23+
"build:server": "ng run docker-traefik-errors:server",
24+
"prerender": "ng run docker-traefik-errors:prerender",
2625
"lint": "ng lint",
2726
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,scss,html,md,mdx,json}\"",
2827
"version": "bump --yes package.json",
@@ -33,16 +32,16 @@
3332
"ts-node": "^10.9.1"
3433
},
3534
"dependencies": {
36-
"@angular/animations": "^16.1.1",
37-
"@angular/common": "^16.1.1",
38-
"@angular/compiler": "^16.1.1",
39-
"@angular/core": "^16.1.1",
40-
"@angular/forms": "^16.1.1",
41-
"@angular/platform-browser": "^16.1.1",
42-
"@angular/platform-browser-dynamic": "^16.1.1",
43-
"@angular/platform-server": "^16.1.1",
44-
"@angular/router": "^16.1.1",
45-
"@nguniversal/express-engine": "16.1.2",
35+
"@angular/animations": "^17.1.1",
36+
"@angular/common": "^17.1.1",
37+
"@angular/compiler": "^17.1.1",
38+
"@angular/core": "^17.1.1",
39+
"@angular/forms": "^17.1.1",
40+
"@angular/platform-browser": "^17.1.1",
41+
"@angular/platform-browser-dynamic": "^17.1.1",
42+
"@angular/platform-server": "^17.1.1",
43+
"@angular/router": "^17.1.1",
44+
"@angular/ssr": "^17.1.1",
4645
"express": "^4.18.2",
4746
"http-status-codes": "^2.2.0",
4847
"ngx-progressbar": "^11.0.0",
@@ -51,29 +50,29 @@
5150
"zone.js": "~0.14.0"
5251
},
5352
"devDependencies": {
54-
"@angular-devkit/build-angular": "^16.1.0",
53+
"@angular-devkit/build-angular": "^17.1.1",
5554
"@angular-eslint/builder": "^16.0.3",
5655
"@angular-eslint/eslint-plugin": "^16.0.3",
5756
"@angular-eslint/eslint-plugin-template": "^16.0.3",
5857
"@angular-eslint/schematics": "^16.0.3",
5958
"@angular-eslint/template-parser": "^16.0.3",
60-
"@angular/cli": "^16.1.0",
61-
"@angular/compiler-cli": "^16.1.1",
59+
"@angular/cli": "^17.1.1",
60+
"@angular/compiler-cli": "^17.1.1",
6261
"@commitlint/cli": "^18.0.0",
6362
"@commitlint/config-conventional": "^18.0.0",
64-
"@nguniversal/builders": "^16.1.0",
6563
"@pascaliske/eslint-config": "^3.0.0",
6664
"@pascaliske/prettier-config": "^1.2.0",
6765
"@rstacruz/bump-cli": "^2.0.1",
6866
"@types/express": "^4.17.16",
6967
"@types/node": "^20.0.0",
7068
"@typescript-eslint/eslint-plugin": "^6.0.0",
7169
"@typescript-eslint/parser": "^6.0.0",
70+
"browser-sync": "^3.0.0",
7271
"eslint": "^8.28.0",
7372
"husky": "^9.0.0",
7473
"prettier": "^3.0.0",
7574
"standard-changelog": "^5.0.0",
7675
"ts-node": "^10.9.1",
77-
"typescript": "~5.1.3"
76+
"typescript": "~5.3.3"
7877
}
7978
}

‎server.ts‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
11
import 'zone.js/node'
22
import { APP_BASE_HREF } from '@angular/common'
3-
import { ngExpressEngine } from '@nguniversal/express-engine'
3+
import { CommonEngine } from '@angular/ssr'
44
import * as express from 'express'
5-
import { existsSync } from 'fs'
6-
import { join } from 'path'
7-
import { AppServerModule } from './src/main.server'
5+
import { existsSync } from 'node:fs'
6+
import { join } from 'node:path'
7+
import bootstrap from './src/main.server'
88

9-
export * from './src/main.server'
9+
export default bootstrap
1010

1111
export function app(): express.Express {
12+
const commonEngine: CommonEngine = new CommonEngine()
1213
const server: express.Express = express()
13-
const distFolder: string = join(process.cwd(), 'dist/pascaliske-dev/browser')
14+
const distFolder: string = join(process.cwd(), 'dist/docker-traefik-errors/browser')
1415
const indexHtml: string = existsSync(join(distFolder, 'index.original.html'))
15-
? 'index.original.html'
16-
: 'index'
16+
? join(distFolder, 'index.original.html')
17+
: join(distFolder, 'index.html')
1718

1819
// prepare view engine
19-
server.engine('html', ngExpressEngine({ bootstrap: AppServerModule }))
2020
server.set('view engine', 'html')
2121
server.set('views', distFolder)
2222

2323
// serve static files
2424
server.get('*.*', express.static(distFolder, { maxAge: '1y' }))
2525

2626
// serve app routes
27-
server.get('*', (req: express.Request, res: express.Response) => {
28-
res.render(indexHtml, {
29-
req,
30-
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
31-
})
27+
server.get('*', (req: express.Request, res: express.Response, next: express.NextFunction) => {
28+
const { protocol, originalUrl, baseUrl, headers } = req
29+
30+
commonEngine
31+
.render({
32+
bootstrap,
33+
documentFilePath: indexHtml,
34+
url: `${protocol}://${headers.host}${originalUrl}`,
35+
publicPath: distFolder,
36+
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
37+
})
38+
.then((html: string) => res.send(html))
39+
.catch(err => next(err))
3240
})
3341

3442
return server

‎src/app/app.component.scss‎

Whitespace-only changes.

‎src/app/app.component.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
import { Component } from '@angular/core'
1+
import { Component, OnInit } from '@angular/core'
2+
import { Router, RouterOutlet } from '@angular/router'
3+
import { NgProgressModule } from 'ngx-progressbar'
24

35
@Component({
6+
standalone: true,
47
selector: 'cmp-root',
58
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.scss'],
9+
imports: [RouterOutlet, NgProgressModule],
710
})
8-
export class AppComponent {}
11+
export class AppComponent implements OnInit {
12+
public constructor(private readonly router: Router) {}
13+
14+
public ngOnInit(): void {
15+
// delayed initial navigation
16+
setTimeout(() => this.router.initialNavigation())
17+
}
18+
}

‎src/app/app.config.server.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'
2+
import { provideServerRendering } from '@angular/platform-server'
3+
import { appConfig } from './app.config'
4+
5+
export const serverConfig: ApplicationConfig = mergeApplicationConfig(appConfig, {
6+
providers: [provideServerRendering()],
7+
})

‎src/app/app.config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { importProvidersFrom, ApplicationConfig, ValueProvider, APP_ID } from '@angular/core'
2+
import { provideClientHydration } from '@angular/platform-browser'
3+
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'
4+
import { provideRouter } from '@angular/router'
5+
import { NgProgressModule } from 'ngx-progressbar'
6+
import { NgProgressHttpModule } from 'ngx-progressbar/http'
7+
import { NgProgressRouterModule } from 'ngx-progressbar/router'
8+
import { features, routes } from './app.routing'
9+
10+
export const provideAppId: () => ValueProvider = (): ValueProvider => ({
11+
provide: APP_ID,
12+
useValue: 'traefik-errors',
13+
})
14+
15+
export const appConfig: ApplicationConfig = {
16+
providers: [
17+
importProvidersFrom(
18+
NgProgressModule.withConfig({ color: '#ff6666', fixed: true }),
19+
NgProgressHttpModule,
20+
NgProgressRouterModule,
21+
),
22+
provideClientHydration(),
23+
provideAnimationsAsync(),
24+
provideRouter(routes, ...features),
25+
provideAppId(),
26+
],
27+
}

‎src/app/app.module.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/app/app.routing.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { RouterFeatures, Routes } from '@angular/router'
2+
import { withDisabledInitialNavigation, withInMemoryScrolling } from '@angular/router'
3+
import { ValidCodeGuard } from 'pages/error/valid-code.guard'
4+
5+
export const features: RouterFeatures[] = [
6+
withDisabledInitialNavigation(),
7+
withInMemoryScrolling({
8+
anchorScrolling: 'enabled',
9+
scrollPositionRestoration: 'enabled',
10+
}),
11+
]
12+
13+
export const routes: Routes = [
14+
{
15+
path: '**',
16+
canActivate: [ValidCodeGuard()],
17+
loadComponent: () => import('pages/error/error.component').then(m => m.ErrorComponent),
18+
},
19+
]

0 commit comments

Comments
 (0)