Angular 路由 - 我没有错误,但我无法进行路由。我看到白屏,没有错误
Angular Routing- I have no errors but I cannot do the routing. I see white screen and no errors
我正在尝试学习 angular 路由。我可以看到白屏,并且 errors.I 不想从应用路由到主页。
这是代码。
对于应用程序:
应用-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() {
}
}
首页:
首页-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 版本。我也在用电容。那你能告诉我为什么不是运行ning吗?我挠头几个小时。谢谢
我在你的 home-routing.ts 文件中发现了一个错误。 routes 变量中的路径 属性 包含主页组件的两个额外空格,而在 app-routing 模块中它是不同的。您需要删除这两个多余的空格。