When changing the html-File of an Angular component from a string to another, the browser shows no changes, connected to localhost. It still displays the old string although this string can not be found anymore in the project. When opening the html code from within IntelliJ the changes are displayed.
I tried to disable caching on disk and memory in the browser and tried private mode as well (Firefox). I also tried to delete the dist-folder and rebuilt the project as well as npm cache clear --force
Angular Version:
Angular CLI: 12.2.14
Node: 14.18.0
Package Manager: npm 6.14.15
OS: win32 x64
Angular: 12.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.5
@angular-devkit/build-angular 12.0.5
@angular-devkit/core 12.0.5
@angular-devkit/schematics 12.2.14
@angular/cli 12.2.14
@ngtools/webpack 13.0.4
@schematics/angular 12.2.14
rxjs 6.6.7
typescript 4.2.4
The angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"landingpage": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/landingpage",
"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.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css"
],
"scripts": ["src/vendor/jitsi/external_api.js"],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "5mb"
}
]
},
"test": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "landingpage:build",
"proxyConfig": "proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "landingpage:build:production"
},
"test": {
"browserTarget": "landingpage:build:test"
},
"dev": {
"browserTarget": "landingpage:build:dev"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "landingpage: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": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/saga-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "landingpage:serve"
},
"configurations": {
"production": {
"devServerTarget": "landingpage:serve:production"
}
}
}
}
}
},
"defaultProject": "landingpage"
}
The package.json
{
"name": "landingpage",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build-dev": "ng build --configuration=dev",
"build-test": "ng build --configuration=test --base-href=/viper/",
"build-prod": "ng build --prod --base-href=/viper/",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"-": "0.0.1",
"@angular/animations": "^12.0.5",
"@angular/common": "~12.0.5",
"@angular/compiler": "~12.0.5",
"@angular/core": "~12.0.5",
"@angular/forms": "~12.0.5",
"@angular/platform-browser": "~12.0.5",
"@angular/platform-browser-dynamic": "~12.0.5",
"@angular/router": "~12.0.5",
"@ngtools/webpack": "^13.0.4",
"g": "^2.0.1",
"primeflex": "^3.0.1",
"primeicons": "^4.1.0",
"primeng": "^12.0.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.0.5",
"@angular/cli": "^12.2.14",
"@angular/compiler-cli": "~12.0.5",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"angular-cli": "^1.0.0-beta.28.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}
Try running:
ng serve --live-reload
Or:
ng serve --watch=true