Some context
I have an Angular application, using Material Angular. I just migrated from Angular 13 to 15 using Angular CLI (I did go through the Angular 14 update as a step, of course). I also migrated all legacy components to mdc components. I haven't touched our angular.json configurations, build configuration (dev or prod), or tsconfig.json (or any tsconfig.app.json) if that matters.
The problem
Some of my styles are broken when I build my app using production configurations. Upon inspection, it seems that a big chunk for the styles outputed by the Angular build process broke because they've been appended to a background-image uri string. Here is the start of the string (I replaced the context with BaseProjectUrl) :
background-image: url(/BaseProjectUrl/Client/data:image/svg+xml,%3Csvg version='1.1' xmlns='http:/www.w3.org/2000/svg' xmlns:xlink='http:/www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(89, 89, 89, 0.25)'/%3E%3C/svg%3E")}.app-light-theme .mat-mdc-progress-bar
Upon building the app in non-production mode, I get the correct background-image:
background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(89, 89, 89, 0.25)'/%3E%3C/svg%3E")
It seems clear that since this is a data uri of a svg in the background-image, sass/angular/whatever in the build process shouldn't be changing it, since it is not a path, but data. Here the opening quote is now missing, a base path has been applied (/BaseProjectUrl/Client/), so not only does this background image is now broken, the opening quote at the end makes the majority of the css no reachable, and therefor it's not rendering.
Important note : this is generated styles from material angular, not even a background-image I'm importing myself. I think the problem is not with this specific Angular Material style, but that this is the first of many URI strings that are mistaken for URL that must be appended with our BaseProjectUrl and encoded differently (I noted the difference in the http:// becoming http:/).
What I am expecting
I am expecting the styles to be rendered in production mode as they are in dev mode. Implying I'm expecting background-image with data uri not to be touched in the build process.
I've done researches, and I couldn't find someone in the same context as me having the same problem. I've stubbled upon some clues as to where the problem might arise
- https://github.com/webpack-contrib/sass-loader#problems-with-url
- It would seem that resolve-url-loader is the package responsible, and Angular 15 does use it (v 5.0.0)
Since I can't find anyone in the same context as my project having this issue, I have a feeling that maybe a combination of configurations in my project might be the real root of the problem. Here is what my angular.json looks like:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"project1": {
"root": "",
"sourceRoot": "Project1Name/src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../Project1Name.Web/Client",
"resourcesOutputPath": "Client/assets/images",
"index": "Project1Name.Web/src/index.html",
"main": "Project1Name.Web/src/main.ts",
"tsConfig": "Project1Name.Web/src/tsconfig.app.json",
"assets": [
"Project1Name.Web/src/assets",
[...] a bunch of inputs with respective outputs [...]
],
"styles": [
"Project1Name.Web/src/scss/main.scss"
],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules/@angular"
]
},
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "20kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "Project1Name.Web/src/environments/environment.ts",
"with": "Project1Name.Web/src/environments/environment.prod.ts"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project1:build"
},
"configurations": {
"production": {
"browserTarget": "project1:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "project1:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "Project1Name.Web/src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "./polyfills.ts",
"scripts": [],
"styles": [
"Project1Name.Web/src/scss/main.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules/@angular"
]
},
"assets": [],
"tsConfig": "Project1Name.Web/src/tsconfig.spec.json"
}
}
}
},
"project2": {
Another project configs, mostly the same: it as the same styles problem and same dependencies
},
"lib1": {
"root": "lib/Lib1Name",
"sourceRoot": "lib/Lib1Name/src",
"projectType": "application",
"architect": {
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "lib/Lib1Name/src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "./polyfills.ts",
"tsConfig": "lib/Lib1Name/src/tsconfig.spec.json",
"scripts": [],
"styles": [],
"stylePreprocessorOptions": {
"includePaths": [
"./node_modules/@angular"
]
},
"assets": []
}
}
}
},
"lib2": {
same as lib1
},
},
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
And since maybe it would be useful, here is the tsconfig.json and tsconfig.app.json for Project 1
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"experimentalDecorators": true,
"lib": [
"dom",
"es2018"
],
"strict": true,
"strictPropertyInitialization": false,
"mapRoot": "./src",
"module": "es2020",
"moduleResolution": "node",
"outDir": "./dist/out-tsc",
"skipLibCheck": true,
"sourceMap": true,
"target": "ES2022",
"typeRoots": [
"./node_modules/@types"
],
"baseUrl": "./",
"paths": {
"*": [
"./node_modules/*",
"./node_modules/@types/*"
],
"lib2": [
"./lib/lib2/src/lib/public_api.ts"
],
"lib1": [
"./lib/lib1/src/lib/public_api.ts"
],
"@angular/*": [
"./node_modules/@angular/*"
],
"rxjs": [
"node_modules/rxjs"
],
"rxjs/*": [
"node_modules/rxjs/*"
]
},
"useDefineForClassFields": false
}
}
tsconfig.app.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"typeRoots": [
"./node_modules/@types"
],
"paths": {
"*" : ["../node_modules/*", "../node_modules/@types/*"],
"@types/*" : ["../node_modules/@types/*"],
"lib2" : ["../../lib/lib2/src/lib/public_api.ts"],
"lib1" : ["../../lib/lib1/src/lib/public_api.ts"],
"@angular/*": ["../node_modules/@angular/*"]
}
},
"files": [
"main.ts",
"../../polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
Thank you in advance for the answers, if needed I can provide more configuration details.