Base solution for your next web application
Open Closed

Style not loaded when publish to IIS #12666

User avatar
0
nssiva created

Sir

The application was published using the "npm run publish" command and deployed to IIS successfully; however, the CSS/styles are not being loaded

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @nssiva

    Could you please share how you published the dist folder when publishing your Angular application to IIS? Did you follow the steps outlined in this documentation?

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    nssiva created

    yes @oguzhanagir

    As in the documentation, i did and published

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @nssiva

    Since the application is running but the styles are not loaded on IIS, the Angular build is probably OK. This usually happens because the CSS/assets are not being served from the expected IIS path, the wrong publish folder was copied, or IIS is rewriting/static-serving those files incorrectly.

    Could you please verify the following steps in order?

    1. Open the deployed site in the browser and press F12.
    2. Go to the Network tab and refresh the page with cache disabled.
    3. Filter by CSS and check the failed stylesheet requests.
    4. Please confirm the exact requested URL and status code for the CSS files, for example 404, 403, or 200 with text/html content.
    5. Check that you copied the actual Angular build output to the IIS site root. In recent Angular versions, the final files may be under dist/browser, not only dist. The IIS physical path must directly contain files like index.html, styles.*.css, main.*.js, and the assets folder.
    6. Make sure the Angular web.config file is also copied to the IIS site root together with index.html.
    7. If the Angular app is hosted under a virtual directory/application path, for example https://domain.com/myapp/, publish it with the correct base href:
    npm run publish -- --base-href /myapp/
    1. If the Angular app is hosted directly under the domain root, for example https://domain.com/, the default <base href="/" /> is correct.
    2. Confirm that IIS has Static Content enabled and that .css, .js, .json, .woff, and .woff2 files are served correctly. The ASP.NET Zero Angular web.config already includes the required MIME mappings for .json, .woff, and .woff2.
    3. Clear the browser cache or test in an incognito window after redeploying.

    The most important checks are the Network tab result and the IIS physical folder content. If the CSS request returns 404, it is usually a wrong folder or base href problem. If it returns 200 but the response is index.html/text/html, IIS rewrite is catching the CSS request because the file is not found at that path.

    Please share the CSS request URL/status from the Network tab and a screenshot/list of the IIS physical folder contents if the issue continues.

    Best regards

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    nssiva created

    Thanks oguzhanagir

    It is working now. Thanks

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet