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

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

我使用 Angular CLI 创建了一个新项目,并在我的应用程序顶部看到一个状态栏,上面写着“App Ready”。我在 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


enter image description here

最佳答案

“问题”是您的页面正在 Dev Server 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 - 删除 Angular 开发服务器中的 "App Ready"状态栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59869405/

相关文章:

Angular 6 FormGroup.disable() 方法不适用于我的模板驱动的 NgForm

Angular 5 HttpInterceptor this.interceptor.intercept 不是一个函数

css - 在 Less 样式表中使用 Angular 组件名称与生成的 DOM 不匹配

angular - 为什么我的单元测试在 Chrome 中通过而在 PhantomJS 中失败?

node.js - 如何创建从服务器到所有通知授予用户的网络推送通知?

webpack - 如何使用 webpack 4 和 mini-css-extract-plugin 生成 css 文件?

javascript - 将组件直接渲染到模板中

Angular7 放置区 : click event not triggered

javascript - MultiMain 错误无法解决目录 webpack 问题

javascript - 根据环境配置基本 URL