feat!: update to angular 19 (#558)

jfcere · pkurcx · pkurc · web-flow · commit d9fc3aa49c83 · 2024-11-20T15:31:23.000-05:00
* feat!: update to angular 19 (#557) Co-authored-by: pkurc <p.kurc@avsystem.com> * Adjustments to match newly created Angular 19 project * Fix type-check commands --------- Co-authored-by: pkurcx <przemyslaw.kurc@gmail.com> Co-authored-by: pkurc <p.kurc@avsystem.com>
diff --git a/.editorconfig b/.editorconfig
@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -17,7 +17,6 @@ import { isTheme, Theme } from './app.models';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     FlexModule,
     MatButtonModule,
diff --git a/demo/src/app/bindings/bindings.component.ts b/demo/src/app/bindings/bindings.component.ts
@@ -13,7 +13,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './bindings.component.html',
   styleUrls: ['./bindings.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     AsyncPipe,
     FlexModule,
@@ -33,7 +32,7 @@ export default class BindingsComponent implements OnInit {
 
   // variable-binding
   markdown =
-`### Markdown example
+    `### Markdown example
 ---
 This is an **example** where we bind a variable to the \`markdown\` component that is also bound to a textarea.
 
@@ -50,7 +49,7 @@ public markdown = "# Markdown";
 
   // pipe
   typescriptMarkdown =
-`import { Component } from '@angular/core';
+    `import { Component } from '@angular/core';
 
 @Component({
   selector: 'markdown-demo',
diff --git a/demo/src/app/cheat-sheet/cheat-sheet.component.ts b/demo/src/app/cheat-sheet/cheat-sheet.component.ts
@@ -9,7 +9,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './cheat-sheet.component.html',
   styleUrls: ['./cheat-sheet.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     AsyncPipe,
     MarkdownComponent,
diff --git a/demo/src/app/get-started/get-started.component.ts b/demo/src/app/get-started/get-started.component.ts
@@ -7,7 +7,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './get-started.component.html',
   styleUrls: ['./get-started.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     MarkdownComponent,
     ScrollspyNavLayoutComponent,
diff --git a/demo/src/app/plugins/plugins.component.ts b/demo/src/app/plugins/plugins.component.ts
@@ -13,7 +13,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './plugins.component.html',
   styleUrls: ['./plugins.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     FlexModule,
     FormsModule,
@@ -39,7 +38,7 @@ export default class PluginsComponent implements OnInit {
   emojiMarkdown = '# I :heart: ngx-markdown';
 
   katexMarkdown =
-`#### \`katex\` directive example
+    `#### \`katex\` directive example
 
 \`\`\`latex
 f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi
@@ -48,7 +47,7 @@ f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi
 $f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi) e^{2 \\pi i \\xi x} d\\xi$`;
 
   mermaidMarkdown =
-`\`\`\`mermaid
+    `\`\`\`mermaid
 graph TD;
   A-->B;
   A-->C;
diff --git a/demo/src/app/rerender/rerender.component.ts b/demo/src/app/rerender/rerender.component.ts
@@ -11,7 +11,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './rerender.component.html',
   styleUrls: ['./rerender.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     FlexModule,
     FormsModule,
diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.component.ts b/demo/src/app/shared/clipboard-button/clipboard-button.component.ts
@@ -7,7 +7,6 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   templateUrl: './clipboard-button.component.html',
   styleUrls: ['./clipboard-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [MatButtonModule],
 })
 export class ClipboardButtonComponent {
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts
@@ -14,7 +14,6 @@ import { ZOOM_ANIMATION } from './scrollspy-nav-layout.animation';
   templateUrl: './scrollspy-nav-layout.component.html',
   styleUrls: ['./scrollspy-nav-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     ExtendedModule,
     FlexModule,
diff --git a/demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.ts b/demo/src/app/shared/scrollspy-nav/scrollspy-nav.component.ts
@@ -18,7 +18,6 @@ import { first } from 'rxjs/operators';
   templateUrl: './scrollspy-nav.component.html',
   styleUrls: ['./scrollspy-nav.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     NgFor,
     RouterLink,
diff --git a/demo/src/app/syntax-highlight/syntax-highlight.component.ts b/demo/src/app/syntax-highlight/syntax-highlight.component.ts
@@ -8,7 +8,6 @@ import { ScrollspyNavLayoutComponent } from '@shared/scrollspy-nav-layout';
   templateUrl: './syntax-highlight.component.html',
   styleUrls: ['./syntax-highlight.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     AsyncPipe,
     LanguagePipe,
diff --git a/demo/src/scss/material-theme.scss b/demo/src/scss/material-theme.scss
@@ -84,7 +84,8 @@ body {
 }
 
 // material core
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 // themes
 @include theme(light-theme.$theme, 'light');
diff --git a/lib/package.json b/lib/package.json
@@ -30,12 +30,12 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
     "marked": ">= 9.0.0 < 13.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "optionalDependencies": {
     "clipboard": "^2.0.11",
diff --git a/lib/src/clipboard-button.component.ts b/lib/src/clipboard-button.component.ts
@@ -16,7 +16,6 @@ const BUTTON_TEXT_COPIED = 'Copied';
     >{{ copiedText$ | async }}</button>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [AsyncPipe],
 })
 export class ClipboardButtonComponent {
diff --git a/lib/src/language.pipe.ts b/lib/src/language.pipe.ts
@@ -2,7 +2,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
   name: 'language',
-  standalone: true,
 })
 export class LanguagePipe implements PipeTransform {
 
diff --git a/lib/src/markdown.component.ts b/lib/src/markdown.component.ts
@@ -23,7 +23,6 @@ import { PrismPlugin } from './prism-plugin';
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'markdown, [markdown]',
   template: '<ng-content></ng-content>',
-  standalone: true,
 })
 export class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {
 
diff --git a/lib/src/markdown.module.spec.ts b/lib/src/markdown.module.spec.ts
@@ -22,7 +22,6 @@ import { MARKED_OPTIONS, MarkedOptions } from './marked-options';
       <markdown [data]="markdown"></markdown>
     </ng-template>
   `,
-  standalone: true,
   imports: [
     CommonModule,
     MarkdownComponent,
@@ -264,7 +263,7 @@ describe('MarkdownModule', () => {
     it('should inherit from forRoot providers', () => {
 
       const mockMarkedOptions: MarkedOptions = { breaks: true, gfm: false };
-      const mockClipboardOptions: ClipboardOptions = { buttonComponent: class mockClipboardButtonComponent {} };
+      const mockClipboardOptions: ClipboardOptions = { buttonComponent: class mockClipboardButtonComponent { } };
 
       TestBed.configureTestingModule({
         imports: [
diff --git a/lib/src/markdown.pipe.ts b/lib/src/markdown.pipe.ts
@@ -7,7 +7,6 @@ export type MarkdownPipeOptions = ParseOptions & RenderOptions;
 
 @Pipe({
   name: 'markdown',
-  standalone: true,
 })
 export class MarkdownPipe implements PipeTransform {
 
diff --git a/lib/src/marked-options.ts b/lib/src/marked-options.ts
@@ -1,6 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { MarkedOptions } from 'marked';
 
-export { MarkedOptions } from 'marked';
+export type { MarkedOptions } from 'marked';
 
 export const MARKED_OPTIONS = new InjectionToken<MarkedOptions>('MARKED_OPTIONS');
diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "lint:demo": "ng lint demo",
     "lint:lib": "ng lint lib",
     "lint:ci": "ng lint lib --format checkstyle > eslint.xml",
-    "type-check:demo": "tsc --project ./demo/tsconfig.app.json --noEmit",
-    "type-check:lib": "tsc --project ./lib/tsconfig.lib.json --noEmit",
+    "type-check:demo": "tsc --project ./demo/tsconfig.app.json --inlineSourceMap --noEmit",
+    "type-check:lib": "tsc --project ./lib/tsconfig.lib.json --inlineSourceMap --noEmit",
     "test": "ng test",
     "coveralls": "cat \"./coverage/lcov.info\" | \"./node_modules/coveralls/bin/coveralls.js\"",
     "gh-pages:build": "yarn build:demo --aot --base-href /ngx-markdown/",
@@ -48,17 +48,17 @@
     "publish:beta": "npm publish ./dist/lib --tag beta"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
     "@angular/flex-layout": "15.0.0-beta.42",
-    "@angular/forms": "^18.0.0",
-    "@angular/material": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "clipboard": "^2.0.11",
     "emoji-toolkit": "^9.0.0",
     "gumshoejs": "^5.1.2",
@@ -71,13 +71,13 @@
     "prismjs": "^1.29.0",
     "rxjs": "~6.5.3",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.1",
-    "@angular/cli": "~18.0.1",
-    "@angular/compiler-cli": "^18.0.0",
-    "@angular/language-service": "^18.0.0",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "~19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
     "@types/jasmine": "~5.1.0",
     "angular-cli-ghpages": "^0.5.3",
     "angular-eslint": "^18.3.1",
@@ -87,17 +87,17 @@
     "eslint-formatter-checkstyle": "^8.40.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
-    "jasmine-core": "~5.1.0",
+    "jasmine-core": "~5.4.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-junit-reporter": "^2.0.1",
     "linklocal": "^2.8.2",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.0.0",
     "rimraf": "^2.7.0",
-    "typescript": "~5.4.2",
+    "typescript": "~5.6.2",
     "typescript-eslint": "8.2.0"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -10,20 +11,14 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
+    "isolatedModules": true,
     "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
     "paths": {
       "@shared/*": ["demo/src/app/shared/*"],
       "@app/*": ["demo/src/app/*"],
diff --git a/yarn.lock b/yarn.lock
