I'm upgrading Angular 12 and VS 2019 .net Framework 4.7.2/C# application to Angular 13 (It was originally written in Angular 6 and upgraded from there) First, it is taking too long to compile...like 45 min or so After wasting a lot of time, I have realized that it starts taking too long to compile when I add references in angular.json to bootstrap, popper, and jquery
Second, after it compiles, it does not create vendor.js. Is this something new in Angular 13 or am I missing something?
Third problem is that when I run the application, bootstrap dropdowns do not work, which I'm using in the menus or wherever I'm using toggle features like expand/collapse. From what I understand that is due to popper.js. Therefore, I removed reference to popper.js, and instead replaced bootstrap and popper.js with bootstrap.bundle.min.js. But none of the issues have resolved. Here is my package.json
{
"name": "Myproj",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "~13.3.0",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0",
"@angular/localize": "^13.3.0",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"@progress/kendo-angular-buttons": "^11.4.0",
"@progress/kendo-angular-common": "^11.4.0",
"@progress/kendo-angular-dateinputs": "^11.4.0",
"@progress/kendo-angular-dialog": "^11.4.0",
"@progress/kendo-angular-dropdowns": "^11.4.0",
"@progress/kendo-angular-excel-export": "^11.4.0",
"@progress/kendo-angular-grid": "^11.4.0",
"@progress/kendo-angular-icons": "^11.4.0",
"@progress/kendo-angular-inputs": "^11.4.0",
"@progress/kendo-angular-intl": "^11.4.0",
"@progress/kendo-angular-l10n": "^11.4.0",
"@progress/kendo-angular-label": "^11.4.0",
"@progress/kendo-angular-navigation": "^11.4.0",
"@progress/kendo-angular-pdf-export": "^11.4.0",
"@progress/kendo-angular-popup": "^11.4.0",
"@progress/kendo-angular-progressbar": "^11.4.0",
"@progress/kendo-angular-tooltip": "^11.4.0",
"@progress/kendo-angular-treeview": "^11.4.0",
"@progress/kendo-angular-upload": "^11.4.0",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.4",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-svg-icons": "^1.0.0",
"@progress/kendo-theme-default": "^6.2.0",
"ajv": "^8.8.2",
"ajv-keywords": "^5.1.0",
"angular2-notifications": "^12.0.0",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"protractor": "^7.0.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.6.7",
"tslib": "^2.3.0",
"xlsx": "^0.14.5",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.3.0",
"@angular-eslint/builder": "13.3.0",
"@angular-eslint/eslint-plugin": "13.3.0",
"@angular-eslint/eslint-plugin-template": "13.3.0",
"@angular-eslint/schematics": "^13.3.0",
"@angular-eslint/template-parser": "13.3.0",
"@angular/cli": "~13.3.0",
"@angular/compiler-cli": "~13.3.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.27.1",
"@typescript-eslint/parser": "5.27.1",
"eslint": "^8.17.0",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.2"
}
}
And angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MyProj": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"allowedCommonJsDependencies": [
"xlsx",
"rxjs-compat",
"rxjs/BehaviorSubject",
"rxjs/add/observable/throw",
"rxjs/add/operator/catch",
"rxjs/Observable",
"rxjs/operators/map",
"rxjs/operators/tap"
],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "8kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "Hierarchy:build:production"
},
"development": {
"browserTarget": "MyProj:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "MyProj:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css",
"inject": true
},
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"defaultProject": "MyProj",
"cli": {
"defaultCollection": "@angular-eslint/schematics"
}
}
It is not throwing any errors in the console using the Chrome dev tools. Please advise!
