Question

我们正在努力将应用程序迁移到新的Angular版本。旧版本（Angular.JS）是由.NET Framework 4.5.2 ASP.NET MVC应用程序提供服务的自己的应用程序/存储库，该应用程序会将每个调用路由到Home，这将返回包含有角度的Razor视图。应用程序，然后启动它，可能将URL的后缀路由到实际的Angular页面。例如，它将把www.website.com/profile路由到Angular中的profile路由，而不是尝试访问服务器上名为profile的文件夹。集成我们的API和Angular.JS应用程序虽然不是很漂亮，但是可以正常工作。该服务器在IIS中还具有用于其他子文件夹的虚拟文件夹，应该访问这些子文件夹，例如字体，图像，配置等。

当前，我正在努力使Angular 7应用程序与Angular.JS应用程序一起运行。我们希望运行Angular 7应用程序以在当前应用程序的目录中运行，然后再将其移至其自己的Web应用程序，因为我们新的Angular应用程序只是一堆静态文件，不需要与服务器捆绑在一起不再。基本上，不需要任何ASP.NET MVC配置。

当前URL为www.website.com，并返回Angular.JS应用程序。新的将是www.website.com/v2/，并将返回Angular 7应用程序。如果我们已经完成了profile页面的v2版本，则导航到wwww.website.com/v2/profile现在应该导航到Angular 7应用程序的profile页面。

在IIS中，虚拟文件夹之一是名为dist的文件夹，该文件夹可导致Angular.JS应用程序文件的位置。现在配置了一个名为v2的新文件，它指向Angular 7应用程序文件的位置。另一个名为assets的文件会转到Angular 7应用程序的assets文件夹。

现在，当我导航到www.website.com/v2/时，Angular会启动并将我路由到www.website.com/v2/home，这是本地路由。

问题是，当我自己输入www.website.com/v2/home时，它导致应用程序路由回到www.website.com。因此它再次启动了Angular.JS应用程序。没有错误或重定向发生。似乎它只是忽略了v2/之后的那一部分，即使Angular.JS做到这一点也没问题。

TL; DR 导航到www.website.com/v2会加载Angular 7，但导航到v2/{{Anything}}会导致应用程序退回到在{{1 }}，即使www.website.com是Angular 7中的内部链接，它也会将导航到{{anything}}路线。

我使用以下命令构建Angular项目：

{{anything}}

angular 7应用程序中的路由如下所示：

ng build --configuration=dev --deploy-url=/v2/ --base-href=/v2/

任何人都可以告诉我如何做，例如，在浏览器中键入const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full', }, { path: '', canActivate: [AuthGuard], component: DefaultLayoutComponent, children: [ { path: 'home', component: DashboardComponent, canLoad: [NoAuthGuard], }, { path: 'contact', loadChildren: './modules/contact/contact.module#ContactModule', canLoad: [NoAuthGuard], }, { path: 'timesheets', loadChildren: './modules/timesheet/timesheet.module#TimesheetModule', canLoad: [NoAuthGuard], }, { path: 'users', loadChildren: './modules/users/users.module#UsersModule', canLoad: [NoAuthGuard, NgxPermissionsGuard], data: { permissions: { only: 'seeUsersPage', redirectTo: '/403', }, }, }, { path: 'profile', loadChildren: './modules/profile/profile.module#ProfileModule', canLoad: [NoAuthGuard], }, ], }, { path: 'login', component: LoginComponent, }, { path: '403', component: Page403Component, }, { path: '**', redirectTo: '/home', pathMatch: 'full', }, ];会导致v2联系人页面，同时也使内部导航成为可能（因此，如果用户单击“导航到v2联系人页面”，也可以导航到v2联系人页面）

编辑：请求有关Angular.JS www.website.com/v2/contact和后端Routerconfig的信息；我在下面提供了它们。

web.config：

RouterConfig

$routeProvider .when('/', { templateUrl: 'scripts/home/home.html', controller: 'HomeController', controllerAs: 'homeCtrl' }) .when('/gebruikers', { templateUrl: 'scripts/users/users.html', controller: 'UsersController', controllerAs: 'usersCtrl' }) .when('/profiel', { templateUrl: 'scripts/profile/profile.html', controller: 'ProfileController', controllerAs: 'profileCtrl' }) .when('/timesheets', { templateUrl: 'scripts/timesheets/timesheets.html', controller: 'TimesheetsController', controllerAs: 'timesheetsCtrl', reloadOnSearch: false }) .when('/facturen', { templateUrl: 'scripts/invoices/invoices.html', controller: 'InvoicesController', controllerAs: 'invoicesCtrl', reloadOnSearch: false }) .when('/opdrachten', { templateUrl: 'scripts/vacancies/vacancies.html', controller: 'VacanciesController', controllerAs: 'vacanciesCtrl' }) .when('/contact', { templateUrl: 'scripts/contact/contact.html', controller: 'ContactController', controllerAs: 'contactCtrl' }) .when('/help', { templateUrl: 'scripts/help/help.html', controller: 'HelpController', controllerAs: 'helpCtrl' }) .otherwise({ redirectTo: '/' });

Web.Config IIS rewrite rules:

Answer 1

之所以总是将其路由回v1网址，是因为angular 7应用程序包含一个web.config文件，如下所示：

<configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular" 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="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
</configuration>

我认为这是IIS部署的默认设置，团队成员可能已添加了此设置。我从没想过要在前端项目中使用web.config。

基本上，此规则负责将用户重新路由到index.html。例如，www.website.com/folder通常会将用户带到Web服务器上名为folder的文件夹，但这不是Angular运行的位置，并可能导致404。此规则将用户带回到www.website.com然后让folder部分成角度地布线。

因为我在子文件夹中运行应用程序，所以将url="/"更改为url="/v2/"并立即生效！

请记住要使用ng build --configuration=dev --deploy-url=/v2/ --base-href=/v2/构建项目！需要deploy-url，因为在服务器的根文件夹中找不到脚本/ css /其他文件。在/ v2 /中可以找到它。路由器需要base-href；它应该从www.website.com/v2/而不是www.website.com/开始路由应用程序！

不需要其他iis重写规则，不需要asp.net配置，不需要特殊的角度路由。只需这些简单的步骤即可！

Answer 2

您是否对Web.config文件进行了任何修改？您需要为基本的角度应用程序设置它（使用UrlRewrite模块），我认为它可能需要针对您的用例进行修改...

<rewrite>
    <rules>
      <rule name="Angular RoutesV1" 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="/my/app/" />
      </rule>
    </rules>
  </rewrite>

我的假设是您将需要在此处添加另一个“规则”。希望这可以帮助！！！（注意：重写应该与您的ng build base href值匹配）

Answer 3

删除您的Web.Config IIS rewrite rules
在您的RouteConfig中以这种方式更改

RouteConfig

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        // don't change the arrangement, this must be executed first
        routes.MapRoute(
                name: "V2",
                url: "v2/{*url}",
                defaults: new { controller = "Home", action = "IndexV2", id = UrlParameter.Optional }
            );

        routes.MapRoute(
                name: "Default",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
 }

基本上，此操作将捕获具有特定路由名称的所有路由路径，{*url}捕获所有路由段，而与值无关。

所以当我们说网址是；

localhost：4200 / test <-这指向Default
localhost：4200 / v2 / test <-指向V2
localhost：4200 / test / something / 2323 <-这指向Default
localhost：4200 / v2 / test2 / test_again / 2323 <-这指向V2

并在您的HomeController中确保添加IndexV2

HomeController

public ActionResult IndexV2()
{
    return View();
}

Answer 4

对于 .Net Core 3 或更高版本

如果 404 发生在 angular 子目录中，那是因为默认路由配置。所以它会通过在启动时编写这段代码来修复。

 app.Use(async (context, next) => {
   await next();
    if (context.Response.StatusCode == 404 &&
      !System.IO.Path.HasExtension(context.Request.Path.Value) &&
      !context.Request.Path.Value.ToLower().StartsWith("/api/")&&
      !context.Request.Path.Value.ToLower().StartsWith("/swagger"))
        {
          context.Request.Path = "yousubdirectory/index.html";
          await next();
        }
    });
 
  app.UseMvcWithDefaultRoute();

在子文件夹中运行的Angular 7中的路由无法正常工作

4 个答案: