Debug Angular 8 .net core spa, css files appearing directly from src/assets/css, not dist/assets/css, and scss not compiling

Question

.Net Core 3.1 (upgraded from 2.2) Angular 8 (upgraded from 7) SPA running on VS 2019 (previously on VS 2017).

My theme .css files were obtained from either node_modules/@angular/material/prebuilt-themes or built from their .scss files, as specified in the angular.json, exerpt:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
        ],
        "styles": [
            /* Everything that will get compiled into the styles.css bundle */
            "src/assets/css/styles.css",
            /* Angular material pre-built themes - bring over from node_modules/@angular/material/prebuilt-themes */
            {
                "input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                "bundleName": "assets/css/angular-material-themes/deeppurple-amber",
                "inject": false /* i.e. don't add to head of index.html automatically */
            },
            ...
            /* Our Angular material themes - build from their .scss files in src/styles/angular-material-themes  */
            {
                "input": "src/styles/angular-material-themes/indigo-slateblue.scss",
                "bundleName": "assets/css/angular-material-themes/indigo-slateblue",
                "inject": false
            },
            ...
        ],

The Angular SPA is run automatically on debugging the app in VS, relevant excerpts from Startup.cs:

    public void ConfigureServices(IServiceCollection services) {

        services.AddControllers();
        services.AddHttpContextAccessor();
        services.AddSpaStaticFiles(configuration => {
            configuration.RootPath = "ClientApp/dist";
        });
        ...

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IHttpContextAccessor httpContextAccessor, IMapper autoMapper) {
        ...
        app.UseSpa(spa => {
            spa.Options.SourcePath = "ClientApp";
            if (env.IsDevelopment()) {
                spa.UseAngularCliServer(npmScript: "start");

            }
        });

My theme css files are being served by a service, similar to the Medium article (essentially, getting the theme name and then loading it by adding a new <link> to the <head>).

Am getting the following in my Chrome console:

Refused to apply style from 'https://localhost:44396/assets/css/angular-material-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

which is a result of not finding the .css file and loading index.html instead (tested by trying to load it directly in another tab). When it runs the files in dist/assets/css/angular-material-themes are not updated, and I've found that the files being served are direct from src/assets/css. As the angular material theme files are coming from elsewhere they are not loading at all. I can manually C&P an old version of the .css files into src/assets/css, restart the app, and they load fine. Further, until the upgrade to Angular 8 this was all working beautifully.

Any help to get this to work during debug in VS2019 with Angular 8?

monty · Accepted Answer · 2020-04-03 03:53:50Z

0

So, the .scss files were being compiled to .js and .js.map files (no idea where they were being placed though), so adding the following to the build options got the .css files as output:

"build": {
    ...
    "options": {
      ...
      "extractCss": true,
      "styles": [
        ...
      ]
    }
},

As per Juri's article Dynamically Load CSS with the Angular CLI, the section titled "Hint: Lazy load in development".

So this is now apparently working, both the standard angular material theme .css files, and my own .scss theme files are now getting compiled. I still have no idea where the css output files are getting placed, so if anyone knows that please share!

edited Apr 3, 2020 at 3:53

answered Apr 3, 2020 at 3:48

monty

1,59015 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Debug Angular 8 .net core spa, css files appearing directly from src/assets/css, not dist/assets/css, and scss not compiling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related