feat!: upgrade Angular to v17 (#2728)

BREAKING CHANGE: Angular has been upgraded to v17 ng update @angular/{pwa,core,cdk,cli,animations,common,compiler,elements,forms,platform-browser,platform-browser-dynamic,platform-server,router,service-worker,compiler-cli,language-service}@17.0.0 @angular-devkit/{schematics,build-angular,core}@17.0.0 @angular-eslint/{builder,eslint-plugin,eslint-plugin-templat e,schematics,template-parser}@17.0.0 @ngrx/{effects,entity,router-store,schematics,store,store-devtools}@17.0.0 ng-packag [email protected] @angular-devkit/[email protected] [email protected] [email protected] @fortawesome/angular-fontawes [email protected] --force The installed Angular CLI version is outdated. Installing a temporary Angular CLI versioned 17.0.9 to perform the update. ✔ Packages successfully installed. Using package manager: npm Collecting installed dependencies... Found 106 dependencies. Fetching dependency metadata from registry... Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=5.2 <5.3", would install "5.3.3") Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=5.2 <5.3", would install "5.3.3") Package "ng-packagr" has an incompatible peer dependency to "typescript" (requires ">=5.2 <5.3", would install "5.3.3") Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=5.2 <5.3", would install "5.3.3"). Updating package.json with dependency @angular-devkit/architect @ "0.1700.9" (was "0.1602.11")... Updating package.json with dependency @angular-devkit/build-angular @ "17.0.0" (was "16.2.11")... Updating package.json with dependency @angular-devkit/core @ "17.0.0" (was "16.2.11")... Updating package.json with dependency @angular-devkit/schematics @ "17.0.0" (was "16.2.11")... Updating package.json with dependency @angular-eslint/builder @ "17.0.0" (was "16.3.1")... Updating package.json with dependency @angular-eslint/eslint-plugin @ "17.0.0" (was "16.3.1")... Updating package.json with dependency @angular-eslint/eslint-plugin-template @ "17.0.0" (was "16.3.1")... Updating package.json with dependency @angular-eslint/schematics @ "17.0.0" (was "16.3.1")... Updating package.json with dependency @angular-eslint/template-parser @ "17.0.0" (was "16.3.1")... Updating package.json with dependency @angular/cli @ "17.0.0" (was "16.2.11")... Updating package.json with dependency @angular/compiler-cli @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/language-service @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @ngrx/store-devtools @ "17.0.0" (was "16.3.0")... Updating package.json with dependency ng-packagr @ "17.0.0" (was "16.2.3")... Updating package.json with dependency typescript @ "5.3.3" (was "4.9.5")... Updating package.json with dependency @angular/animations @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/cdk @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/common @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/compiler @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/core @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/elements @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/forms @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/platform-browser @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/platform-browser-dynamic @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/platform-server @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/pwa @ "17.0.0" (was "16.2.11")... Updating package.json with dependency @angular/router @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @angular/service-worker @ "17.0.0" (was "16.2.12")... Updating package.json with dependency @fortawesome/angular-fontawesome @ "0.14.1" (was "0.13.0")... Updating package.json with dependency @ngrx/effects @ "17.0.0" (was "16.3.0")... Updating package.json with dependency @ngrx/entity @ "17.0.0" (was "16.3.0")... Updating package.json with dependency @ngrx/router-store @ "17.0.0" (was "16.3.0")... Updating package.json with dependency @ngrx/schematics @ "17.0.0" (was "16.3.0")... Updating package.json with dependency @ngrx/store @ "17.0.0" (was "16.3.0")... Updating package.json with dependency angular-in-memory-web-api @ "0.17.0" (was "0.16.0")... Updating package.json with dependency zone.js @ "0.14.2" (was "0.13.3")... UPDATE package.json (4250 bytes) ✔ Packages successfully installed. ** Executing migrations of package '@angular-eslint/schematics' ** ▸ Updates @angular-eslint to v17. UPDATE package.json (4251 bytes) ✔ Packages installed successfully. Migration completed (1 file modified). ** Executing migrations of package '@angular/cli' ** ▸ Replace usages of '@nguniversal/builders' with '@angular-devkit/build-angular'. UPDATE angular.json (71918 bytes) UPDATE package.json (4211 bytes) Migration completed (2 files modified). ▸ Replace usages of '@nguniversal/' packages with '@angular/ssr'. RENAME apps/daffio/server/server.ts => apps/daffio/server/server.ts.bak CREATE apps/daffio/server/server.ts (2206 bytes) UPDATE package.json (4195 bytes) ✔ Packages installed successfully. Migration completed (2 files modified). ▸ Replace deprecated options in 'angular.json'. UPDATE angular.json (71896 bytes) Migration completed (1 file modified). ** Executing migrations of package '@ngrx/store-devtools' ** ▸ The road to v17-beta.1. UPDATE apps/daffio/src/app/app.module.ts (1866 bytes) UPDATE apps/demo/src/app/app.module.ts (1861 bytes) Migration completed (2 files modified). ** Executing migrations of package '@angular/cdk' ** ▸ Updates the Angular CDK to v17. Skipping migration for project demo-e2e. Unable to determine 'tsconfig.json' file in workspace config. Skipping migration for project daffio-e2e. Unable to determine 'tsconfig.json' file in workspace config. Skipping migration for project design-land-e2e. Unable to determine 'tsconfig.json' file in workspace config. ✓ Updated Angular CDK to version 17 Migration completed (No changes made). ** Executing migrations of package '@angular/core' ** ▸ Angular v17 introduces a new control flow syntax that uses the @ and } characters. This migration replaces the existing usages with their corresponding HTML entities. UPDATE apps/demo/src/app/misc/help-box/help-box.component.html (604 bytes) UPDATE apps/design-land/src/app/sidebar/sidebar.component.html (7697 bytes) UPDATE apps/design-land/src/app/foundations/variables/variables.component.html (2063 bytes) Migration completed (3 files modified). ▸ Updates `TransferState`, `makeStateKey`, `StateKey` imports from `@angular/platform-browser` to `@angular/core`. Migration completed (No changes made). ▸ CompilerOption.useJit and CompilerOption.missingTranslation are unused under Ivy. This migration removes their usage Migration completed (No changes made).
graycoreio · Jan 25, 2024 · afe4936 · afe4936
1 parent e607f8f
commit afe4936
Show file tree

Hide file tree

Showing 9 changed files with 21,598 additions and 48,446 deletions.
diff --git a/angular.json b/angular.json
@@ -163,21 +163,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build",
             "allowedHosts": [
               ".githubpreview.dev"
-            ]
+            ],
+            "buildTarget": "demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           }
         },
         "test": {
@@ -284,7 +284,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo-dev:build"
+            "buildTarget": "demo-dev:build"
           }
         }
       }
@@ -879,21 +879,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "daffio:build",
             "allowedHosts": [
               ".githubpreview.dev"
-            ]
+            ],
+            "buildTarget": "daffio:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "daffio:build:production"
+              "buildTarget": "daffio:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "daffio:build"
+            "buildTarget": "daffio:build"
           }
         },
         "test": {
@@ -966,7 +966,7 @@
           "defaultConfiguration": ""
         },
         "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
           "options": {
             "browserTarget": "daffio:build",
             "serverTarget": "daffio:server"
@@ -979,7 +979,7 @@
           }
         },
         "prerender": {
-          "builder": "@nguniversal/builders:prerender",
+          "builder": "@angular-devkit/build-angular:prerender",
           "options": {
             "browserTarget": "daffio:build:production",
             "serverTarget": "daffio:server:production",
@@ -1071,7 +1071,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "daffio-dev:build"
+            "buildTarget": "daffio-dev:build"
           }
         }
       }
@@ -1152,21 +1152,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "design-land:build",
             "allowedHosts": [
               ".githubpreview.dev"
-            ]
+            ],
+            "buildTarget": "design-land:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "design-land:build:production"
+              "buildTarget": "design-land:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "design-land:build"
+            "buildTarget": "design-land:build"
           }
         },
         "test": {

diff --git a/apps/daffio/server/server.ts b/apps/daffio/server/server.ts
@@ -1,46 +1,55 @@
-// eslint-disable-next-line import/no-unassigned-import
+
 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';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const BROWSER_FOLDER = join(__dirname, '../browser');
+  const distFolder = join(process.cwd(), 'dist/apps/daffio/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
-  const indexHtml = existsSync(join(BROWSER_FOLDER, 'index.original.html')) ? 'index.original.html' : 'index';
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+  const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', BROWSER_FOLDER);
+  server.set('views', distFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get('*.*', express.static(BROWSER_FOLDER, {
-    maxAge: '1y',
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
   }));
 
-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }]});
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    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) => res.send(html))
+      .catch((err) => next(err));
   });
 
   return server;
 }
 
 function run(): void {
-  const port = process.env.PORT || 4000;
+  const port = process.env['PORT'] || 4000;
 
   // Start up the Node server
   const server = app();
@@ -59,4 +68,4 @@ if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
-export * from '../src/main.server';
+export default bootstrap;
diff --git a/apps/daffio/src/app/app.module.ts b/apps/daffio/src/app/app.module.ts
@@ -57,6 +57,7 @@ import { environment } from '../environments/environment';
     StoreDevtoolsModule.instrument({
       maxAge: 25, // Retains last 25 states
       logOnly: environment.production, // Restrict extension to log-only mode
+      connectInZone: true
     }),
     TemplateModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),

diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { environment } from '../environments/environment';
     StoreDevtoolsModule.instrument({
       maxAge: 25, // Retains last 25 states
       logOnly: environment.production, // Restrict extension to log-only mode
+      connectInZone: true
     }),
 
     AppRoutingModule,

diff --git a/apps/demo/src/app/misc/help-box/help-box.component.html b/apps/demo/src/app/misc/help-box/help-box.component.html
@@ -9,6 +9,6 @@
     <div>Saturday-Sunday, 10:30 AM - 7 PM (ET)</div>
   </div>
   <div class="demo-help-box__info">
-    Reach us by email at: <a href="#">customerservice@store.com</a>
+    Reach us by email at: <a href="#">customerservice&#64;store.com</a>
   </div>
 </div>
diff --git a/apps/design-land/src/app/foundations/variables/variables.component.html b/apps/design-land/src/app/foundations/variables/variables.component.html
@@ -90,4 +90,4 @@ <h2>CSS Custom Properties</h2>
 	</tbody>
 </table>
 
-<blockquote>These values are based on <code>@daffodil/design</code>'s default theme and will be different if decide to customize your own theme.</blockquote>
+<blockquote>These values are based on <code>&#64;daffodil/design</code>'s default theme and will be different if decide to customize your own theme.</blockquote>
diff --git a/apps/design-land/src/app/sidebar/sidebar.component.html b/apps/design-land/src/app/sidebar/sidebar.component.html
@@ -51,7 +51,7 @@ <h4>Placed inside of the viewport content by omitting the <code>[daff-sidebar-vi
 &lt;/daff-sidebar-viewport&gt;</code></pre>
 
 <h4>Required imports</h4>
-<p>The <code>BrowserAnimationsModule</code> or <code>NoopAnimationsModule</code> must be imported in the particular Angular <code>@NgModule</code> the sidebar is used in for the sidebar to render and work properly.</p>
+<p>The <code>BrowserAnimationsModule</code> or <code>NoopAnimationsModule</code> must be imported in the particular Angular <code>&#64;NgModule</code> the sidebar is used in for the sidebar to render and work properly.</p>
 
 <h3>Header and footer</h3>
 <p>The <code>&lt;daff-sidebar-header&gt;</code> includes optional title (<code>[daffSidebarHeaderTitle]</code>) and action (<code>[daffSidebarHeaderAction]</code>) selectors, and a slot to render custom content. The action selector should be used along with the <code>&lt;daff-icon-button&gt;</code> (view <a routerLink="/button">Button Documentation</a>) to make sure that the action is positioned correctly and it passes WCAG guidelines.</p>