【问题标题】:Angular Routing- I have no errors but I cannot do the routing. I see white screen and no errors角度路由 - 我没有错误,但我无法进行路由。我看到白屏并且没有错误
【发布时间】:2022-01-25 02:11:33
【问题描述】:

我正在尝试学习角度路由。我可以看到白屏并且没有错误。我想从应用程序路由到主页。

这里是代码。

对于应用程序:

app-routing.module.ts

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

const routes: Routes = [


  {
    path:'',
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule)
  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.html

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

app.component.scss

//Empty

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {


  constructor() {

    
  }
}

对于主页:

home-routing.ts

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



const routes: Routes = [
  {
      path:' ',
      component:HomePage

  }
];

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

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';



@NgModule({

  imports: [
    CommonModule,

    IonicModule,
    HomePageRoutingModule,
    FormsModule
  ],
    declarations: [HomePage],
})
export class HomeModule { }

home.page.html

<p> Home Page Works!<p>

home.page.scss

//Empty

home.page.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {


  constructor() {

    
  }
}

运行它后,我在控制台中看不到任何错误。浏览器是一个白色的空白屏幕。 它应该显示“主页作品”。

我正在使用 Ionic 6 和 Angular 版本。我也在用电容。那么,你能告诉我为什么它没有运行吗?我正在挠头几个小时。谢谢

【问题讨论】:

  • 尝试删除主页路径中的white-space

标签: angular ionic-framework angular-routing angular-router


【解决方案1】:

我可以在您的 home-routing.ts 文件中看到一个错误。 您的 routes 变量中的 path 属性包含 HomePage 组件的两个额外空格,而在 app-routing 模块中则不同。您需要删除这两个多余的空格。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-18
    • 1970-01-01
    • 2012-02-27
    • 1970-01-01
    相关资源
    最近更新 更多