feat: update angulare/core,cli

WeihanLi · WeihanLi · commit 07999aec6972 · 2024-06-20T22:14:26.000+08:00
diff --git a/angular.json b/angular.json
@@ -15,13 +15,16 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ReservationClient/browser",
-            "localize": ["zh"],
+            "outputPath": {
+              "base": "dist/ReservationClient"
+            },
+            "localize": [
+              "zh"
+            ],
             "i18nMissingTranslation": "error",
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -34,7 +37,13 @@
             "styles": [
               "src/styles.less"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts",
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
           },
           "configurations": {
             "production": {
@@ -50,8 +59,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "localize": true,
               "budgets": [
                 {
@@ -60,8 +67,7 @@
                   "maximumError": "5mb"
                 }
               ],
-              "serviceWorker": true,
-              "ngswConfigPath": "ngsw-config.json"
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {
               "optimization": false,
@@ -143,64 +149,6 @@
               "devServerTarget": "ReservationClient:serve:production"
             }
           }
-        },
-        "server": {
-          "builder": "@angular-devkit/build-angular:server",
-          "options": {
-            "outputPath": "dist/ReservationClient/server",
-            "main": "server.ts",
-            "tsConfig": "tsconfig.server.json"
-          },
-          "configurations": {
-            "production": {
-              "buildOptimizer": true,
-              "outputHashing": "media",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "sourceMap": false,
-              "extractLicenses": true,
-              "vendorChunk": false
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve-ssr": {
-          "builder": "@angular-devkit/build-angular:ssr-dev-server",
-          "configurations": {
-            "development": {
-              "browserTarget": "ReservationClient:build:development",
-              "serverTarget": "ReservationClient:server:development"
-            },
-            "production": {
-              "browserTarget": "ReservationClient:build:production",
-              "serverTarget": "ReservationClient:server:production"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "prerender": {
-          "builder": "@angular-devkit/build-angular:prerender",
-          "options": {
-            "routes": [
-              "/"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "ReservationClient:build:production",
-              "serverTarget": "ReservationClient:server:production"
-            },
-            "development": {
-              "browserTarget": "ReservationClient:build:development",
-              "serverTarget": "ReservationClient:server:development"
-            }
-          },
-          "defaultConfiguration": "production"
         }
       },
       "i18n": {
diff --git a/package.json b/package.json
@@ -8,27 +8,24 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "dev:ssr": "ng run ReservationClient:serve-ssr",
-    "serve:ssr": "node dist/ReservationClient/server/main.js",
-    "build:ssr": "ng build && ng run ReservationClient:server",
-    "prerender": "ng run ReservationClient:prerender"
+    "serve:ssr:ReservationClient": "node dist/ReservationClient/server/server.mjs"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.2",
+    "@angular/animations": "^18.0.3",
     "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.2",
-    "@angular/compiler": "^17.0.2",
-    "@angular/core": "^17.0.2",
-    "@angular/forms": "^17.0.2",
-    "@angular/localize": "^17.0.2",
+    "@angular/common": "^18.0.3",
+    "@angular/compiler": "^18.0.3",
+    "@angular/core": "^18.0.3",
+    "@angular/forms": "^18.0.3",
+    "@angular/localize": "^18.0.3",
     "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.2",
-    "@angular/platform-browser-dynamic": "^17.0.2",
-    "@angular/platform-server": "^17.0.2",
-    "@angular/router": "^17.0.2",
-    "@angular/service-worker": "^17.0.2",
-    "@angular/ssr": "^17.0.0",
+    "@angular/platform-browser": "^18.0.3",
+    "@angular/platform-browser-dynamic": "^18.0.3",
+    "@angular/platform-server": "^18.0.3",
+    "@angular/router": "^18.0.3",
+    "@angular/service-worker": "^18.0.3",
+    "@angular/ssr": "^18.0.5",
     "@sentry/browser": "^5.5.0",
     "angular-oauth2-oidc": "^15.0.1",
     "express": "^4.18.2",
@@ -37,10 +34,10 @@
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.2",
-    "@angular/language-service": "^17.0.2",
+    "@angular-devkit/build-angular": "^18.0.5",
+    "@angular/cli": "^18.0.5",
+    "@angular/compiler-cli": "^18.0.3",
+    "@angular/language-service": "^18.0.3",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
@@ -53,6 +50,6 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "protractor": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.5"
   }
-}
+}
diff --git a/server.ts b/server.ts
@@ -1,42 +1,40 @@
-import 'zone.js/node';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr';
-import * as express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
+import express from 'express';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
 import AppServerModule from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/ReservationClient/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', distFolder);
+  server.set('views', browserDistFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
+  server.get('**', express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html',
   }));
 
   // All regular routes use the Angular engine
-  server.get('*', (req, res, next) => {
+  server.get('**', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
     commonEngine
       .render({
         bootstrap: AppServerModule,
         documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: distFolder,
+        publicPath: browserDistFolder,
         providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
       })
       .then((html) => res.send(html))
@@ -56,14 +54,4 @@ function run(): void {
   });
 }
 
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = mainModule && mainModule.filename || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export default AppServerModule;
+run();
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { NgModule, ErrorHandler } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AppMaterialModule } from './app.material.module';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ReservationListComponent } from './reservation/reservation-list/reservation-list.component';
 import { NoticeListComponent } from './notice/notice-list/notice-list.component';
 import { NoticeDetailComponent } from './notice/notice-detail/notice-detail.component';
@@ -20,43 +20,37 @@ import { LoginComponent } from './account/login/login.component';
 import { AuthCallbackComponent } from './account/auth-callback/auth-callback.component';
 import { MyReservationComponent } from './account/my-reservation/my-reservation.component';
 
-@NgModule({
-  declarations: [
-    AppComponent,
-    NewReservationComponent,
-    ReservationListComponent,
-    NoticeListComponent,
-    NoticeDetailComponent,
-    AboutComponent,
-    SanitizeHtmlPipe,
-    LoginComponent,
-    AuthCallbackComponent,
-    MyReservationComponent,
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    AppMaterialModule,
-    HttpClientModule,
-    FormsModule,
-    ReactiveFormsModule,
-    BrowserAnimationsModule,
-    OAuthModule.forRoot({
-      resourceServer: {
-        allowedUrls: ['https://reservation.weihanli.xyz/api'],
-        sendAccessToken: true
-      }
-    }),
-    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-  ],
-  providers: [
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ResponseInterceptor,
-      multi: true
-    },
-    provideClientHydration(),
-  ],
-  bootstrap: [AppComponent]
-})
+@NgModule({ declarations: [
+        AppComponent,
+        NewReservationComponent,
+        ReservationListComponent,
+        NoticeListComponent,
+        NoticeDetailComponent,
+        AboutComponent,
+        SanitizeHtmlPipe,
+        LoginComponent,
+        AuthCallbackComponent,
+        MyReservationComponent,
+    ],
+    bootstrap: [AppComponent], imports: [BrowserModule,
+        AppRoutingModule,
+        AppMaterialModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserAnimationsModule,
+        OAuthModule.forRoot({
+            resourceServer: {
+                allowedUrls: ['https://reservation.weihanli.xyz/api'],
+                sendAccessToken: true
+            }
+        }),
+        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })], providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: ResponseInterceptor,
+            multi: true
+        },
+        provideClientHydration(),
+        provideHttpClient(withInterceptorsFromDi()),
+    ] })
 export class AppModule { }
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -3,11 +3,14 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [
-      "@angular/localize"
+      "@angular/localize",
+      "node"
     ]
   },
   "files": [
-      "types/global.d.ts"
+    "types/global.d.ts",
+    "src/main.server.ts",
+    "server.ts"
   ],
   "include": [
     "src/**/*.ts"
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,6 +5,9 @@
   To learn more about this file see: https://angular.io/config/solution-tsconfig.
 */
 {
+  "compilerOptions": {
+    "esModuleInterop": true
+  },
   "files": [],
   "references": [
     {
diff --git a/tsconfig.server.json b/tsconfig.server.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@`
`5`	`5`	`To learn more about this file see: https://angular.io/config/solution-tsconfig.`
`6`	`6`	`*/`
`7`	`7`	`{`
	`8`	`+ "compilerOptions": {`
	`9`	`+ "esModuleInterop": true`
	`10`	`+ },`
`8`	`11`	`"files": [],`
`9`	`12`	`"references": [`
`10`	`13`	`{`