Angular Material Theme not working in Web Preview

General
1

I started using the Angular Template in Google IDX and wanted to add the @angular/material to use theming.

image

Is there something i have to change in the dev.nix file?

# To learn more about how to use Nix to configure your environment
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      "angular.ng-template"
    ];
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        npm-install = "npm install --no-audit --prefer-offline";
      };
      # To run something each time the environment is rebuilt, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = {
      enable = true;
      previews = {
        web = {
          command = ["npm" "run" "start" "--" "--port" "$PORT" "--host" "0.0.0.0" "--disable-host-check"];
          manager = "web";
        };
      };
    };
  };
}

If I use ng serve in the IDX Terminal, the theme is working, but the preview window in the IDX still ignore all theming options in the styles.scss

2

ng serve output
image

3

Hi, to add npm packages, you don’t need to update the dev.nix file. You can run npm install --save @angular/material the same way you would do in any npm package.

4

Thank you for your reply, but that has nothing to do with my question.

The preview ignores the material theming!
If i start with ng serve another server on another port the theming is working.

5

When you open the preview in a new browser window, does the theming work? In your browser DevTools, are there any errors? (My assumption would be that it doesn’t work)

It seems like there needs to be a build step to ensure the theming changes are transpiled into the final HTML/CSS/JS bundle. The ng serve command handles that, but our default refresh and reload don’t.

Thanks,
Kirupa

6

Hi @kirupac
I swear yesterday the theme wasn’t working as you can see from my screenshot. :scream:
I opened idx and the toolbar appeared in dark mode… so :sweat_smile:
Either something changed overnight or it was some kind of caching thing? :thinking:

So this problem is “solved”
But thank you for your time

1 Like
7

I’ll still flag this as something for us to look into, for it should “just work” or at least tell you why it didn’t.

Glad it got sorted out for you, though! Thanks for reporting this! :slight_smile:

1 Like