angular - Ionic 4 命名为 ion-router-outlet 内容错误，带有延迟加载的选项卡布局

Question

我正在使用 ionic@rc(Ionic 4) 和 @ionic/lab@rc(Ionic Lab)。我使用 tabs starter 模板创建了一个新项目。在我修改项目以延迟加载 home/about/contact 模块之前，一切都运行良好。

正在显示选项卡，但在离子实验室中服务时页面的其余部分只是黑屏（如果我使用离子服务提供应用程序，则为白屏）。模块正在正确延迟加载，因为在第一次导航到每个选项卡时会调用模块 ctor，并且控制台中没有错误。有没有人偶然发现这个问题？任何建议将不胜感激。谢谢！

离子实验室截图

角.json：

{
  "name": "tabstest",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ionic serve",
    "build": "ionic build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "6.0.7",
    "@angular/core": "6.0.7",
    "@angular/forms": "6.0.7",
    "@angular/http": "6.0.7",
    "@angular/platform-browser": "6.0.7",
    "@angular/platform-browser-dynamic": "6.0.7",
    "@angular/router": "6.0.7",
    "@ionic-native/core": "5.0.0-beta.13",
    "@ionic-native/splash-screen": "5.0.0-beta.13",
    "@ionic-native/status-bar": "5.0.0-beta.13",
    "@ionic/angular": "4.0.0-alpha.10",
    "@ionic/lab": "^1.0.0-rc.11",
    "@ionic/ng-toolkit": "1.0.0-rc.11",
    "@ionic/schematics-angular": "1.0.0-rc.11",
    "core-js": "^2.5.3",
    "rxjs": "6.2.1",
    "semver": "^5.5.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
    "@angular/compiler": "6.0.7",
    "@angular/compiler-cli": "6.0.7",
    "@angular/language-service": "6.0.7",
    "@angular-devkit/architect": "0.7.0-rc.1",
    "@angular-devkit/build-angular": "0.7.0-rc.1",
    "@angular-devkit/core": "0.7.0-rc.1",
    "@angular-devkit/schematics": "0.7.0-rc.1",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.5.2",
    "codelyzer": "~4.4.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2"
  },
  "description": "An Ionic project"
}

关于路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutPage } from './about.page';

const routes: Routes = [
  {
    path: '', component: AboutPage, outlet: 'about'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AboutRoutingModule { }

关于页面模块：

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AboutPage } from './about.page';
import { AboutRoutingModule } from './about-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    AboutRoutingModule
  ],
  declarations: [AboutPage]
})
export class AboutPageModule {
  constructor() {
    console.log('AboutPageModule loaded.');
  }
}

关于.page.html：

<ion-header>
  <ion-toolbar>
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>About us</ion-list-header>
    <ion-item>
      <ion-icon name="logo-ionic" slot="start"></ion-icon>
     About Ionic!
    </ion-item>
  </ion-list>
</ion-content>

关于页面：

import { Component } from '@angular/core';

@Component({
  selector: 'app-page-about',
  templateUrl: 'about.page.html',
  styleUrls: ['about.page.scss']
})
export class AboutPage {}

主页和联系人页面遵循相同的模式，因此为简洁起见，我将省略它们。

标签页路由模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        loadChildren: '../home/home.module#HomePageModule'
      },
      {
        path: 'about',
        outlet: 'about',
        loadChildren: '../about/about.module#AboutPageModule'
      },
      {
        path: 'contact',
        outlet: 'contact',
        loadChildren: '../contact/contact.module#ContactPageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

标签页模块：

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs.router.module';

import { TabsPage } from './tabs.page';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {
  constructor() {
    console.log('TabsPageModule loaded.');
  }
}

tabs.page.html:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

tabs.page.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {}

应用路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

应用模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    console.log('AppModule loaded.');
  }
}

app.component.html：

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

app.component.ts：

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

标签： angulartypescriptionic-framework