4

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

raychz
  • 1,085
  • 1
  • 8
  • 24
  • Have you checked your `src/index.html` and `src/app/app.component.html` to see if the status bar might be hiding in there? I haven't seen this before, and have started a lot of Angular Projects from the CLI. – Nathan Clement Jan 22 '20 at 23:00
  • Yes, just checked both of those files and don't see anything related to this. I just added the output of `ng version` to my question. – raychz Jan 22 '20 at 23:03
  • Can you show what you see if you inspect the "App ready" bar? It might give hints of where to look. – Nathan Clement Jan 22 '20 at 23:18
  • Hi - frustrating I know but you are doing nothing wrong and it is easy to solve without inspecting the rendered page :) see my answer below. All the best. – Mike Goodstadt Feb 05 '20 at 17:57

1 Answers1

3

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

Mike Goodstadt
  • 345
  • 3
  • 12
  • Wow. Maybe the Angular CLI team should consider replacing the default "Project is running at http://localhost:4200/webpack-dev-server/" message in the console with the base URL, sans webpack-dev-server. Thanks! – raychz Feb 06 '20 at 18:54