Javascript 部署到Http服务器时Angular 10路由不工作？

我的Angular ver-10电子商务项目-使用“ng serve”在本地运行良好 但我使用“ng build”发布，并使用“http服务器”页面托管它的主屏幕（例如：仪表板）。 但若我从仪表板页面点击任何链接（按钮-例如：购物车页面、订单页面、注册页面等），那个么它就不会继续运行 它会出错 例如：“找不到这192.168.1.20页 找不到该网址的网页： HTTP错误404…”

这是我的路由代码“app.module.ts”

“app-routing.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PathLocationStrategy, LocationStrategy,HashLocationStrategy } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ItemListComponent } from './item-list/item-list.component';
import { CartComponent } from './cart/cart.component';
import { ItemDetailsComponent } from './item-details/item-details.component';
import { HeaderaComponent } from './headera/headera.component';
import { HeaderbComponent } from './headerb/headerb.component';
import { HeadercComponent } from './headerc/headerc.component';
import { HeaderdComponent } from './headerd/headerd.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { MyaccountComponent } from './myaccount/myaccount.component';
import { FooteraComponent } from './footera/footera.component';
import { FooterbComponent } from './footerb/footerb.component';
import { FootercComponent } from './footerc/footerc.component';
import { FooterdComponent } from './footerd/footerd.component';
import { PolicyComponent } from './policy/policy.component';



@NgModule({
  declarations: [
    AppComponent,
    ItemListComponent,
    CartComponent,
    ItemDetailsComponent,
    HeaderaComponent,
    HeaderbComponent,
    HeadercComponent,
    HeaderdComponent,
    CheckoutComponent,
    MyaccountComponent,
    FooteraComponent,
    FooterbComponent,
    FootercComponent,
    FooterdComponent,
    PolicyComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
  ],
  providers: [ { provide: LocationStrategy, 
  useClass: PathLocationStrategy } ],
  bootstrap: [AppComponent],
 
})
export class AppModule { }

import { Routes, RouterModule } from '@angular/router';
import { ItemListComponent } from './item-list/item-list.component';
import { CartComponent } from './cart/cart.component';
import { ItemDetailsComponent } from './item-details/item-details.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { MyaccountComponent } from './myaccount/myaccount.component';
import {PolicyComponent} from './policy/policy.component';




const routes: Routes = [
  { path: "", component: ItemListComponent },
  { path: "cart", component: CartComponent },
  { path: "itemdetails", component: ItemDetailsComponent },
  { path: "checkout", component: CheckoutComponent },
  { path: "myaccount", component: MyaccountComponent },
  { path: "mypolicy", component: PolicyComponent },


];

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

谢谢……

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
  <httpCookies httpOnlyCookies="true"/>
  <sessionState cookieless="UseCookies"/>
  <machineKey validation="3DES"/>
</system.web>
<system.webServer>
 <httpProtocol>
  <customHeaders>
    <add name="Strict-Transport-Security" value="max-age=31536000"/>
    <add name="Cache-Control" value="no-store"/>
    <add name="Pragma" value="no-cache"/>
    <add name="Expires" value="0"/>
    <!-- <add name="Content-Security-Policy" value="default-src 'self' ; img-src * data:; style-src 'self' 'unsafe-inline' ;script-src 'self' 'unsafe-eval' 'unsafe-inline' ; connect-src 'self' ;"/> -->
    <add name="X-Content-Type-Options" value="nosniff"/>
    <remove name="X-Powered-By"/>
    <add name="X-XSS-Protection" value="1; mode=block"/>
  </customHeaders>
</httpProtocol>
<httpErrors errorMode="Custom" existingResponse="Replace">
  <remove statusCode="404"/>
  <error statusCode="404" responseMode="Redirect" path="index.html"/>
</httpErrors>
<rewrite>    
<outboundRules rewriteBeforeCache="true">
 <rule name="Remove Server header">
   <match serverVariable="RESPONSE_Server" pattern=".+"/>
  <action type="Rewrite" value="Hidden"/>
  </rule>
<rule name="Remove ETag">
  <match serverVariable="RESPONSE_ETag" pattern=".+"/>
 <action type="Rewrite" value=""/>
</rule>
</outboundRules>
<rules>
        <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
        </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

将此文件另存为web.config xml文件并将其添加到服务器文件夹

将此文件另存为web.config xml文件，并将其添加到服务器文件夹“app.module.ts”中

请添加以下输入：

从“@angular/common”导入{HashLocationStrategy，LocationStrategy}；

提供程序：[{provide:LocationStrategy，useClass:HashLocationStrategy}]，

只需删除旧的提供者并添加上述值。 问题是托管服务器总是查看“/#/home”或“/#/carts”

这是一个临时解决方案，您可以从角度阅读路由概念，例如基于路径和基于散列的。

app.module.ts

请添加以下输入：

从“@angular/common”导入{HashLocationStrategy，LocationStrategy}；

提供程序：[{provide:LocationStrategy，useClass:HashLocationStrategy}]，

只需删除旧的提供者并添加上述值。 问题是托管服务器总是查看“/#/home”或“/#/carts”

这是一个临时解决方案，您可以从角度阅读路由概念，例如基于路径和基于散列