custom css url is loading after styles.css - angular 10

Question

Please refer my angular.json configuration below

"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": []
          }

In index.html, I am loading custom css and append the css in Dom element. Expected result : It should apply only custom.css but it is adding styles.css first and then it is adding custom.css.. For example : in styles.css i have logo as sample1.jpeg and custom.css have logo as sample2.jpeg. I can see first it show sample1.jpeg and then sample2.jpeg. How to fix this issue?

In index.html , i have resourcesToLoad to order the loading but it is not honoring ordering of loading files

 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
        }];

Code to add custom css in the code

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));
              }
          }

score 0 · Answer 1 · answered Oct 13 '20 at 18:42

We fixed my adding below code in index.html and changed order on css loading part. During loading we check boolean is true then we will check custom css is enabled or not. If enabled then we apply custom css otherwise go with base css

    var resourcesToLoad = [
        {
            filename: "styles.css",
            elementType: "link",
            loadOrder: 1,
            requiresCustomCSS: true
        },
        {
            filename: "runtime-es2015.js",
            elementType: "script",
            loadOrder: 1
        },
        {
            filename: "polyfills-es2015.js",
            elementType: "script",
            loadOrder: 2
        },
        {
            filename: "main-es2015.js",
            elementType: "script",
            loadOrder: 3
        }
    ];



        if (resource.elementType === 'link' && resource.requiresCustomCSS) {
            // This is done so that lag between loading the base css 
            // and custom css is as little as possible.
            var customElement = getCustomCSSElement();
            const head = document.getElementsByTagName('head')[0];
            document.body.appendChild(baseCSS_Element);
            customElement && document.body.appendChild(custom_CSS_Element);
        }
        else {
            document.body.appendChild(baseCSS_Element);
        }

custom css url is loading after styles.css - angular 10

1 Answers1