Open Closed

Performance Issue: CSS Flash/Delay During Initial Load in Angular Startup Template #9175


User avatar
0
i.atta created

Dear Team We created a startup template (layered with Angular) and we noticed there is a delay in loading CSS, and it takes too much time How can we avoid this delay ? Also, are there any documents that describe how to change the login page to be in angular instead of redirecting to the backend ?


18 Answer(s)
  • User Avatar
    0
    i.atta created

    Any update, please

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hello, apologies for the delayed response.

    We created a startup template (layered with Angular) and we noticed there is a delay in loading CSS, and it takes too much time How can we avoid this delay?

    I couldn’t reproduce the issue on my end. Could you please confirm whether the problem still persists? If so, kindly share additional details such as the ABP version you're using, your operating system, and the browser in question. If possible, you can also share a reproducible example of your project by emailing it to sumeyye.kurtulus@volosoft.com so we can investigate further.

    Also, are there any documents that describe how to change the login page to be in Angular instead of redirecting to the backend?

    Yes, you can implement a fully client-side login using the Resource Owner Password Flow. You’ll find more details in the official documentation here: https://abp.io/docs/latest/framework/ui/angular/account-module

  • User Avatar
    0
    i.atta created

    Hello It is the same as this issue but in Angular https://abp.io/support/questions/6126/CSS-delay-loading-and-the-UI-would-flash

  • User Avatar
    0
    i.atta created

    Hi sumeyye your quick reply will be highly appreciated

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    I couldn’t reproduce the issue on my end. Could you please confirm whether the problem still persists? If so, kindly share additional details such as the ABP version you're using, your operating system, and the browser in question. If possible, you can also share a reproducible example of your project by emailing it to sumeyye.kurtulus@volosoft.com so we can investigate further.

    Hello, I understand the issue can be frustrating. I'm still unable to replicate the problem on my side. For reference, I generated the application using the App (layered) template in the latest version of ABP Studio.

    In the meantime, I recommend updating the style bundle configuration in your angular.json file as shown below. Ensure the inject property is set to true for proper inclusion during build:

    "styles": [
      ...
      {
        "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
        "inject": true,
        "bundleName": "layout-bundle"
      },
      {
        "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
        "inject": true,
        "bundleName": "layout-bundle.rtl"
      }
      ...
    ],
    

    Let me know if the issue still occurs after making this change.

  • User Avatar
    0
    i.atta created

    Hello After we set inject to true "styles": [ ... { "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css", "inject": true, "bundleName": "layout-bundle" }, { "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css", "inject": true, "bundleName": "layout-bundle.rtl" } ... ],

    The website is no longer open on mobile devices, We will send you the link through your email so you can check it

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Thank you for providing extra details, however I cannot produce the same problem on my end.

  • User Avatar
    0
    i.atta created

    Hello You are using web in the video , try to open it from your mobile device

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    I have also tried on a mobile device. My device is android and I used my default browser for testing.

  • User Avatar
    0
    i.atta created

    Hi This is on iPhone Safari & ,Chrome same issue even after clearing all cached data

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    We noticed that the request to layout-bundle.css is returning a response with Content-Type: text/html instead of text/css. This usually means the file isn’t found, and the server is falling back to the default page (e.g., index.html).

    Could you please check whether anything in your deployment setup might be redirecting unknown paths (like layout-bundle.css) to the Angular app's entry point?

  • User Avatar
    0
    i.atta created

    Hello, We are deploying our Angular project to ,Azure App Service and in the pipeline, we build the project using yarn build:prod and we run the applications using pm2 serve /home/site/wwwroot --no-daemon --spa

    No other configurations

    Please note that if we set inject to false, it will work on all devices, but the CSS delay will back again

    "styles": [ ... { "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css", "inject": false, "bundleName": "layout-bundle" }, { "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css", "inject": false, "bundleName": "layout-bundle.rtl" } ... ],

  • User Avatar
    0
    i.atta created

    Any Update please?

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Thank you for sharing those additional details. I understand that this issue is blocking your progress.

    You can continue using the "inject": false setting, especially since Safari is having trouble loading the stylesheet directly. As a final suggestion, you may consider preloading the styles in index.html as shown below:

    <link rel="preload" href="layout-bundle.css" as="style" onload="this.rel='stylesheet'" />
    <noscript>
      <link rel="stylesheet" href="layout-bundle.css" />
    </noscript>
    

    Please let us know if you need any further assistance. Thank you for your cooperation.

  • User Avatar
    0
    i.atta created

    Unfortunately, the issue is still the same on ,Safari even after adding the styles in the index.html

    <link rel="preload" href="layout-bundle.css" as="style" onload="this.rel='stylesheet'" /> <noscript> <link rel="stylesheet" href="layout-bundle.css" /> </noscript>

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Thank you for your follow-up. I’ve reviewed the configuration I mentioned, and I wasn’t able to reproduce the issue on my side.

    To better understand and investigate the problem, could you kindly share a minimal, reproducible example of your project? You can refer to this guide for details: How to create a Minimal, Reproducible Example.

    Once ready, please feel free to send it to sumeyye.kurtulus@volosoft.com, and we’ll be glad to take a closer look.

  • User Avatar
    0
    i.atta created

    Hi Sumeyye,

    Thank you for the follow-up.

    The issue was caused by referencing stylesheet files (e.g., layout-bundle.css) directly in index.html, while the actual build output contained hashed filenames due to Angular’s outputHashing setting in angular.json.

    Since the file names didn't match, the browser fell back to loading index.html instead of the CSS, resulting in a MIME type error in Safari.

    After disabling outputHashing, the files are generated without hashes, and the issue is resolved.

    Would disabling outputHashing have any implications on browser caching, and if so, what’s the best practice to handle this scenario while keeping caching efficiency?

    "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "2.5mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "100kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" },

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    I apologize for getting back to you this late.

    You don't need to disable all output hashing. Instead, you can selectively control what gets hashed by configuring the outputHashing property in angular.json. For example, you could set "outputHashing": "media" to only hash media files while keeping your CSS and JS bundles with predictable names.

    The available options are:

    • "all": Hash all files (bundles, media, CSS)
    • "media": Hash only media files (images, etc.)
    • "bundles": Hash only JavaScript bundles
    • "none": Disable hashing completely

    This selective approach lets you maintain predictable filenames for directly referenced assets while still benefiting from cache busting where needed. Just make sure your HTML references match the actual filenames generated during the build process.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on June 23, 2025, 11:58