Search code examples
angularangular-cliwebpack-dev-serverangular-cli-v8

Remove "App Ready" status bar in Angular dev server

I used the Angular CLI to create a new project and am seeing a status bar at the top of my app that says "App Ready". I can't find anything about this header bar in the Angular CLI docs, and it can be pretty distracting during development. How do I get rid of it?

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.23
Node: 12.14.1
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

enter image description here

Solution

  • The 'problem' is that your page is loading within the Dev Server iframe. As explained in the Webpack documentation, it can be specified that it should be loaded inline. This config can be saved in a JS file in the root of Angular (now without needing to use ng eject).

    That said, the simplest solution is to just go to the url outwith the iFrame directly i.e. change the URL in the browser location bar from:

    http://localhost:4200/webpack-dev-server/

    to a path relevant to your project e.g.:

    http://localhost:4200/index.html

    Which, if using the router, will redirect to the base route - so you can just access any route without the status bar e.g.:

    http://localhost:4200/home