Sample use the browserTarget option of ng serve?

Question

I would like to automatically open Chrome when building my Angular apps. However, I can't use -o because my default browser is Safari (I don't wish to change the default browser).

It seems that --browserTarget is all that I need, but when I run something like:

ng serve --browserTarget=Chrome

The CLI throws an error:

Schema validation failed with the following errors:
    Data path ".browserTarget" should match patter ".+:.+(:.+)?"

I can't seem to find any documentation or samples on how to use this option to rectify that issue.

Thanks in advance, Wayne

Ramify

I am also looking for this configuration but it appears that browserTarget is to generate the build for specific browser. github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/… – Jarry

Just for reference: angular.io/cli/serve – Maillot

Answer 1

Found some information on this from an issue on the repo for angular-cli. It is used to specify which build configuration to use while serving.

From this comment

The serve command doesn't completely know how to build it, it just knows how to serve it.

Usually there's only one build, but since a target can have multiple configurations, you can specify that you want to serve that particular configuration of the build.

Where "browserTarget": "next-app:build" means "I want to serve projects->next-app with the default options" and "browserTarget": "next-app:build:production" means "I want to serve projects->next-app with the default options merged with the production config".

Sedgewinn

Answer 2

I managed to choose the browser that will be opened, but it wasn't with browserTarget.

Here’s a detailed explanation. All changes are made in the package.json file...

This doesn’t work:

{
    // ...
    "scripts": {
        "start": "ng serve && start http://localhost:4200"
    },
    // ...
}

ng serve never finishes, which means that start will never start. To run ng serve and also start the browser, you need to install two dependencies. Here’s the step-by-step process:

1. Install the dependencies:

npm install npm-run-all wait-on --save-dev

npm-run-all is a library that allows running multiple processes simultaneously, while wait-on monitors the URL to start the browser when it’s ready.

2. Add the desired browser commands to scripts and modify start to run the processes simultaneously:

// ...
"config": {
    "serve-url": "http://localhost:4200"
},
"scripts": {
    // ...
    "ng-serve": "ng serve",
    "start": "run-p ng-serve open-in-chrome",
    "open-in-browser": "ver && (wait-on %npm_package_config_serve-url% && start %npm_package_config_serve-url%) || (wait-on $npm_package_config_serve-url && open $npm_package_config_serve-url)",
    "open-in-edge": "ver && (wait-on %npm_package_config_serve-url% && start msedge %npm_package_config_serve-url%) || (wait-on $npm_package_config_serve-url && open $npm_package_config_serve-url)",
    "open-in-chrome": "ver && (wait-on %npm_package_config_serve-url% && start chrome %npm_package_config_serve-url%) || (wait-on $npm_package_config_serve-url && open chrome $npm_package_config_serve-url)",
    "open-in-firefox": "ver && (wait-on %npm_package_config_serve-url% && start firefox %npm_package_config_serve-url%) || (wait-on $npm_package_config_serve-url && open firefox $npm_package_config_serve-url)",
    "open-in-opera": "ver && (wait-on %npm_package_config_serve-url% && start opera %npm_package_config_serve-url%) || (wait-on $npm_package_config_serve-url && open opera $npm_package_config_serve-url)",
    // ...
},
// ...

The ver command, as far as I know, only exists on Windows. This means that if it exists it will run the first part with the Windows variables, otherwise it will use the Linux/Mac variables.

3. Now just modify the start script to open-in-xxx like:

"start": "run-p ng-serve open-in-firefox"

Maybe there are ways to refactor this code with variables or cross-env

sources: npm npm-run-all npm wait-on

Inaptitude

Answer 3

I searched for hours for the answer to this question and didn't find much, aside from your question. I'm an Angular noob, and not qualified to answer, but this question has been viewed 650 times so far, and nobody else has provided an answer yet. So, at least when I forget it and come back searching for a solution again in a year, I'll find the following better-than-nothing answer.

It seems that the --browserTarget flag is a red herring. The solution I implemented is to use the open-cli package from here: open-cli --
Installed as follows:

> npm install --global open-cli

And then, in the "scripts": {...} section of the package.json file (in the root folder of my Angular project), I replaced this line:

"start": "ng serve",

with this line:

"start": "open-cli http://localhost:4200 -- 'chrome' && ng serve",

Note the above is for use on a Windows machine. The use of 'chrome' here is platform-dependent. Use 'google-chrome' on Linux, 'google chrome' on a Mac, and 'chrome' on Windows.

Then from the command line, I issue the following command to start the server & open my (non-default) Chrome browser:

> npm start

There are a couple of drawbacks with this approach for which I hope people will gently point out and suggest improvements in the comments (or in another answer):

1. I've hard-coded the port, which could/should surely be pulled from elsewhere dynamically.
2. The browser opens before the page is done compiling, and thus starts with a "Connection Refused Error", which could cause confusion. With patience, the browser automatically refreshes once the build is complete and the Angular server starts, but it takes several seconds.

Capo

This would actually work w/out the 2nd issue if you just put ng serve && before the open-cli command. I bet the port could be a variable somehow as well. But that's not too bad of an idea. – Ramify