Angular 10 路由在部署到 Http 服务器时不起作用？

Question

我的 Angular ver-10 电子商务项目 - 使用“ng serve”在本地运行良好 但我使用“ng-build”发布并使用“http-server”页面托管它进入主屏幕（例如：仪表板http://192.168.1.20:8080）。 但是，如果我从仪表板页面单击任何链接（按钮 - 例如：购物车页面、订单页面、注册页面等），它不会出现并且 它得到错误 例如：“找不到这个 192.168.1.20 页面 未找到该网址的网页： http://192.168.1.20:8080/cart HTTP 错误 404...."

这是我的路由代码“app.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 { }

"app-routing.module.ts

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 { }

谢谢...

Answer 1

<?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 文件并将其添加到服务器文件夹

Answer 2

“app.module.ts”

请添加以下输入：

从 '@angular/common' 导入 { HashLocationStrategy, LocationStrategy }；

提供者：[{ 提供：LocationStrategy，useClass：HashLocationStrategy }]，

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

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