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

Improve this question
4
  • 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. Commented Jan 22, 2020 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. Commented Jan 22, 2020 at 23:03
  • Can you show what you see if you inspect the "App ready" bar? It might give hints of where to look. Commented Jan 22, 2020 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. Commented Feb 5, 2020 at 17:57

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Wow. Maybe the Angular CLI team should consider replacing the default "Project is running at localhost:4200/webpack-dev-server" message in the console with the base URL, sans webpack-dev-server. Thanks!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.