Маршруты Angular 9, дающие пустые страницы без ошибок

Я только что обновился до Angular 9 и создал несколько дочерних маршрутов с ленивой загрузкой. До этих изменений мой проект и мои маршруты работали отлично, но после этих двух изменений только мой HomeComponent маршрут (путь: "") работает правильно, но если я попытаюсь щелкнуть ссылки на другие маршруты (с помощью routerLink), он просто не будет ' t перенаправить, и если я вручную напишу маршрут в браузере, у меня будет пустая страница без ошибок.

Подводя итог: проект и маршруты работали нормально, но после того, как я создал маршруты ленивой загрузки 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 {
}



В качестве примера покажу модуль и модуль маршрутизации одного из маршрутов, которые не работают:

about-us-module.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 и дочернюю маршрутизацию, и я просто выполнил те же шаги, что и с упомянутым проектом, но обнаружил описанную проблему.

Редактировать

Я только что удалил ленивую загрузку и модули / модули маршрутизации для каждого маршрута, и приложение снова работает. Таким образом, очевидно, что проблема вызвана функцией отложенной загрузки.


person Jose9988    schedule 26.05.2020    source источник
comment
не похоже, что я вижу проблему, просто хочу помочь (: эти два пути: {path: '', pathMatch: 'full', component: HomeComponent} и {path: '', component: HomeComponent} кажутся дубликатами. Полагаю, достаточно одного {path: '', component: HomeComponent}   -  person IAfanasov    schedule 26.05.2020
comment
Кроме того, вы можете попробовать записать с помощью вкладки производительности инструмента chrome dev код, который запускается при нажатии, и изучить его. это долгая мысль.   -  person IAfanasov    schedule 26.05.2020
comment
Прочтите При каких обстоятельствах я могу добавить к своему вопросу «срочно» или другие похожие фразы, чтобы получить более быстрые ответы? - Резюмируя, можно сказать, что это не идеальный способ обращения к волонтерам и, вероятно, контрпродуктивен для получения ответов. Пожалуйста, воздержитесь от добавления этого к своим вопросам.   -  person halfer    schedule 26.05.2020
comment
Вы можете это попробовать? const routes: Routes = [{путь: 'о', компонент: AboutUsComponent}]; И loadChildren для AboutModule в роутере приложения   -  person Marc    schedule 26.05.2020
comment
@Marc, что вы имеете в виду под: loadChildren для AboutModule в роутере приложений. У меня уже есть маршрут loadChildren в моем app-routing.module.ts   -  person Jose9988    schedule 26.05.2020
comment
Ты прав. Удалите первые две строки в маршрутизации: delete: {path: '', pathMatch: 'full', component: HomeComponent}, // маршрут не указан {path: '', component: HomeComponent},   -  person Marc    schedule 26.05.2020


Ответы (2)


Удалите первые два домашних маршрута (HomeComponent).

В app-routing.module вы можете включить отладку маршрута с помощью:

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

Возможно, вы сможете удалить {initialNavigation: 'enabled', preloadingStrategy: PreloadAllModules}.

Ваш код выглядит нормально. Я надеюсь, что отладка даст вам больше информации.

AppRoutingModule следует использовать только в AppModule. Не разрешается иметь ссылку на AppRoutingModule в одном из ленивых подмодулей.

Импортируйте BrowserModule, BrowserAnimationsModule и AppRoutingModule в AppModule.

Старайтесь избегать больших общих модулей. См .: Ленивая загрузка Angular - разделение кода NgModules с помощью Webpack

person Marc    schedule 26.05.2020
comment
После удаления повторяющегося BrowserModule отладка маршрута дает мне: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.). - person Jose9988; 26.05.2020
comment
в одном из ваших дополнительных модулей маршрутизатора есть RouterModule.forRoot (...), я думаю - person Marc; 26.05.2020
comment
Есть только один RouterModule.forRoot, и он находится в app-routing.module.ts. Вроде как импортируется дважды - person Jose9988; 26.05.2020
comment
Я имею в виду, что у меня есть один AppRoutingModule в моем общем модуле, но я не могу удалить, потому что в противном случае он выдаст ошибку - person Jose9988; 26.05.2020
comment
Почему ? AppRoutingModule следует использовать только в AppModule. - person Marc; 26.05.2020
comment
Ой, хорошо, мои модули должны импортировать из appmodule или sharedmodule? - person Jose9988; 26.05.2020
comment
Импортируйте BrowserModule, BrowserAnimationsModule и AppRoutingModule в AppModule. Импортируйте все остальные модули, где он используется. Импортируйте AppRoutingModule только один раз (в AppModule). Я не друг большого SharedModule. - person Marc; 26.05.2020
comment
Хорошо, после использования sharedmodule в дочерних маршрутах теперь я могу использовать маршруты, если я ввожу маршрут непосредственно в браузер, но ссылка routerLink сейчас не работает - person Jose9988; 26.05.2020
comment
ссылка routerLink сейчас не работает? Значит что? отслеживание? - person Marc; 26.05.2020
comment
Я имею ввиду что показывает 0 ошибок даже при трассировке маршрута. Когда я наводю указатель мыши на элемент навигационной панели, который перенаправит меня на маршрут about, он показывает курсор по умолчанию, а не указатель. Но если я нажимаю на одну ссылку с помощью href или вручную перехожу к маршруту, он работает. Так что я, возможно, должен что-то сделать с импортом RouterModule. - person Jose9988; 26.05.2020
comment
Мне пришлось добавить RouterModule к SharedModule и использовать SharedModule во всех других моих модулях и ленивых компонентах, таких как AboutUsModule. Так что сейчас это работает. Спасибо! - person Jose9988; 26.05.2020

Отключите опцию Ivy и проверьте. это работает со мной

"enableIvy": false,

person Fahd Allebdi    schedule 29.01.2021