删除 Angular 开发服务器中的“应用就绪”状态栏答案

【问题标题】：Remove "App Ready" status bar in Angular dev server删除 Angular 开发服务器中的“应用就绪”状态栏
【发布时间】：2020-05-09 04:26:13
【问题描述】：

我使用 Angular CLI 创建了一个新项目，并在我的应用顶部看到一个状态栏，上面写着“应用就绪”。我在 Angular CLI 文档中找不到有关此标题栏的任何内容，并且在开发过程中可能会分散注意力。我该如何摆脱它？

$ 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

【问题讨论】：

您检查过src/index.html 和src/app/app.component.html 看看状态栏是否可能隐藏在其中吗？我以前没有见过这个，并且已经从 CLI 启动了很多 Angular 项目。
是的，刚刚检查了这两个文件，没有看到任何与此相关的内容。我刚刚将ng version 的输出添加到我的问题中。
如果您检查“应用就绪”栏，您能否展示您看到的内容？它可能会提示您在哪里查看。
嗨 - 令人沮丧我知道，但你没有做错任何事，无需检查呈现的页面就很容易解决:) 请参阅下面的答案。一切顺利。

标签： angular angular-cli webpack-dev-server angular-cli-v8

【解决方案1】：

“问题”是您的页面正在开发服务器 iframe 中加载。如 Webpack 文档中所述，it can be specified that it should be loaded inline。这个配置可以是saved in a JS file in the root of Angular（现在不需要使用ng eject）。

也就是说，最简单的解决方案是直接转到 iFrame 之外的 url，即将浏览器位置栏中的 URL 更改为：

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

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

http://localhost:4200/index.html

如果使用路由器，它将重定向到基本路由 - 因此您可以访问任何没有状态栏的路由，例如：

http://localhost:4200/home

【讨论】：

哇。也许 Angular CLI 团队应该考虑将控制台中默认的“项目正在localhost:4200/webpack-dev-server 运行”消息替换为基本 URL，无 webpack-dev-server。谢谢！