Published: November 25 2022
Angular CLI - Auto launch browser on localhost after app start with ng serve
This is a super quick tutorial to show how to automatically open the browser on localhost after starting an app with Angular CLI.
Pass the --open option to ng serve
Run the following Angular CLI command to start the application and automatically launch it in a new browser window.
ng serve --open
Ng serve command output
Here's the output from the command when I ran it on an Angular 14 project, it automatically opened in Chrome (my default browser) after compiling.
> ng serve --open
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.39 MB |
polyfills.js | polyfills | 318.10 kB |
styles.css, styles.js | styles | 210.36 kB |
main.js | main | 38.35 kB |
runtime.js | runtime | 6.56 kB |
| Initial Total | 2.95 MB
Build at: 2022-11-23T02:38:22.490Z - Hash: 98d10ea69f118837 - Time: 10496ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.
Install or update Angular CLI
If you need to install or update Angular CLI, execute the following npm command.
npm install -g @angular/cli
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!
More Angular Posts
- Add Google AdSense to a Single Page App - React, Angular, Vue, Next etc...
- Angular 15/16 Free Course #8 - Dockerize App with Nginx
- Angular 15/16 Free Course #7 - Migrate to Standalone Components and Functional Interceptors
- Angular 15/16 Free Course #6 - User Management (CRUD) Section
- Angular 15/16 Free Course #5 - Alerts & Home Page
- Angular 15/16 Free Course #4 - Registration Form & Service Methods
- Angular 15/16 Free Course #3 - Login Form, Authentication & Route Guard
- Angular 15/16 Free Course #2 - Add Routing & Multiple Pages
- Angular 15/16 Free Course #1 - Create Base Project Structure
- .NET 7.0 + Postgres CRUD API with Angular Front End App
- Angular 15 Auth Boilerplate - Sign Up with Verification, Login and Forgot Password
- Angular Template-Driven Forms - Validation on Submit
- Angular Reactive Forms - Validation on Submit
- Angular - Add Bearer Token Authorization Header to HTTP Request
- Angular - Access Environment Variables
- Angular Template-Driven vs Reactive Forms
- Angular - Multiple Field (Cross Field) Validation with Reactive Forms
- Angular - Multiple Field (Cross Field) Validation with Template-Driven Forms
- Angular + Template-Driven Forms - Email Validation Example
- Angular + Reactive Forms - Email Validation Example
- Getting the Bootstrap 5 Modal and Angular 15 to play nicely together
- Angular + Template-Driven Forms - Date Validation Example
- Angular Date Pipe - Format Date as mm/dd/yyyy or dd/mm/yyyy in Angular
- Angular 14 Authentication with Node.js JWT API
- Angular 14 Authentication with .NET 6.0 (ASP.NET Core) JWT API
- Angular 14 - Facebook Authentication Tutorial with Example
- Angular 14 - Modal Popup (Dialog) Tutorial with Example
- Angular + Reactive Forms - Date Validation Example
- Angular 14 - Dynamic Reactive Forms Example
- Angular 14 - Role Based Authorization Tutorial with Example
- Angular 14 - CRUD Example with Reactive Forms
- Angular 14 - Template-Driven Form Validation Example
- Angular - Trigger ngOnChanges in a Child Component for Array or Object
- Angular 14 - Paging and Sorting Table Data Example & Tutorial
- Angular - Execute an init function before app startup with an Angular APP_INITIALIZER
- Angular 14 - JWT Authentication with Refresh Tokens Example & Tutorial
- Angular - Logout on 401 Unauthorized or 403 Forbidden HTTP Response with Interceptor
- Angular 14 - Redirect to Previous URL after Login with Auth Guard
- Angular 14 - User Registration and Login Example & Tutorial
- Angular - Detect Route Change (Location Change) Event in Angular
- Angular 14 - Alert (Toaster) Notifications Tutorial & Example
- Angular + Node.js - Connect an Angular App to a Node.js API
- Angular 14 - Reactive Forms Validation Example
- Angular + .NET - Connect an Angular App to a .NET API
- Angular 14 - Communicating Between Components with RxJS Observable & Subject
- Angular 14 - JWT Authentication Example & Tutorial
- Angular - Fix for Argument of type 'string | null' is not assignable to parameter of type 'string'
- Angular CLI - Install or Update the latest version of Angular CLI
- Angular - HTTP Request Error Handling with the HttpClient
- Angular - HTTP Interceptor to Set Auth Header for API Requests if User Logged In
- Angular 11 - CRUD Example with Reactive Forms
- Angular - HTTP DELETE Request Examples
- Angular + Template-Driven Forms - Required Checkbox Example
- Angular - HTTP PUT Request Examples
- Angular + Facebook - How to use the Facebook SDK in an Angular App
- Angular - Display a list of items with ngFor
- Angular 10 - Combined Add/Edit (Create/Update) Form Example
- Angular - Master Details CRUD Example
- RxJS - Auto Unsubscribe from Observable after first value
- Angular + Reactive Forms - Required Checkbox Example
- Angular + npm - How to Publish an Angular Component to npm
- Angular - Setup Development Environment
- Angular + .NET Core + SQL on Azure - How to Deploy a Full Stack App to Microsoft Azure
- Angular + Node.js on AWS - How to Deploy a MEAN Stack App to Amazon EC2
- Angular - HTTP POST Request Examples
- Angular 8 - Router Animation Tutorial & Example
- Angular - HTTP GET Request Examples
- Angular + Webpack - How to add global CSS styles to Angular with webpack
- npm - JW Angular Pagination Component