Angular 9路由显示空白页面，没有错误信息

Question

Angular 9路由显示空白页面，没有错误信息

angularangular-ui-routerangular9angular-routerlinkangular-ivy

3

我刚刚升级到Angular 9并使用懒加载创建了一些子路由。在这些更改之前，我的项目和路线都运行良好，但是在这两个更改之后，只有我的HomeComponent路由（路径：“”）能正常工作；但是，如果我尝试点击链接到其他路由（使用routerLink），它就不会重定向，如果我手动在浏览器中输入该路由，则会给我一个空白页面而没有错误。

总结一下：该项目和路由之前都能正常工作，但是在创建Angular懒加载路由之后，唯一能够正常工作的路由是默认路由（HomeComponent），如果我尝试点击链接进入其他路由，什么也不会发生，如果我手动在浏览器中输入这些路由，则会得到一个空白页面且没有错误。

app.module.ts


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    SharedModule,
    HomeModule,
    Mugan86GoogleAnalyticsModule.forRoot({analyticsId: 'XXX', showLog: false}),
    AnimateOnScrollModule.forRoot(),
    BrowserModule.withServerTransition({appId: 'serverApp'}),
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
  ],
  providers: [
    {provide: ErrorHandler, useClass: RollbarErrorHandler},
    {provide: RollbarService, useFactory: rollbarFactory}
  ],
  bootstrap: [AppComponent],
  exports: [
    SharedModule,
    HomeModule,
  ]
})
export class AppModule {
}

shared.module.ts

@NgModule({
  declarations: [
    FooterComponent,
    LoadingBallsComponent,
    NavbarComponent,
    ScrolledToDirective,
    TrackScrollDirective,
    TopArrowComponent,
    SnackbarComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CommonModule,
    FilterModule,
    ReactiveFormsModule,
    FormsModule,
    RecaptchaModule,
    AnimateOnScrollModule
  ],
  exports: [
    BrowserModule,
    CommonModule,
    FooterComponent,
    LoadingBallsComponent,
    NavbarComponent,
    FilterModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    RecaptchaModule,
    AnimateOnScrollModule,
    ScrolledToDirective,
    TrackScrollDirective,
    TopArrowComponent,
    SnackbarComponent,
    RouterModule,
    BrowserAnimationsModule]
})
export class SharedModule {
}

home.module.ts

@NgModule({
  declarations: [
    CharacteristicsComponent,
    ContactComponent,
    HeaderComponent,
    MainDescriptionComponent,
    InfluencerPromotionComponent,
    SocialMediaComponent,
    BoxItemComponent,
    BandIconComponent,
    ServicesComponent,
  ],
  imports: [
    SharedModule,
  ],
  exports: [
    CharacteristicsComponent,
    ContactComponent,
    HeaderComponent,
    MainDescriptionComponent,
    InfluencerPromotionComponent,
    SocialMediaComponent,
    BoxItemComponent,
    BandIconComponent,
    ServicesComponent
  ]
})
export class HomeModule { }

app-routing.module.ts

export const routes: Routes = [
  {path: '', pathMatch: 'full', component: HomeComponent}, // no route specified
  {path: '', component: HomeComponent},
  {path: 'sobre-nosotros', loadChildren: () => import('./components/about-us/about-us.module').then(m => m.AboutUsModule)},
  {
    path: 'preguntas-frecuentes',
    loadChildren: () => import('./components/common-questions/common-questions.module').then(m => m.CommonQuestionsModule)
  },
  {path: 'sitemap', loadChildren: () => import('./components/sitemap/sitemap.module').then(m => m.SitemapModule)},
  {path: '**', component: HomeComponent}, // fallback route (not found - 404)
];

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

作为一个例子，我将展示其中一个路由的模块和路由模块，这些路由不起作用：

关于我们模块.ts

@NgModule({
  declarations: [AboutUsComponent],
  imports: [
    AppModule,
    CommonModule,
    AboutUsRoutingModule,
  ]
})
export class AboutUsModule { }

about-us-routing.module.ts

const routes: Routes = [{path: '', component: AboutUsComponent}];

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

额外信息

tsconfig.json（angularCompilerOptions）

  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }

angular.json (aot)

"aot": true,

package.json（用于查看版本信息）

"dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/forms": "~9.1.9",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/platform-server": "~9.1.9",
    "@angular/router": "~9.1.9",
    "@angular/service-worker": "~9.1.9",
    "@josee9988/filter-pipe-ngx": "^1.1.0",
    "@nguniversal/express-engine": "^9.1.1",
    "animate.css": "^3.7.2",
    "emailjs-com": "^2.4.1",
    "express": "^4.15.2",
    "mugan86-ng-google-analytics": "^1.1.1",
    "ng-recaptcha": "^5.0.0",
    "ng2-animate-on-scroll": "^2.0.0",
    "rollbar": "^2.16.2",
    "rxjs": "~6.5.5",
    "tslib": "^1.13.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@angular/language-service": "~9.1.9",
    "@nguniversal/builders": "^9.1.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.9",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"

我有另一个项目使用了Ivy和子路由，我按照之前提到的项目做了同样的步骤，但是发现了描述中提到的问题。

编辑

我刚刚移除了懒加载以及每个路由的模块/路由模块，然后应用程序再次正常工作。所以明显问题是由于懒加载特性引起的。

- Jose9988

1

不是我看到了问题，只是想帮忙 (: 这两个路径：{path: '', pathMatch: 'full', component: HomeComponent} 和 {path: '', component: HomeComponent} 看起来是重复的。我认为一个{path: '', component: HomeComponent}应该就足够了。 - IAfanasov

此外，您可以尝试使用Chrome开发工具的性能选项卡记录在单击时执行的代码并进行探索。这是一个冒险的想法。 - IAfanasov

2

请阅读在什么情况下我可以在我的问题中添加“紧急”或其他类似短语，以便获得更快的答案？ - 总结是这不是一个理想的方式来处理志愿者，并且可能会适得其反，导致无法获得答案。请不要在您的问题中添加此内容。 - halfer

你能试试这个吗？const routes: Routes = [{path: 'about', component: AboutUsComponent}]; 以及在应用程序路由中加载AboutModule。 - Marc

@Marc，你说的“在应用程序路由器中为AboutModule加载子组件”是什么意思？我已经在我的app-routing.module.ts文件中有了loadChildren路由。 - Jose9988

你是对的。请在路由中删除前两行：delete: {path: '', pathMatch: 'full', component: HomeComponent}, // 没有指定路由 {path: '', component: HomeComponent} - Marc

2个回答

0

禁用Ivy选项并检查。这对我有用。

"enableIvy": false,

- Fahd Allebdi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc · Accepted Answer

请删除前两个Home-Routes（HomeComponent）。

在app-routing.module中，您可以使用以下方式启用路由调试：

@NgModule({
imports: [
      RouterModule.forRoot(routes, {enableTracing: true}),

也许您可以删除 {initialNavigation: 'enabled'，preloadingStrategy: PreloadAllModules}。

您的代码看起来很好。希望调试能给你更多信息。

AppRoutingModule 应该仅在 AppModule 中使用。不允许在其中一个惰性加载的子模块中引用 AppRoutingModule。

在 AppModule 中导入 BrowserModule、BrowserAnimationsModule 和 AppRoutingModule。

尽量避免使用大型共享模块。参见：Lazy Loading Angular - Code Splitting NgModules with Webpack