我刚开始使用 angular js，我尝试了路由并且工作得很好。问题是当我刷新页面时它显示 404 错误，因为它正在检查我的实际目录而不是检查路由。
这是完整的代码
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<base href="/" />
<a href="blue">blue</a>
<a href="green">green</a> //blue.html and green.html are in same directory as index.html
<p>Click on the links to load blue or green.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/blue/:name?", {
templateUrl: "blue.html",
controller: "blue_control"
})
.when("/green", {
templateUrl: "green.html",
controller: "green_control"
})
$locationProvider.html5Mode({
enabled: true
});
});
app.controller("blue_control", function($scope) {
$scope.msg = "this is blue";
}); …javascript http-status-code-404 angularjs ngroute angularjs-ng-route
部署到IIS后，我发现我的路由均不起作用，因此我进行了研究，然后发现了这个问题，其中说您必须向进行重写web.config，而我已经做了，路由现在可以正常工作。
这是我的一些在开发模式下有效但在生产中有效的路线：
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'manage', component: ManageComponent },
{ path: 'manage/products', component: ProductComponent },
{ path: 'manage/products/:action/:id', component: ProductComponent },
{ path: 'manage/companies', component: CompanyComponent },
];
我所做的web.config：
<system.webServer>
<rewrite>
<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"/>
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
</conditions>
<action type="Rewrite" url="/"/>
</rule>
</rules>
</rewrite>
</system.webServer>
那么实际的问题是什么呢？当我刷新/重定向页面时会出现问题。经过一个小时的研究，发现我编写的规则web.config总是返回index.html …
我正在使用角度cli在Angular 2中开发一个应用程序.该应用程序工作正常,并在我在Azure中部署它时运行正常,但路由不起作用.我可以通过"myapp.azurewebsites.net"访问我的应用程序,但如果我尝试"myapp.azurewebsites.net/settings",我会收到404错误.我找到了许多指南,有很多不同的方法可以让不同的服务器将所有内容路由到一个索引文件,但根本没有.就像提供web.config文件,配置节点或快速服务器,以及两者同时一样.
所以,我的问题包括两部分.
1. Azure中哪种Web应用程序模板最适合托管Angular2应用程序？
它只是用Angular2编写的单页面应用程序.不是ASP.NET MVC应用程序中包含的那种.
2.如何配置该Web应用程序以使用我在Angular中配置的路由
前言：我要描述的所有内容都可以在本地工作，但当我的代码部署在 Windows 环境中的 Azure Web 应用服务中时，这些内容就不起作用了。另外，我已经阅读了这个问题的答案，我不认为它适用于我的具体情况；我没有使用任何自定义域。
有关更多背景信息：我没有将我的应用程序容器化；我正在使用 Azure DevOps 构建和部署代码。
我有一个相对简单的 Angular 7 (CLI) 应用程序，带有一些简单的路由。我有许多路由模块，它们被导入到各自的功能模块中，然后功能模块被导入到主/核心应用程序模块中：app.module.ts。
在大多数情况下，/aboutUs/ourMission我会将用户导航到诸如或 之类的路线上的组件/support/donations。这些路由在本地和远程都运行良好。
远程效果不佳的是或之类的路线。/admin/register
应用程序模块.ts：
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {HeaderComponent} from './header/header.component';
import {VolunteerComponent} from './volunteer/volunteer.component';
import {TagComponent} from './tag/tag.component';
import {SummerCampComponent} from './summer-camp/summer-camp.component';
import {RegisterComponent} from './register/register.component';
import {FooterComponent} from './footer/footer.component';
import …