【发布时间】：2020-12-05 14:15:31
【问题描述】：
我开发了一个 Angular 应用程序。当我使用 ng build --prod 为生产和托管进行构建时，我发现在除主页之外的移动视图上，在所有路由中 它都显示 404 Page not Found。 我我无法弄清楚为什么会这样。
APP-ROUTING-MODULE.TS 代码
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules, Router } from '@angular/router';
//import { GalleryPageComponent } from './components/pages/gallery-page/gallery-page.component';
//import { EventsPageComponent } from './components/pages/events-page/events-page.component';
import { ErrorPageComponent } from './components/pages/error-page/error-page.component';
import { CaseStudiesThreeColumnsPageComponent } from './components/pages/case-studies-three-columns-page/case-studies-three-columns-page.component';
//import { HomepageOneComponent } from './components/pages/homepage-one/homepage-one.component';
//import { HomepageTwoComponent } from './components/pages/homepage-two/homepage-two.component';
//import { HomepageThreeComponent } from './components/pages/homepage-three/homepage-three.component';
import { HomepageFourComponent } from './components/pages/homepage-four/homepage-four.component';
import { AboutPageComponent } from './components/pages/about-page/about-page.component';
//import { TeamPageComponent } from './components/pages/team-page/team-page.component';
import { ServicesPageComponent } from './components/pages/services-page/services-page.component';
import { ServicesDetailsPageComponent } from './components/pages/services-details-page/services-details-page.component';
import { ContactPageComponent } from './components/pages/contact-page/contact-page.component';
import { BlogPageComponent } from './components/pages/blog-page/blog-page.component';
//import { BlogDetailsPageComponent } from './components/pages/blog-details-page/blog-details-page.component';
import { CaseStudiesDetailsPageComponent } from './components/pages/case-studies-details-page/case-studies-details-page.component';
//import { FaqPageComponent } from './components/pages/faq-page/faq-page.component';
//import { EventsDetailsPageComponent } from './components/pages/events-details-page/events-details-page.component';
import { CoursesPageComponent } from './components/pages/courses-page/courses-page.component';
import { CoursesDetailsPageComponent } from './components/pages/courses-details-page/courses-details-page.component';
import { ApplicationStateService } from './application-state.service';
const mobile_routes:Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomepageFourComponent},
{path: 'about-us', component: AboutPageComponent},
{path: 'services', component: ServicesPageComponent},
{path: 'services/:id', component: ServicesDetailsPageComponent},
//{path: 'gallery', component: GalleryPageComponent},
{path: 'courses', component: CoursesPageComponent},
{path: 'courses/:id', component: CoursesDetailsPageComponent},
//{path: 'events', component: EventsPageComponent},
//{path: 'events-details', component: EventsDetailsPageComponent},
{path: 'case-studies', component: CaseStudiesThreeColumnsPageComponent},
{path: 'case-studies/:id', component: CaseStudiesDetailsPageComponent},
{path: 'error', component: ErrorPageComponent},
//{path: 'faq', component: FaqPageComponent},
{path: 'blog', component: BlogPageComponent},
//{path: 'blog-details', component: BlogDetailsPageComponent},
{path: 'contact', component: ContactPageComponent},
{path: '**', component: ErrorPageComponent}
]
const Dekstop_routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomepageFourComponent},
{path: 'about-us', component: AboutPageComponent},
{path: 'services', component: ServicesPageComponent},
{path: 'services/:id', component: ServicesDetailsPageComponent},
//{path: 'gallery', component: GalleryPageComponent},
{path: 'courses', component: CoursesPageComponent},
{path: 'courses/:id', component: CoursesDetailsPageComponent},
//{path: 'events', component: EventsPageComponent},
//{path: 'events-details', component: EventsDetailsPageComponent},
{path: 'case-studies', component: CaseStudiesThreeColumnsPageComponent},
{path: 'case-studies/:id', component: CaseStudiesDetailsPageComponent},
{path: 'error', component: ErrorPageComponent},
//{path: 'faq', component: FaqPageComponent},
{path: 'blog', component: BlogPageComponent},
//{path: 'blog-details', component: BlogDetailsPageComponent},
{path: 'contact', component: ContactPageComponent},
{path: '**', component: ErrorPageComponent}
];
//{useHash: true}
@NgModule({
imports: [RouterModule.forRoot(Dekstop_routes,{preloadingStrategy: PreloadAllModules})],
exports: [RouterModule]
})
export class AppRoutingModule {
public constructor(private router: Router,
private applicationStateService: ApplicationStateService) {
if (applicationStateService.getIsMobileResolution()) {
router.resetConfig(mobile_routes);
}
}
}
APP.MODULE.TS 代码：-
import { BrowserModule } from '@angular/platform-browser';
从'@angular/core'导入{ NgModule }；
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GalleryPageComponent } from './components/pages/gallery-page/gallery-page.component';
import { EventsPageComponent } from './components/pages/events-page/events-page.component';
import { ErrorPageComponent } from './components/pages/error-page/error-page.component';
import { CaseStudiesThreeColumnsPageComponent } from './components/pages/case-studies-three-columns-page/case-studies-three-columns-page.component';
import { FooterComponent } from './components/layouts/footer/footer.component';
import { PreloaderComponent } from './components/layouts/preloader/preloader.component';
import { HomepageOneComponent } from './components/pages/homepage-one/homepage-one.component';
import { SolutionsComponent } from './components/common/solutions/solutions.component';
import { HomeoneServicesComponent } from './components/pages/homepage-one/homeone-services/homeone-services.component';
import { HomeoneProcessComponent } from './components/pages/homepage-one/homeone-process/homeone-process.component';
import { HomeoneCaseStudiesComponent } from './components/pages/homepage-one/homeone-case-studies/homeone-case-studies.component';
import { HomeoneScientistComponent } from './components/pages/homepage-one/homeone-scientist/homeone-scientist.component';
import { HomeoneTestimonialsComponent } from './components/pages/homepage-one/homeone-testimonials/homeone-testimonials.component';
import { HomeonePartnerComponent } from './components/pages/homepage-one/homeone-partner/homeone-partner.component';
import { HomeoneBlogComponent } from './components/pages/homepage-one/homeone-blog/homeone-blog.component';
import { ProjectStartComponent } from './components/common/project-start/project-start.component';
import { HomeoneAboutComponent } from './components/pages/homepage-one/homeone-about/homeone-about.component';
import { HomeoneBannerComponent } from './components/pages/homepage-one/homeone-banner/homeone-banner.component';
import { HomepageTwoComponent } from './components/pages/homepage-two/homepage-two.component';
import { HometwoPartnerComponent } from './components/pages/homepage-two/hometwo-partner/hometwo-partner.component';
import { HometwoTestimonialsComponent } from './components/pages/homepage-two/hometwo-testimonials/hometwo-testimonials.component';
import { HometwoScientistComponent } from './components/pages/homepage-two/hometwo-scientist/hometwo-scientist.component';
import { HometwoProcessComponent } from './components/pages/homepage-two/hometwo-process/hometwo-process.component';
import { HometwoServicesComponent } from './components/pages/homepage-two/hometwo-services/hometwo-services.component';
import { HometwoFunfactsComponent } from './components/pages/homepage-two/hometwo-funfacts/hometwo-funfacts.component';
import { HometwoMissionComponent } from './components/pages/homepage-two/hometwo-mission/hometwo-mission.component';
import { HometwoAboutComponent } from './components/pages/homepage-two/hometwo-about/hometwo-about.component';
import { HometwoBannerComponent } from './components/pages/homepage-two/hometwo-banner/hometwo-banner.component';
import { HometwoBoxesComponent } from './components/pages/homepage-two/hometwo-boxes/hometwo-boxes.component';
import { HomethreeBannerComponent } from './components/pages/homepage-three/homethree-banner/homethree-banner.component';
import { HomepageThreeComponent } from './components/pages/homepage-three/homepage-three.component';
import { HomethreePartnerComponent } from './components/pages/homepage-three/homethree-partner/homethree-partner.component';
import { HomethreeFeaturedServicesComponent } from './components/pages/homepage-three/homethree-featured-services/homethree-featured-services.component';
import { HomethreeAboutComponent } from './components/pages/homepage-three/homethree-about/homethree-about.component';
import { HomethreeMissionComponent } from './components/pages/homepage-three/homethree-mission/homethree-mission.component';
import { HomethreeFunfactsComponent } from './components/pages/homepage-three/homethree-funfacts/homethree-funfacts.component';
import { HomethreeCoursesComponent } from './components/pages/homepage-three/homethree-courses/homethree-courses.component';
import { HomethreeExploreLearningComponent } from './components/pages/homepage-three/homethree-explore-learning/homethree-explore-learning.component';
import { HomethreeBootcampsComponent } from './components/pages/homepage-three/homethree-bootcamps/homethree-bootcamps.component';
import { HomethreeTestimonialsComponent } from './components/pages/homepage-three/homethree-testimonials/homethree-testimonials.component';
import { HomethreeBlogComponent } from './components/pages/homepage-three/homethree-blog/homethree-blog.component';
import { SubscribeComponent } from './components/common/subscribe/subscribe.component';
import { HomepageFourComponent } from './components/pages/homepage-four/homepage-four.component';
import { HomefourBlogComponent } from './components/pages/homepage-four/homefour-blog/homefour-blog.component';
import { HomefourTestimonialsComponent } from './components/pages/homepage-four/homefour-testimonials/homefour-testimonials.component';
import { HomefourIndustriesServeComponent } from './components/pages/homepage-four/homefour-industries-serve/homefour-industries-serve.component';
import { HomefourServicesComponent } from './components/pages/homepage-four/homefour-services/homefour-services.component';
import { HomefourFunfactsComponent } from './components/pages/homepage-four/homefour-funfacts/homefour-funfacts.component';
import { NavbarComponent } from './components/layouts/navbar/navbar.component';
import { HomefourWhatWeDoComponent } from './components/pages/homepage-four/homefour-what-we-do/homefour-what-we-do.component';
import { HomefourWhyChooseUsComponent } from './components/pages/homepage-four/homefour-why-choose-us/homefour-why-choose-us.component';
import { HomefourFeaturedServicesComponent } from './components/pages/homepage-four/homefour-featured-services/homefour-featured-services.component';
import { HomefourBannerComponent } from './components/pages/homepage-four/homefour-banner/homefour-banner.component';
import { AboutPageComponent } from './components/pages/about-page/about-page.component';
import { AboutpageAboutComponent } from './components/pages/about-page/aboutpage-about/aboutpage-about.component';
import { AboutpageHistoryComponent } from './components/pages/about-page/aboutpage-history/aboutpage-history.component';
import { TeamPageComponent } from './components/pages/team-page/team-page.component';
import { ServicesPageComponent } from './components/pages/services-page/services-page.component';
import { ServicesDetailsPageComponent } from './components/pages/services-details-page/services-details-page.component';
import { ContactPageComponent } from './components/pages/contact-page/contact-page.component';
import { BlogPageComponent } from './components/pages/blog-page/blog-page.component';
import { BlogDetailsPageComponent } from './components/pages/blog-details-page/blog-details-page.component';
import { RelatedServicesComponent } from './components/pages/services-details-page/related-services/related-services.component';
import { CaseStudiesDetailsPageComponent } from './components/pages/case-studies-details-page/case-studies-details-page.component';
import { RelatedCaseStudiesComponent } from './components/pages/case-studies-details-page/related-case-studies/related-case-studies.component';
import { FaqPageComponent } from './components/pages/faq-page/faq-page.component';
import { EventsDetailsPageComponent } from './components/pages/events-details-page/events-details-page.component';
import { EventsSpeakersComponent } from './components/pages/events-details-page/events-speakers/events-speakers.component';
import { CoursesPageComponent } from './components/pages/courses-page/courses-page.component';
import { CoursesDetailsPageComponent } from './components/pages/courses-details-page/courses-details-page.component';
import { RelatedCoursesComponent } from './components/pages/courses-details-page/related-courses/related-courses.component';
import { MLComponent } from './components/pages/homepage-four/homefour-services/ml/ml.component';
import { BigDataComponent } from './components/pages/homepage-four/homefour-services/big-data/big-data.component';
import { IOTComponent } from './components/pages/homepage-four/homefour-services/iot/iot.component';
import { WebComponent } from './components/pages/homepage-four/homefour-services/web/web.component';
import { AppsComponent } from './components/pages/homepage-four/homefour-services/apps/apps.component';
import { DataScienceComponent } from './components/pages/homepage-four/homefour-services/data-science/data-science.component';
import { CloudComponent } from './components/pages/homepage-four/homefour-services/cloud/cloud.component';
import { TrainingComponent } from './components/pages/homepage-four/homefour-services/training/training.component';
import { ComingSoonPageComponent } from './components/pages/coming-soon-page/coming-soon-page.component';
@NgModule({
declarations: [
AppComponent,
GalleryPageComponent,
EventsPageComponent,
ErrorPageComponent,
CaseStudiesThreeColumnsPageComponent,
FooterComponent,
PreloaderComponent,
HomepageOneComponent,
SolutionsComponent,
HomeoneServicesComponent,
HomeoneProcessComponent,
HomeoneCaseStudiesComponent,
HomeoneScientistComponent,
HomeoneTestimonialsComponent,
HomeonePartnerComponent,
HomeoneBlogComponent,
ProjectStartComponent,
HomeoneAboutComponent,
HomeoneBannerComponent,
HomepageTwoComponent,
HometwoPartnerComponent,
HometwoTestimonialsComponent,
HometwoScientistComponent,
HometwoProcessComponent,
HometwoServicesComponent,
HometwoFunfactsComponent,
HometwoMissionComponent,
HometwoAboutComponent,
HometwoBannerComponent,
HometwoBoxesComponent,
HomethreeBannerComponent,
HomepageThreeComponent,
HomethreePartnerComponent,
HomethreeFeaturedServicesComponent,
HomethreeAboutComponent,
HomethreeMissionComponent,
HomethreeFunfactsComponent,
HomethreeCoursesComponent,
HomethreeExploreLearningComponent,
HomethreeBootcampsComponent,
HomethreeTestimonialsComponent,
HomethreeBlogComponent,
SubscribeComponent,
HomepageFourComponent,
HomefourBlogComponent,
HomefourTestimonialsComponent,
HomefourIndustriesServeComponent,
HomefourServicesComponent,
HomefourFunfactsComponent,
NavbarComponent,
HomefourWhatWeDoComponent,
HomefourWhyChooseUsComponent,
HomefourFeaturedServicesComponent,
HomefourBannerComponent,
AboutPageComponent,
AboutpageAboutComponent,
AboutpageHistoryComponent,
TeamPageComponent,
ServicesPageComponent,
ServicesDetailsPageComponent,
ContactPageComponent,
BlogPageComponent,
BlogDetailsPageComponent,
RelatedServicesComponent,
CaseStudiesDetailsPageComponent,
RelatedCaseStudiesComponent,
FaqPageComponent,
EventsDetailsPageComponent,
EventsSpeakersComponent,
CoursesPageComponent,
CoursesDetailsPageComponent,
RelatedCoursesComponent,
MLComponent,
BigDataComponent,
IOTComponent,
WebComponent,
AppsComponent,
DataScienceComponent,
CloudComponent,
TrainingComponent,
ComingSoonPageComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是 INDEX.HTML
<!doctype html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<title>Excain- Build, Train and Innovate</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
提前致谢
导航栏代码：-
<li class="nav-item"><a [routerLink]="['/about-us']" class="nav-link" href = "#" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">About Us</a></li>
<li class="nav-item"><a [routerLink]="['/services']" class="nav-link" href = "#" routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}">Services</a></li>
<li class="nav-item"><a [routerLink]="['/case-studies']" class="nav-link" href = "#" routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}">Case Studies</a></li>
<li class="nav-item"><a [routerLink]="['/courses']" class="nav-link" href = "#" routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}">Courses</a></li>
<li class="nav-item"><a [routerLink]="['/blog']" class="nav-link" href = "#" routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}">Blog</a></li>
【问题讨论】：
-
尝试删除
redirectTo: '/home'中的正斜杠 ->redirectTo: 'home' -
你试过在你的桌面上检查它吗？
-
在桌面视图中路由完全没问题。但是当用控制台调整我的窗口大小时，就会出现这个错误。
-
我建议你也试试 Firefox，这样我们就可以确定不是 chrome 导致了这个问题。
-
我检查了 firefox、edge、chrome explorer。
标签： javascript angular angular-ui-router url-routing angular2-routing