Below is the configuration from my angular.json file:
"options": {
"outputPath": "dist/example",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"extractCss": true,
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/stylings/main.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/stylings"
]
},
"scripts": []
}
The issue I am facing is that in index.html, custom css is not being applied correctly. It first applies styles.css and then custom.css. How can I resolve this?
I tried using resourcesToLoad in index.html to order the loading of files but it is not working as expected.
var resourcesToLoad = [
{
filename: "styles.css",
elementType: "link",
loadOrder: 1
},
{
filename: "runtime.js",
elementType: "script",
loadOrder: 1
},
{
filename: "polyfills.js",
elementType: "script",
loadOrder: 2
},
{
filename: "scripts.js",
elementType: "script",
loadOrder: 2
},
{
filename: "main.js",
elementType: "script",
loadOrder: 3
}];
Here is the code snippet for adding custom css:
var domElement = undefined;
if(CSS_ADDRESS){
domElement = document.createElement("link");
var loadStartTime = (new Date()).getTime();
domElement.rel = "stylesheet";
domElement.href = CSS_ADDRESS ;
domElement.onerror = function () {
console.log("Load error for file: " + filename);
}
domElement.onload = function () {
var loadEndTime = (new Date()).getTime();
console.log('Custom CSS loaded in (ms): ' + (loadEndTime - loadStartTime));
}
}