I found one scenario where images are getting listed directly under the dist folder after ng build
.
I have created a sample angular app. Below are the details. Even the image is there inside the assets folder. It is getting copied directly under dist. This way, its getting duplicated which also causes build size increase.
How to avoid this? I need the image only under assets folder. Outside should be clean. Please help if anyone faced a similar issue.
project structure
angular.json
"myapp": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/myapp",
"sourceRoot": "projects/myapp/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myapp",
"index": "projects/myapp/src/index.html",
"main": "projects/myapp/src/main.ts",
"polyfills": "projects/myapp/src/polyfills.ts",
"tsConfig": "projects/myapp/tsconfig.app.json",
"aot": true,
"assets": [
"projects/myapp/src/favicon.ico",
"projects/myapp/src/assets"
],
"styles": [
"projects/myapp/src/styles.scss",
"projects/myapp/src/assets/theme/victor-theme/style.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/myapp/src/environments/environment.ts",
"with": "projects/myapp/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
CSS
.tree_status_ico:disabled {
opacity: 0.6;
background-size: 18px;
background: transparent url(assets/img/agg_status.svg) no-repeat center;
}
after ng build
I created a test project using Angular 12 and it seems that it does have the same issue. But I found a solution that should work:
background: transparent url("/assets/img/agg_status.svg") no-repeat center;