I am trying to use the angular 16

General
1

I created the angular environment in misc workspace but no use I am getting this error
[webpack-dev-server] Invalid Host/Origin header
logger @ index.js:493
(anonymous) @ index.js:634
error @ index.js:156
error @ index.js:307
(anonymous) @ socket.js:62
client.onmessage @ WebSocketClient.js:45
wrapFn @ zone.js:755
invokeTask @ zone.js:402
runTask @ zone.js:173
invokeTask @ zone.js:483
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
Show 13 more frames
Show lessUnderstand this error
index.js:485 [webpack-dev-server] Disconnected!
index.js:485 [webpack-dev-server] Trying to reconnect…

2

Hi @Sharabu_Gnanesh - are you using our Angular template or building a blank workspace and creating an Angular project via the CLI?

3

Thanks for responding
I created angular project in empty work space

4

Can you help us by giving us more details on

  1. The exact command you used to generate the angular app
  2. The command you run or specified in dev.nix to gete the error you posted

Without further details,. “Invalid Host/Origin header” typically can be bypassed with --disable-host-check flag when you run run “npm run” or “ng serve” when you are developing locally.

5

thanks for responding
this is my blank repo Blank - Project IDX (google.com)

# 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.go
    # pkgs.python311
    # pkgs.python311Packages.pip
    # pkgs.nodejs_20
    # pkgs.nodePackages.nodemon
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      # "vscodevim.vim"
    ];
    # Enable previews
    previews = {
      enable = true;
      previews = {
        # web = {
        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
        #   # and show it in IDX's web preview panel
        #   command = ["npm" "run" "dev"];
        #   manager = "web";
        #   env = {
        #     # Environment variables to set for your server
        #     PORT = "$PORT";
        #   };
        # };
      };
    };
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created
      onCreate = {
        # Example: install JS dependencies from NPM
        # npm-install = "npm install";
        # Open editors for the following files by default, if they exist:
        default.openFiles = [ ".idx/dev.nix" "README.md" ];
      };
      # Runs when the workspace is (re)started
      onStart = {
        # Example: start a background task to watch and re-build backend code
        # watch-backend = "npm run watch-backend";
      };
    };
  };
}

this is my nix file

and i installed using “npm install -g @angular/cli@16”
and I run using “npm start”

6

One more thing,

After running npm install -g @angular/cli@16, what command did you use to generate the angular project files before running npm start?

7

ng new app-name
Alex