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

Question

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

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

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

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

现在，当我导航到时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/v2Angular
7，但导航到v2/{{Anything}}导致应用程序退回到运行的Angular.JS应用程序www.website.com，即使{{anything}}是Angular
7中的内部链接，它 也会 导航到该{{anything}}路线。

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

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

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

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',
  },
];

谁能告诉我我该如何做，例如，www.website.com/v2/contact在浏览器中输入v2联系人页面，同时还可以进行内部导航（因此，如果用户单击Angular
7内部的“导航至v2联系人页面”应用程序，它还会导航到v2联系人页面）

编辑：有关Angular.JS 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:

 <rewrite>
      <rules>
        <clear />
        <rule name="Redirect Angular endpoints to MVC Home" enabled="true">
          <match url="^(profiel|timesheets|facturen|opdrachten|contact|help|gebruikers)" negate="false" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="Rewrite" url="Home" logRewrittenUrl="false" />
        </rule>
     <!-- Some other rules that are not important are here, they redirect HTTP to HTTPS -->
     </rules>
  </rewrite>

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，通常会将用户带到folder在Web服务器上调用的文件夹，但这不是Angular运行的位置，并且可能会导致404。此规则将用户带回www.website.com，然后进行角度布线folder。

因为我正在我的子文件夹的应用程序，我改变了url="/"，以url="/v2/"它立刻工作！

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

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