Visual Studio 当部署到Http服务器时，Angular 10路由不工作？

rqdpfwrv 于 2023-01-21 发布在 Angular

关注(0)|答案(3)|浏览(133)

我的Angular ver-10电子商务项目-它的工作很好本地使用“ng serve”，但我发布使用“ng-build”和托管使用“http-server”页面它去主屏幕（例如： Jmeter 板http://192.168.1.20:8080）。但如果我点击任何链接（按钮-例如：购物车页面，订单页面，注册页面等）从 Jmeter 板页面，它不去，它得到错误，例如：“找不到此192.168.1.20页面找不到该网址的网页：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 { }

“应用程序路由.模块.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 { }

谢谢你。

visual-studio

来源：https://stackoverflow.com/questions/64911280/angular-10-routing-does-not-work-when-deployed-to-http-server

3条答案

按热度按时间

46qrfjad1#

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

赞(0）回复(0）举报 2023-01-21

am46iovg2#

"应用程序模块ts"
请添加以下输入：