[Bug] App is not building

vishnukn01 commented 1 year ago

Version

1.4.0

Reproduction link

https://www.greenbinary.com

Operating System

Windows 11

Device

HP Probook 430 G5 laptop

Browser & Version

Google Chrome 114.0.5735.134

Steps to reproduce

Download the code and run npm install
Serve the app using npm run start
What is expected?

Expected the app to build

What is actually happening?

Getting the following error on running npm run start : Error: node_modules/preact/src/jsx.d.ts:1124:3 - error TS2344: Type 'TargetedPictureInPictureEvent' does not satisfy the constraint 'TargetedEvent<EventTarget, Event>'. Type 'TargetedPictureInPictureEvent' is missing the following properties from type 'Omit<Event, "currentTarget">': type, target, bubbles, cancelBubble, and 17 more.

Solution

Additional comments

Since the app itself is not building, there was no way for me to provide a Link to minimal reproduction. I have provided my company website's url just as a dummy placeholder, since the form would not allow me to submit without entering some url. The issue is happening on localhost.

iradikovic-bth commented 1 year ago

I have same problem.

zaki699 commented 1 year ago

Hi @vishnukn01.

Please find the instructions to fix your issue.

First, you need to use node v16.18.0

Secondly, replace the files below

angular.json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "argon-dashboard-pro-angular": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", "src/assets/vendor/nucleo/css/nucleo.css", "src/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css", "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css", "node_modules/mobius1-selectr/dist/selectr.min.css", "node_modules/@swimlane/ngx-datatable/index.css", "node_modules/@swimlane/ngx-datatable/assets/icons.css", "src/assets/scss/argon.scss", "node_modules/@swimlane/ngx-datatable/themes/bootstrap.css" ], "scripts": [ "node_modules/chart.js/dist/Chart.min.js" ], "allowedCommonJsDependencies": [ "chart.js", "list.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": false }, "fonts": true }, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb" } ] }, "development": { "buildOptimizer": false, "optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": true }, "fonts": true }, "outputHashing": "all" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "argon-dashboard-pro-angular:build" }, "configurations": { "production": { "browserTarget": "argon-dashboard-pro-angular:build:production" }, "development": { "browserTarget": "argon-dashboard-pro-angular:build:development" } }, "defaultConfiguration": "production" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "argon-dashboard-pro-angular:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "src/styles.scss" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "argon-dashboard-pro-angular-e2e": { "root": "e2e/", "projectType": "application", "prefix": "", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "argon-dashboard-pro-angular:serve" }, "configurations": { "production": { "devServerTarget": "argon-dashboard-pro-angular:serve:production" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } } } } }, "defaultProject": "argon-dashboard-pro-angular", "cli": { "analytics": false } }

package.json

{ "name": "argon-dashboard-pro-angular", "version": "1.4.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" }, "private": true, "dependencies": { "@angular/animations": "^15.2.0", "@angular/common": "^15.2.0", "@angular/compiler": "^15.2.0", "@angular/core": "^15.2.0", "@angular/forms": "^15.2.0", "@angular/platform-browser": "^15.2.0", "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "@fullcalendar/daygrid": "6.0.0", "@fullcalendar/interaction": "6.0.0", "@fullcalendar/core": "6.0.0", "@swimlane/ngx-datatable": "20.0.0", "bootstrap": "4.5.2", "chart.js": "2.9.3", "clipboard": "2.0.10", "d3-scale": "4.0.2", "date-fns": "2.28.0", "devextreme": "21.2.6", "devextreme-angular": "21.2.6", "dropzone": "5.9.3", "fullcalendar": "6.1.8", "jquery": "^3.6.0", "list.js": "2.3.1", "mobius1-selectr": "2.4.13", "ngx-bootstrap": "8.0.0", "ngx-chips": "3.0.0", "ngx-clipboard": "15.1.0", "ngx-perfect-scrollbar": "10.1.1", "ngx-print": "1.2.1", "ngx-toastr": "16.2.0", "nouislider": "15.5.1", "npm-install-peers": "^1.2.2", "popper.js": "1.16.1", "quill": "1.3.7", "stream": "0.0.2", "sweetalert2": "11.4.6", "rxjs": "^7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.8", "@angular/cli": "~15.2.8", "@angular/compiler-cli": "^15.2.0", "@types/bootstrap": "5.0.1", "@types/chartist": "0.11.0", "@angular/language-service": "15.2.0", "@types/jasmine": "~4.0.0", "@types/jasminewd2": "~2.0.10", "@types/node": "^17.0.21", "codelyzer": "6.0.2", "jasmine-core": "~4.4.0", "jasmine-spec-reporter": "~7.0.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "protractor": "7.0.0", "ts-node": "~10.9.1", "typescript": "4.9.4" } }

and argon.scss

`/*!

=========================================================

Argon Dashboard PRO Angular - v1.4.0
Product Page: https://www.creative-tim.com/product/argon-dashboard-pro-angular
Coded by www.creative-tim.com

=========================================================

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/

// Bootstrap functions @import "bootstrap/functions"; @import "bootstrap/mixins";

// Argon functions @import "custom/functions"; @import "custom/variables"; @import "bootstrap/variables";

// Argon mixins @import "custom/mixins";

// Bootstrap components @import "bootstrap/root"; @import "bootstrap/reboot"; @import "bootstrap/type"; @import "bootstrap/images"; @import "bootstrap/code"; @import "bootstrap/grid"; @import "bootstrap/tables"; @import "bootstrap/forms"; @import "bootstrap/buttons"; @import "bootstrap/transitions"; @import "bootstrap/dropdown"; @import "bootstrap/button-group"; @import "bootstrap/input-group"; @import "bootstrap/custom-forms"; @import "bootstrap/nav"; @import "bootstrap/navbar"; @import "bootstrap/card"; @import "bootstrap/breadcrumb"; @import "bootstrap/pagination"; @import "bootstrap/badge"; @import "bootstrap/jumbotron"; @import "bootstrap/alert"; @import "bootstrap/progress"; @import "bootstrap/media"; @import "bootstrap/list-group"; @import "bootstrap/close"; @import "bootstrap/modal"; @import "bootstrap/tooltip"; @import "bootstrap/popover"; @import "bootstrap/carousel"; @import "bootstrap/utilities"; @import "bootstrap/print";

// Argon components @import "custom/components"; @import "custom/utilities"; @import "custom/vendors";

// Angular changes @import "angular/dropdowns"; @import "angular/navbar-vertical"; @import "angular/progressbar"; @import "angular/plugin-ngx-chips"; @import "angular/ngx-toastr"; @import "angular/mobius1-selectr"; @import "angular/tooltips"; @import "angular/plugin-ngx-datatable"; @import "angular/navbar-vertical"; @import "angular/vector-map";

@import "ngx-toastr/toastr-bs4-alert"; `

finally run :

npm install --legacy-peer-deps

Regards,

Zaki

creativetimofficial / ct-argon-dashboard-pro-angular