Skip to content

Commit

Permalink
feat: upgrade to angular v17
Browse files Browse the repository at this point in the history
  • Loading branch information
pascaliske committed Jan 29, 2024
1 parent 8a45d22 commit ed57f82
Show file tree
Hide file tree
Showing 17 changed files with 2,058 additions and 2,004 deletions.
2 changes: 0 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ COPY . /build

# build & prerender
RUN yarn run lint && \
yarn run build && \
yarn run build:ssr && \
yarn run prerender

# final image
Expand Down
61 changes: 24 additions & 37 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
"includePaths": ["src/scss"]
}
},
"defaultConfiguration": "production",
"configurations": {
"production": {
"outputHashing": "all",
Expand Down Expand Up @@ -96,10 +97,21 @@
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
}
},
"build-ssr": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"defaultConfiguration": "development",
"configurations": {
"production": {
"buildTarget": "docker-traefik-errors:build:production"
},
"development": {
"buildTarget": "docker-traefik-errors:build:development"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/docker-traefik-errors/server",
Expand All @@ -109,6 +121,7 @@
"includePaths": ["src/scss"]
}
},
"defaultConfiguration": "production",
"configurations": {
"production": {
"outputHashing": "media",
Expand All @@ -126,51 +139,25 @@
"extractLicenses": false,
"vendorChunk": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "docker-traefik-errors:build:production"
},
"development": {
"browserTarget": "docker-traefik-errors:build:development"
}
},
"defaultConfiguration": "development"
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "docker-traefik-errors:build:development",
"serverTarget": "docker-traefik-errors:build-ssr:development"
},
"production": {
"browserTarget": "docker-traefik-errors:build:production",
"serverTarget": "docker-traefik-errors:build-ssr:production"
}
},
"defaultConfiguration": "development"
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"builder": "@angular-devkit/build-angular:prerender",
"options": {
"routes": ["/"]
"routes": ["/"],
"discoverRoutes": false
},
"defaultConfiguration": "production",
"configurations": {
"production": {
"browserTarget": "docker-traefik-errors:build:production",
"serverTarget": "docker-traefik-errors:build-ssr:production"
"serverTarget": "docker-traefik-errors:server:production"
},
"development": {
"browserTarget": "docker-traefik-errors:build:development",
"serverTarget": "docker-traefik-errors:build-ssr:development"
"serverTarget": "docker-traefik-errors:server:development"
}
},
"defaultConfiguration": "production"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
Expand Down
37 changes: 18 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,9 @@
"scripts": {
"prepare": "husky",
"start": "ng serve --ssl",
"start:ssr": "ng run docker-traefik-errors:serve-ssr",
"build": "ng build",
"build:ssr": "ng run docker-traefik-errors:build-ssr",
"prerender": "ng run docker-traefik-errors:prerender --no-guess-routes",
"build:app": "ng build",
"build:server": "ng run docker-traefik-errors:server",
"prerender": "ng run docker-traefik-errors:prerender",
"lint": "ng lint",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,scss,html,md,mdx,json}\"",
"version": "bump --yes package.json",
Expand All @@ -33,16 +32,16 @@
"ts-node": "^10.9.1"
},
"dependencies": {
"@angular/animations": "^16.1.1",
"@angular/common": "^16.1.1",
"@angular/compiler": "^16.1.1",
"@angular/core": "^16.1.1",
"@angular/forms": "^16.1.1",
"@angular/platform-browser": "^16.1.1",
"@angular/platform-browser-dynamic": "^16.1.1",
"@angular/platform-server": "^16.1.1",
"@angular/router": "^16.1.1",
"@nguniversal/express-engine": "16.1.2",
"@angular/animations": "^17.1.1",
"@angular/common": "^17.1.1",
"@angular/compiler": "^17.1.1",
"@angular/core": "^17.1.1",
"@angular/forms": "^17.1.1",
"@angular/platform-browser": "^17.1.1",
"@angular/platform-browser-dynamic": "^17.1.1",
"@angular/platform-server": "^17.1.1",
"@angular/router": "^17.1.1",
"@angular/ssr": "^17.1.1",
"express": "^4.18.2",
"http-status-codes": "^2.2.0",
"ngx-progressbar": "^11.0.0",
Expand All @@ -51,29 +50,29 @@
"zone.js": "~0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.0",
"@angular-devkit/build-angular": "^17.1.1",
"@angular-eslint/builder": "^16.0.3",
"@angular-eslint/eslint-plugin": "^16.0.3",
"@angular-eslint/eslint-plugin-template": "^16.0.3",
"@angular-eslint/schematics": "^16.0.3",
"@angular-eslint/template-parser": "^16.0.3",
"@angular/cli": "^16.1.0",
"@angular/compiler-cli": "^16.1.1",
"@angular/cli": "^17.1.1",
"@angular/compiler-cli": "^17.1.1",
"@commitlint/cli": "^18.0.0",
"@commitlint/config-conventional": "^18.0.0",
"@nguniversal/builders": "^16.1.0",
"@pascaliske/eslint-config": "^3.0.0",
"@pascaliske/prettier-config": "^1.2.0",
"@rstacruz/bump-cli": "^2.0.1",
"@types/express": "^4.17.16",
"@types/node": "^20.0.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"browser-sync": "^3.0.0",
"eslint": "^8.28.0",
"husky": "^9.0.0",
"prettier": "^3.0.0",
"standard-changelog": "^5.0.0",
"ts-node": "^10.9.1",
"typescript": "~5.1.3"
"typescript": "~5.3.3"
}
}
36 changes: 22 additions & 14 deletions server.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,42 @@
import 'zone.js/node'
import { APP_BASE_HREF } from '@angular/common'
import { ngExpressEngine } from '@nguniversal/express-engine'
import { CommonEngine } from '@angular/ssr'
import * as express from 'express'
import { existsSync } from 'fs'
import { join } from 'path'
import { AppServerModule } from './src/main.server'
import { existsSync } from 'node:fs'
import { join } from 'node:path'
import bootstrap from './src/main.server'

export * from './src/main.server'
export default bootstrap

export function app(): express.Express {
const commonEngine: CommonEngine = new CommonEngine()
const server: express.Express = express()
const distFolder: string = join(process.cwd(), 'dist/pascaliske-dev/browser')
const distFolder: string = join(process.cwd(), 'dist/docker-traefik-errors/browser')
const indexHtml: string = existsSync(join(distFolder, 'index.original.html'))
? 'index.original.html'
: 'index'
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html')

// prepare view engine
server.engine('html', ngExpressEngine({ bootstrap: AppServerModule }))
server.set('view engine', 'html')
server.set('views', distFolder)

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

// serve app routes
server.get('*', (req: express.Request, res: express.Response) => {
res.render(indexHtml, {
req,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
})
server.get('*', (req: express.Request, res: express.Response, next: express.NextFunction) => {
const { protocol, originalUrl, baseUrl, headers } = req

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html: string) => res.send(html))
.catch(err => next(err))
})

return server
Expand Down
Empty file removed src/app/app.component.scss
Empty file.
16 changes: 13 additions & 3 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { Component } from '@angular/core'
import { Component, OnInit } from '@angular/core'
import { Router, RouterOutlet } from '@angular/router'
import { NgProgressModule } from 'ngx-progressbar'

@Component({
standalone: true,
selector: 'cmp-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [RouterOutlet, NgProgressModule],
})
export class AppComponent {}
export class AppComponent implements OnInit {
public constructor(private readonly router: Router) {}

public ngOnInit(): void {
// delayed initial navigation
setTimeout(() => this.router.initialNavigation())
}
}
7 changes: 7 additions & 0 deletions src/app/app.config.server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'
import { provideServerRendering } from '@angular/platform-server'
import { appConfig } from './app.config'

export const serverConfig: ApplicationConfig = mergeApplicationConfig(appConfig, {
providers: [provideServerRendering()],
})
27 changes: 27 additions & 0 deletions src/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { importProvidersFrom, ApplicationConfig, ValueProvider, APP_ID } from '@angular/core'
import { provideClientHydration } from '@angular/platform-browser'
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'
import { provideRouter } from '@angular/router'
import { NgProgressModule } from 'ngx-progressbar'
import { NgProgressHttpModule } from 'ngx-progressbar/http'
import { NgProgressRouterModule } from 'ngx-progressbar/router'
import { features, routes } from './app.routing'

export const provideAppId: () => ValueProvider = (): ValueProvider => ({
provide: APP_ID,
useValue: 'traefik-errors',
})

export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
NgProgressModule.withConfig({ color: '#ff6666', fixed: true }),
NgProgressHttpModule,
NgProgressRouterModule,
),
provideClientHydration(),
provideAnimationsAsync(),
provideRouter(routes, ...features),
provideAppId(),
],
}
27 changes: 0 additions & 27 deletions src/app/app.module.ts

This file was deleted.

19 changes: 19 additions & 0 deletions src/app/app.routing.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { RouterFeatures, Routes } from '@angular/router'
import { withDisabledInitialNavigation, withInMemoryScrolling } from '@angular/router'
import { ValidCodeGuard } from 'pages/error/valid-code.guard'

export const features: RouterFeatures[] = [
withDisabledInitialNavigation(),
withInMemoryScrolling({
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
}),
]

export const routes: Routes = [
{
path: '**',
canActivate: [ValidCodeGuard()],
loadComponent: () => import('pages/error/error.component').then(m => m.ErrorComponent),
},
]
10 changes: 0 additions & 10 deletions src/app/app.server.module.ts

This file was deleted.

20 changes: 18 additions & 2 deletions src/app/pages/error/error.component.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
import { Component, Inject } from '@angular/core'
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
import { DOCUMENT } from '@angular/common'
import { ActivatedRoute, Params } from '@angular/router'
import { NgIf, AsyncPipe, DOCUMENT } from '@angular/common'
import { RouterModule, ActivatedRoute, Params } from '@angular/router'
import { Observable, combineLatest, of } from 'rxjs'
import { map, filter, take, delay } from 'rxjs/operators'
import { StatusCodes } from 'http-status-codes'
import { HeaderComponent } from 'components/header/header.component'
import { LinkComponent } from 'components/link/link.component'
import { CodeComponent } from 'components/code/code.component'
import { MessageComponent } from 'components/message/message.component'
import { IllustrationComponent } from 'components/illustration/illustration.component'
import { animations } from './error.animations'

@Component({
standalone: true,
selector: 'cmp-error',
templateUrl: './error.component.html',
styleUrls: ['./error.component.scss'],
imports: [
NgIf,
AsyncPipe,
RouterModule,
HeaderComponent,
LinkComponent,
CodeComponent,
MessageComponent,
IllustrationComponent,
],
animations,
})
export class ErrorComponent {
Expand Down
Loading

0 comments on commit ed57f82

Please sign in to comment.