Feat/angular 18 upgrade (#2283)

BREAKING CHANGE: Upgrade covalent to Angular 18 * build(nx): remove nx cloud id * fix(package): fix angular versioning issues * revert(version): remove beta version number * build(chromatic): use node 18 * build(ci): fix failing component tests * docs(covalent): update docs for angular 18 * feat(react-components): create react web components * fix(styles): fix badge and card styling issues * docs(components): update new component docs * build(components): upgrade monaco editor version * build(email-generator): fix build issues in libs * fix(package): remove duplicate icon lockup entry * docs(angular): updating angular.dev links --------- Co-authored-by: oseer williams <[email protected]>
Teradata · Jan 10, 2025 · 90fe11c · 90fe11c
1 parent d75549f
commit 90fe11c
Show file tree

Hide file tree

Showing 227 changed files with 13,918 additions and 11,105 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -35,13 +35,18 @@
       },
       "rules": {
         "rxjs/no-unsafe-takeuntil": "error",
-        "rxjs-angular/prefer-takeuntil": "warn"
+        "rxjs-angular/prefer-takeuntil": "warn",
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     }
   ]
 }
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -25,10 +25,10 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
-      - name: Use Node.js 16
+      - name: Use Node.js 18
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
           cache: npm
       - run: npm ci
       # 👇 Adds Chromatic as a step in the workflow

diff --git a/.prettierignore b/.prettierignore
@@ -5,3 +5,5 @@
 
 /.nx/cache
 .angular
+
+/.nx/workspace-data
diff --git a/apps/docs-app/.browserslistrc b/apps/docs-app/.browserslistrc
@@ -3,7 +3,7 @@
 # https://github.com/browserslist/browserslist#queries
 
 # For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
+# https://angular.dev/reference/versions#browser-support
 
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist

diff --git a/apps/docs-app/src/app/app.module.ts b/apps/docs-app/src/app/app.module.ts
@@ -1,7 +1,11 @@
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -53,13 +57,13 @@ import { HomeComponent } from './components/home/home.component';
 import { ToolbarModule } from './components/toolbar/toolbar.module';
 
 @NgModule({
-  declarations: [DocsAppComponent, HomeComponent], // directives, components, and pipes owned by this NgModule
+  declarations: [DocsAppComponent, HomeComponent], // additional providers needed for this module
+  bootstrap: [DocsAppComponent],
   imports: [
     BrowserAnimationsModule,
     CommonModule,
     FormsModule,
     BrowserModule,
-    HttpClientModule,
     /** Material Modules */
     MatButtonModule,
     MatListModule,
@@ -89,7 +93,7 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
     ContentContainerModule,
     appRoutes,
     CovalentFileModule,
-  ], // modules needed to run this module
+  ],
   providers: [
     appRoutingProviders,
     GitHubService,
@@ -101,7 +105,7 @@ import { ToolbarModule } from './components/toolbar/toolbar.module';
       deps: [TranslateService],
     },
     SelectivePreloadingStrategyService,
-  ], // additional providers needed for this module
-  bootstrap: [DocsAppComponent],
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
 })
 export class AppModule {}
diff --git a/apps/docs-app/src/app/components/shared/demo-tools/demo.module.ts b/apps/docs-app/src/app/components/shared/demo-tools/demo.module.ts
@@ -6,7 +6,10 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { CovalentHighlightModule } from '@covalent/highlight';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatDividerModule } from '@angular/material/divider';
 
@@ -23,8 +26,8 @@ import { MatDividerModule } from '@angular/material/divider';
     MatCardModule,
     MatIconModule,
     MatButtonModule,
-    HttpClientModule,
     MatDividerModule,
   ],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class DemoModule {}
diff --git a/...ent-demos/dynamic-menu/demos/dynamic-menu-demo-basic/dynamic-menu-demo-basic.component.ts b/...ent-demos/dynamic-menu/demos/dynamic-menu-demo-basic/dynamic-menu-demo-basic.component.ts
@@ -70,7 +70,7 @@ export class DynamicMenuDemoBasicComponent {
         {
           // URL link
           text: 'Angular Homepage',
-          link: 'https://angular.io/',
+          link: 'https://angular.dev/',
           newTab: true,
         },
       ],

diff --git a/...red-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts b/...red-markdown/demos/flavored-markdown-demo-basic/flavored-markdown-demo-basic.component.ts
@@ -16,17 +16,16 @@ export class FlavoredMarkdownDemoBasicComponent {
     ## List
 
     + One
-      + subline
+        + subline
     + Two
     + Three
-      + subline
-      + second subline
-
-
-    | Tables        | Are           | Cool  |
-    | ------------- |:-------------:| -----:|
-    | **col 3 is**  | right-aligned | $1600 |
-    | col 2 is      | *centered*    |   $12 |
-    | zebra stripes | are neat      |    $1 |  
+        + subline
+        + second subline
+    + Table in a list:
+      | Tables        | Are           | Cool  |
+      | ------------- |:-------------:| -----:|
+      | **col 3 is**  | right-aligned | $1600 |
+      | col 2 is      | *centered*    |   $12 |
+      | zebra stripes | are neat      |    $1 |   
   `;
 }
diff --git a/apps/docs-app/src/app/content/docs/angular-material/angular-material.component.html b/apps/docs-app/src/app/content/docs/angular-material/angular-material.component.html
@@ -31,14 +31,14 @@ <h3>New &amp; Custom Components</h3>
     mat-button
     color="accent"
     target="_blank"
-    href="https://v17.material.angular.io/components/categories"
+    href="https://v18.material.angular.io/components/categories"
   >
     Components
   </a>
   <a
     mat-button
     target="_blank"
-    href="https://github.com/angular/components/releases/tag/17.3.6"
+    href="https://github.com/angular/components/releases/tag/18.2.14"
     >Github repo</a
   >
 </section>
@@ -55,7 +55,7 @@ <h3>New &amp; Custom Components</h3>
       <span matListItemLine>Why Angular Material?</span>
     </a>
     <mat-divider></mat-divider>
-    <a mat-list-item href="https://v17.material.angular.io/" target="_blank">
+    <a mat-list-item href="https://v18.material.angular.io/" target="_blank">
       <mat-icon matListItemIcon>launch</mat-icon>
       <span matListItemLine>Angular Material Docs Site</span>
     </a>

diff --git a/apps/docs-app/src/app/content/docs/angular/angular.component.html b/apps/docs-app/src/app/content/docs/angular/angular.component.html
@@ -22,7 +22,7 @@ <h3>Modern Web Dev</h3>
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <a mat-button color="accent" target="_blank" href="https://angular.io/"
+    <a mat-button color="accent" target="_blank" href="https://angular.dev/"
       >Angular docs</a
     >
   </mat-card-actions>
@@ -47,20 +47,12 @@ <h3>Modern Web Dev</h3>
     ><mat-card-title>Angular Resources</mat-card-title></mat-card-header
   >
   <mat-nav-list>
-    <a
-      mat-list-item
-      href="https://angular.io/docs/ts/latest/tutorial/"
-      target="_blank"
-    >
+    <a mat-list-item href="" target="_blank">
       <mat-icon matListItemIcon>launch</mat-icon>
       <span matListItemLine>Angular Example App Tutorial</span>
     </a>
     <mat-divider></mat-divider>
-    <a
-      mat-list-item
-      href="https://angular.io/docs/ts/latest/quickstart.html"
-      target="_blank"
-    >
+    <a mat-list-item href="https://angular.dev/overview" target="_blank">
       <mat-icon matListItemIcon>launch</mat-icon>
       <span matListItemLine>Angular Quickstart app</span>
     </a>

diff --git a/apps/docs-app/src/app/content/docs/theme/theme.component.html b/apps/docs-app/src/app/content/docs/theme/theme.component.html
@@ -28,7 +28,7 @@ <h3 class="push-bottom-sm mat-title">SCSS Variables</h3>
     mat-button
     color="accent"
     target="_blank"
-    href="https://v17.material.angular.io/guide/theming"
+    href="https://v18.material.angular.io/guide/theming"
   >
     Theming docs
   </a>

diff --git a/apps/docs-app/src/app/content/docs/theme/theme.component.ts b/apps/docs-app/src/app/content/docs/theme/theme.component.ts
@@ -15,36 +15,36 @@ export class ThemeComponent {
   @use '@angular/material' as mat;
 
   // (optional) Additional themes
-  @use '@covalent/markdown/markdown-theme' as markdown;
-  @use '@covalent/highlight/highlight-theme' as highlight;
-  @import '@covalent/flavored-markdown/flavored-markdown-theme';
+  @use "@covalent/markdown/markdown-theme" as markdown;
+  @use "@covalent/highlight/highlight-theme" as highlight;
+  @import "@covalent/flavored-markdown/flavored-markdown-theme";
 
   // Covalent core themes
-  @import '@covalent/core/theming/all-theme';
-  @import '@covalent/core/theming/teradata-theme';
+  @import "@covalent/core/theming/all-theme";
+  @import "@covalent/core/theming/teradata-theme";
 
   // Plus imports for other components in your app.
 
   @include mat.core();
 
   // Define a custom typography config that overrides the font-family
   // or any typography level.
-  $typography: mat.define-typography-config(
-    $font-family: 'Inter, monospace',
-    $headline-1: mat.define-typography-level(32px, 48px, 700),
+  $typography: mat.m2-define-typography-config(
+    $font-family: "Inter, monospace",
+    $headline-1: mat.m2-define-typography-level(32px, 48px, 700),
   );
 
   // Define the palettes for your theme using the Material Design palettes available in palette.scss
   // (imported above). For each palette, you can optionally specify a default, lighter, and darker
   // hue.
-  $primary: mat.define-palette($mat-blue, 700);
-  $accent: mat.define-palette($mat-orange, 800, A100, A400);
+  $primary: mat.m2-define-palette($mat-blue, 700);
+  $accent: mat.m2-define-palette($mat-orange, 800, A100, A400);
 
   // The warn palette is optional (defaults to red).
-  $warn: mat.define-palette($mat-red, 600);
+  $warn: mat.m2-define-palette($mat-red, 600);
 
   // Create the theme object (a Sass map containing all of the palettes).
-  $theme: mat.define-light-theme(
+  $theme: mat.m2-define-light-theme(
     (
       color: (
         primary: $primary,
@@ -55,6 +55,8 @@ export class ThemeComponent {
     )
   );
 
+  @include mat.typography-hierarchy($theme, $back-compat: true);
+
   // Include the Angular Material styles using the custom theme
   @include mat.all-component-themes($theme);
 

diff --git a/apps/docs-app/src/app/content/echarts/echarts.module.ts b/apps/docs-app/src/app/content/echarts/echarts.module.ts
@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
@@ -39,7 +42,6 @@ import { moduleRoutes } from './echarts.routes';
     MatTabsModule,
     MatRippleModule,
     MatMenuModule,
-    HttpClientModule,
     MatTooltipModule,
     // Covalent Core
     CovalentLayoutModule,
@@ -49,5 +51,6 @@ import { moduleRoutes } from './echarts.routes';
     SidenavContentModule,
     ComponentOverviewModule,
   ],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class EchartsModule {}
diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html
@@ -24,7 +24,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
   <a
     mat-raised-button
     color="primary"
-    href="https://angular.io/guide/animations"
+    href="https://v18.angular.dev/guide/animations"
     target="_blank"
     class="push-top-sm"
   >

diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/directives/directives.component.html
@@ -14,7 +14,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
   <a
     mat-raised-button
     color="primary"
-    href="https://angular.io/docs/ts/latest/guide/attribute-directives.html"
+    href="https://v18.angular.dev/guide/directives/attribute-directives"
     target="_blank"
     class="push-top-sm"
   >

diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html
@@ -17,7 +17,7 @@ <h3 class="push-bottom-sm mat-title">Setup</h3>
   <a
     mat-raised-button
     color="primary"
-    href="https://angular.io/docs/ts/latest/guide/pipes.html"
+    href="https://v18.angular.dev/guide/templates/pipes"
     target="_blank"
     class="push-top-sm"
   >
@@ -266,7 +266,7 @@ <h3 matListItemTitle>
     ><mat-card-title>Angular Pipes</mat-card-title></mat-card-header
   >
   <mat-nav-list>
-    <a mat-list-item href="https://angular.io/api?type=pipe" target="_blank">
+    <a mat-list-item href="https://angular.dev/api/core/Pipe" target="_blank">
       <mat-icon matListItemIcon>launch</mat-icon>
       <span matListItemLine>
         Angular comes with a stock of pipes such as DatePipe, UpperCasePipe,

diff --git a/apps/docs-app/src/polyfills.ts b/apps/docs-app/src/polyfills.ts
@@ -11,7 +11,7 @@
  * automatically update themselves. This includes recent versions of Safari, Chrome (including
  * Opera), Edge on the desktop, and iOS and Chrome on mobile.
  *
- * Learn more in https://angular.io/guide/browser-support
+ * Learn more in https://angular.dev/reference/versions#browser-support
  */
 
 /***************************************************************************************************

diff --git a/apps/email-generator/project.json b/apps/email-generator/project.json
@@ -39,7 +39,7 @@
             {
               "type": "initial",
               "maximumWarning": "5mb",
-              "maximumError": "6mb"
+              "maximumError": "6.5mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/apps/email-generator/src/app/editor/editor.component.ts b/apps/email-generator/src/app/editor/editor.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CovalentCodeEditorModule } from '@covalent/code-editor';
 import { PreviewComponent } from '../preview/preview.component';
-import { editor } from 'monaco-editor';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import { getHtmlTemplate } from '@covalent/email-templates';
 import * as prettier from 'prettier';
 import parserHtml from 'prettier/parser-html'; // Use 'html' parser while working with MJML
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,5 @@

		/.nx/cache
		.angular

		/.nx/workspace-data