我刚刚升级到Angular 9并使用懒加载创建了一些子路由。 在这些更改之前,我的项目和路线都运行良好,但是在这两个更改之后,只有我的
总结一下:该项目和路由之前都能正常工作,但是在创建Angular懒加载路由之后,唯一能够正常工作的路由是默认路由(HomeComponent),如果我尝试点击链接进入其他路由,什么也不会发生,如果我手动在浏览器中输入这些路由,则会得到一个空白页面且没有错误。
app.module.ts
作为一个例子,我将展示其中一个路由的模块和路由模块,这些路由不起作用:
关于我们模块.ts
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和子路由,我按照之前提到的项目做了同样的步骤,但是发现了描述中提到的问题。
编辑
我刚刚移除了懒加载以及每个路由的模块/路由模块,然后应用程序再次正常工作。所以明显问题是由于懒加载特性引起的。
{path: '', pathMatch: 'full', component: HomeComponent}
和{path: '', component: HomeComponent}
看起来是重复的。我认为一个{path: '', component: HomeComponent}
应该就足够了。 - IAfanasov