删除 Angular 开发服务器中的 "App Ready" 状态栏

Question

我使用 Angular CLI 创建了一个新项目，并在我的应用程序顶部看到一个状态栏，上面写着 "App Ready"。我在 Angular CLI 文档中找不到关于此 header 栏的任何信息，在开发过程中它可能会让人分心。我该如何摆脱它？

$ 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

Answer 1

'problem' 是您的页面正在 Dev Server iframe 中加载。如 Webpack 文档中所述，it can be specified that it should be loaded inline. This config can be （现在无需使用 ng eject）。

也就是说，最简单的解决方案 是直接转到 url 而不是 iFrame，即将浏览器地址栏中的 URL 从:

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

到与您的项目相关的路径，例如：

http://localhost:4200/index.html

如果使用路由器，它将重定向到基本路由 - 这样您就可以在没有状态栏的情况下访问任何路由，例如：

http://localhost:4200/home

删除 Angular 开发服务器中的 "App Ready" 状态栏

Remove "App Ready" status bar in Angular dev server

webpack-dev-server

angular-cli

angular

angular-cli-v8