404页面未找到/找不到网页的网址在“移动视图的角路由”中找到

分类：编程问答

如何解决404页面未找到/找不到网页的网址在“移动视图的角路由”中找到

我开发了一个角度应用程序。当我使用 ng build --prod 进行生产和托管时，我发现除了主页以外，在移动视图上的所有路由中，都显示404页面未找到。无法弄清楚为什么会这样。

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: '',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 { }

这就是索引。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,100;0,500;0,100;1,500;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>

解决方法

Angular 2+中的路由取决于您的路由顺序。

您的第一个路径为''的路由与每个请求匹配，将要执行。

建议像这样从更具体到较不具体的路线进行排序：

{path: 'home',component: HomepageFourComponent},{path: 'about-us',component: AboutPageComponent},{path: 'services',component: ServicesPageComponent},{path: 'services/:id',component: ServicesDetailsPageComponent},{path: 'courses',component: CoursesPageComponent},{path: 'courses/:id',component: CoursesDetailsPageComponent},{path: 'case-studies',component: CaseStudiesThreeColumnsPageComponent},{path: 'case-studies/:id',component: CaseStudiesDetailsPageComponent},{path: 'error',component: ErrorPageComponent},{path: 'blog',component: BlogPageComponent},{path: 'contact',component: ContactPageComponent},{ path: '',redirectTo: '/home',pathMatch: 'full' },{path: '**',component: ErrorPageComponent}

使用此配置，将从最后一条路由捕获对localhost：4000 /的请求，并将其重定向到/ home。使用路由“ **”，您将捕获每个请求并将其重定向到“错误”页面。因此，该请求应该最后一次。

还要检查您的基准设置为“ base href ='/'”。 Angular的文档说它必须是“ base href ='/'”。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot