Fix npm install issues and update dependencies for Angular 18 compatibility

Author: rexmarkh

package-lock.json

@@ -17,42 +17,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/forms": "^15.2.10",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@ant-design/icons-angular": "^15.0.0",
+    "@angular/animations": "^18.2.12",
+    "@angular/cdk": "^18.2.13",
+    "@angular/common": "^18.2.12",
+    "@angular/compiler": "^18.2.12",
+    "@angular/core": "^18.2.12",
+    "@angular/forms": "^18.2.12",
+    "@angular/platform-browser": "^18.2.12",
+    "@angular/platform-browser-dynamic": "^18.2.12",
+    "@angular/router": "^18.2.12",
+    "@ant-design/icons-angular": "^18.0.0",
+    "@ctrl/tinycolor": "^4.2.0",
     "@datorama/akita": "^7.1.1",
     "@datorama/akita-ng-entity-service": "^7.0.0",
-    "@ngneat/content-loader": "^6.0.0",
+    "@ngneat/content-loader": "^7.0.0",
     "@ngneat/tailwind": "^7.0.3",
     "@ngneat/until-destroy": "^8.0.3",
     "@sentry/angular": "^9.30.0",
     "@sentry/tracing": "^6.18.1",
     "date-fns": "^2.14.0",
     "karma-coverage": "^2.0.3",
-    "ng-zorro-antd": "^15.0.0",
-    "ngx-quill": "^16.1.2",
+    "ng-zorro-antd": "^18.2.1",
+    "ngx-quill": "^24.0.0",
     "quill": "^1.3.7",
-    "rxjs": "~6.6.3",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^15.0.0",
-    "@angular-devkit/build-angular": "^15.2.11",
-    "@angular-eslint/builder": "15.2.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
-    "@angular-eslint/schematics": "15.2.1",
-    "@angular-eslint/template-parser": "15.2.1",
-    "@angular/cli": "^15.2.11",
-    "@angular/compiler-cli": "^15.2.10",
+    "@angular-builders/custom-webpack": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular-eslint/builder": "18.3.0",
+    "@angular-eslint/eslint-plugin": "18.3.0",
+    "@angular-eslint/eslint-plugin-template": "18.3.0",
+    "@angular-eslint/schematics": "18.3.0",
+    "@angular-eslint/template-parser": "18.3.0",
+    "@angular/cli": "^18.2.12",
+    "@angular/compiler-cli": "^18.2.12",
     "@babel/core": "^7.12.10",
     "@compodoc/compodoc": "^1.1.11",
     "@datorama/akita-ng-router-store": "^7.0.0",
@@ -65,8 +66,9 @@
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.14.14",
-    "@typescript-eslint/eslint-plugin": "5.11.0",
-    "@typescript-eslint/parser": "5.11.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "autoprefixer": "^10.4.21",
     "babel-loader": "^8.2.2",
     "codelyzer": "^6.0.0",
     "eslint": "^8.2.0",
@@ -88,7 +90,7 @@
     "tailwindcss": "^3.0.12",
     "ts-node": "~9.1.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.8.4"
+    "typescript": "~5.5.4"
   },
   "husky": {
     "hooks": {

package.json

@@ -0,0 +1,101 @@
+{
+  "name": "jira-clone-angular-frontend",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "test-cover": "ng test --code-coverage --source-map=false",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix=true",
+    "e2e": "ng e2e",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+    "docs:html": "npx compodoc -p tsconfig.json src  && npx serve documentation",
+    "storybook": "npm run docs:json && start-storybook -p 6006",
+    "build-storybook": "STORYBOOK_GA_ID=UA-80363801-4 STORYBOOK_REACT_GA_OPTIONS={} npm run docs:json && build-storybook"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@ant-design/icons-angular": "^15.0.0",
+    "@datorama/akita": "^7.1.1",
+    "@datorama/akita-ng-entity-service": "^7.0.0",
+    "@ngneat/content-loader": "^6.0.0",
+    "@ngneat/tailwind": "^7.0.3",
+    "@ngneat/until-destroy": "^8.0.3",
+    "@sentry/angular": "^9.30.0",
+    "@sentry/tracing": "^6.18.1",
+    "date-fns": "^2.14.0",
+    "karma-coverage": "^2.0.3",
+    "ng-zorro-antd": "^15.0.0",
+    "ngx-quill": "^16.1.2",
+    "quill": "^1.3.7",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^15.0.0",
+    "@angular-devkit/build-angular": "^15.2.11",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.11",
+    "@angular/compiler-cli": "^15.2.10",
+    "@babel/core": "^7.12.10",
+    "@compodoc/compodoc": "^1.1.11",
+    "@datorama/akita-ng-router-store": "^7.0.0",
+    "@datorama/akita-ngdevtools": "^7.0.0",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-google-analytics": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/angular": "^6.1.11",
+    "@types/jasmine": "~3.6.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^14.14.14",
+    "@typescript-eslint/eslint-plugin": "5.11.0",
+    "@typescript-eslint/parser": "5.11.0",
+    "babel-loader": "^8.2.2",
+    "codelyzer": "^6.0.0",
+    "eslint": "^8.2.0",
+    "husky": "^5.0.9",
+    "jasmine-core": "~4.0.1",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "~6.3.16",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "lint-staged": "^10.5.4",
+    "nz-tslint-rules": "^0.901.2",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-scss": "^4.0.3",
+    "protractor": "~7.0.0",
+    "react-is": "^17.0.1",
+    "tailwindcss": "^3.0.12",
+    "ts-node": "~9.1.1",
+    "tslint": "~6.1.0",
+    "typescript": "~4.8.4"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": "npm run lint:fix"
+  }
+}

package.json.backup

@@ -42,7 +42,7 @@ export class IssueCardComponent implements OnChanges, OnInit {
       nzWidth: 1040,
       nzClosable: false,
       nzFooter: null,
-      nzComponentParams: {
+      nzData: {
         issue$: this._projectQuery.issueById$(issueId)
       }
     });

src/app/project/components/issues/issue-card/issue-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, OnInit } from '@angular/core';
 import { NzModalRef } from 'ng-zorro-antd/modal';
 import { DeleteIssueModel } from '@trungk18/interface/ui-model/delete-issue-model';
 
@@ -7,12 +7,28 @@ import { DeleteIssueModel } from '@trungk18/interface/ui-model/delete-issue-mode
   templateUrl: './issue-delete-modal.component.html',
   styleUrls: ['./issue-delete-modal.component.scss']
 })
-export class IssueDeleteModalComponent {
+export class IssueDeleteModalComponent implements OnInit {
   issueId: string;
 
   onDelete = new EventEmitter<DeleteIssueModel>();
 
-  constructor(private _modalRef: NzModalRef) {}
+  constructor(
+    private _modalRef: NzModalRef
+  ) {}
+
+  ngOnInit() {
+    // Get data from the new ng-zorro modal data
+    const config = this._modalRef.getConfig();
+    console.log('Delete modal config:', config);
+    if (config.nzData?.issueId) {
+      this.issueId = config.nzData.issueId;
+      console.log('Issue ID set from nzData:', this.issueId);
+    }
+    if (config.nzData?.onDelete) {
+      this.onDelete = config.nzData.onDelete;
+      console.log('onDelete callback set from nzData');
+    }
+  }
 
   deleteIssue() {
     this.onDelete.emit(new DeleteIssueModel(this.issueId, this._modalRef));

src/app/project/components/issues/issue-delete-modal/issue-delete-modal.component.ts

@@ -28,7 +28,7 @@ export class IssueDetailComponent{
       nzStyle: {
         top: '140px'
       },
-      nzComponentParams: {
+      nzData: {
         issueId: this.issue.id,
         onDelete: this.onDelete
       }

src/app/project/components/issues/issue-detail/issue-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { JIssue } from '@trungk18/interface/issue';
 import { ProjectService } from '@trungk18/project/state/project/project.service';
@@ -11,7 +11,7 @@ import { DeleteIssueModel } from '@trungk18/interface/ui-model/delete-issue-mode
   templateUrl: './issue-modal.component.html',
   styleUrls: ['./issue-modal.component.scss']
 })
-export class IssueModalComponent {
+export class IssueModalComponent implements OnInit {
   @Input() issue$: Observable<JIssue>;
 
   constructor(
@@ -20,6 +20,18 @@ export class IssueModalComponent {
     private _projectService: ProjectService
   ) {}
 
+  ngOnInit() {
+    // Get data from the new ng-zorro modal data
+    const config = this._modal.getConfig();
+    console.log('Modal config:', config);
+    if (config.nzData?.issue$) {
+      this.issue$ = config.nzData.issue$;
+      console.log('Issue observable set from nzData:', this.issue$);
+    } else {
+      console.log('No issue$ found in modal data');
+    }
+  }
+
   closeModal() {
     this._modal.close();
   }

src/app/project/components/issues/issue-modal/issue-modal.component.ts

@@ -92,7 +92,7 @@
         <p class="mb-2">This is a <strong>simplified</strong> Jira clone built with Angular, Akita and ng-zorro</p>
         <p class="mb-2">Thanks a bunch for stopping by and supporting me!</p>
         <p class="mb-3">Reach out to me via <a class="font-semibold"
-               href="email:trungk18@gmail.com">trungk18@gmail.com</a></p>
+               href="email:trungk18&#64;gmail.com">trungk18&#64;gmail.com</a></p>
         <a href="https://trungk18.com/"
            target="_blank">
             <j-button className="btn-primary">Visit My Blog</j-button>

src/app/project/components/navigation/navbar-left/navbar-left.component.html

@@ -57,7 +57,7 @@ export class SearchDrawerComponent implements OnInit {
       nzWidth: 1040,
       nzClosable: false,
       nzFooter: null,
-      nzComponentParams: {
+      nzData: {
         issue$: this._projectQuery.issueById$(issue.id)
       }
     });

src/app/project/components/search/search-drawer/search-drawer.component.ts

@@ -1,12 +1,4 @@
-@import 'ng-zorro-antd/style/index.min.css';
-@import 'ng-zorro-antd/tooltip/style/index.min.css';
-@import 'ng-zorro-antd/spin/style/index.min.css';
-@import 'ng-zorro-antd/modal/style/index.min.css';
-@import 'ng-zorro-antd/dropdown/style/index.min.css';
-@import 'ng-zorro-antd/select/style/index.min.css';
-@import 'ng-zorro-antd/drawer/style/index.min.css';
-@import 'ng-zorro-antd/notification/style/index.min.css';
-@import 'ng-zorro-antd/popover/style/index.min.css';
+@import 'ng-zorro-antd/ng-zorro-antd.min.css';
 
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';