只要在应用程序中出现路由路径和组件声明,就会出现 Angular7 空白页面-routes.module.ts
Angular7 Blank page appears whenever route path and component declaration occurs in the app-routes.module.ts
我正在设置一个新的 angular 应用程序,每当我在 app-routing.module.ts 文件中指定我的路由时,页面就会呈现空白。
const routes: Routes = [
{path: '/dashboard', component: DashboardComponent},
{path: '/login', component: LoginComponent},
];
但是,如果我将其注释掉,它就会正确呈现。
const routes: Routes = [
// {path: '/dashboard', component: DashboardComponent},
// {path: '/login', component: LoginComponent},
];
我的 app-routing.moduel.ts 文件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
{path: '/dashboard', component: DashboardComponent},
{path: '/login', component: LoginComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const appRouteComponents = [
LoginComponent,
DashboardComponent,
UserProfileComponent,
RegisterComponent
];
我已经在 app.module.ts 文件中导入了 appRouteComponents
这是app.module.ts文件
import { MaterialDesignModule } from './material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppRoutingModule, appRouteComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
appRouteComponents,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialDesignModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
尝试删除路由中的 /,如下所示。
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'login', component: LoginComponent },
];
我正在设置一个新的 angular 应用程序,每当我在 app-routing.module.ts 文件中指定我的路由时,页面就会呈现空白。
const routes: Routes = [
{path: '/dashboard', component: DashboardComponent},
{path: '/login', component: LoginComponent},
];
但是,如果我将其注释掉,它就会正确呈现。
const routes: Routes = [
// {path: '/dashboard', component: DashboardComponent},
// {path: '/login', component: LoginComponent},
];
我的 app-routing.moduel.ts 文件
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
{path: '/dashboard', component: DashboardComponent},
{path: '/login', component: LoginComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const appRouteComponents = [
LoginComponent,
DashboardComponent,
UserProfileComponent,
RegisterComponent
];
我已经在 app.module.ts 文件中导入了 appRouteComponents
这是app.module.ts文件
import { MaterialDesignModule } from './material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppRoutingModule, appRouteComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
appRouteComponents,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialDesignModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
尝试删除路由中的 /,如下所示。
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'login', component: LoginComponent },
];