将 Angular Playground 安装到 Ionic 4 项目后的空白页面

Question

我有一个使用 Ionic CLI 创建的基本 Ionic 4 项目。然后我使用以下命令添加运行 Angular 游乐场：

ng add angular-playground

之后，我将样式的路径固定为 angular.json 中的主项目：

"styles": [
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  }
],

现在，当我运行 npm run playground 并在浏览器中导航到 http://localhost:4201 时，我只能看到一个空白页面。没有任何编译或浏览器控制台错误。

为什么我在页面上看不到任何内容？

Answer 1

问题出在您作为 global.scss 的一部分包含的 Ionic 样式表的规则中。如果您在浏览器中检查 body 元素，您会看到它附加了以下规则：

html:not(.hydrated) body {
    display: none;
}

这是一个与 hydration 相关的规则，在使用 Angular 游乐场时没有任何作用，因此可以通过添加第三个样式表 src/playground.scss 来简单地覆盖它，其中包含以下内容：

html:not(.hydrated) body {
  display: block;
}

然后将此添加到 Playground 项目 angular.json 中已有的项目之上：

"styles": [
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  },
  {
    "input": "src/playground.scss"
  }
],

现在，如果您重新启动 npm run playground，它应该会呈现带有组件选择器的正常 Playground 页面。

我也在 a blog post.

中对此进行了更全面的介绍

Answer 2

在我的例子中，.hydrated 规则如下：

html:not(.hydrated) body {
    display: none;
}

已添加，因为离子模块在最顶部 app.module.ts 中丢失，导致黑屏。

要解决此问题，请确保在 app.module.ts:

中正确导入 IonicModule

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

import { IonicModule } from '@ionic/angular'; // import the ionic module from here

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,

        IonicModule.forRoot() // import IonicModule forRoot()

    ],
    providers: [
        AppAuthGuard
    ],
    exports: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

将 Angular Playground 安装到 Ionic 4 项目后的空白页面

Empty page after installing Angular Playground into an Ionic 4 project

sass

angular

ionic4