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

Question

我们正在努力将我们的应用程序迁移到新的 Angular 版本。旧的 (Angular.JS) 是它自己的应用程序/存储库，由 .NET Framework 4.5.2 ASP.NET MVC 应用程序提供服务，该应用程序会将每次调用路由到 Home ，这将返回一个 Razor View包含 Angular 应用程序，然后启动它，可能会将 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 现在应该导航到 profile Angular 7 应用程序的页面。

在 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}} 导致应用程序回退到在 www.website.com 上运行的 Angular.JS 应用程序，即使 {{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 的信息；我在下面提供了它们。

路由器配置:

$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>
        <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 url 的原因是因为 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 的文件夹，但这不是 Angular 运行的地方并且可能会导致 404。此规则将用户带回 www.website.com，然后让 Angular 路由 folder 部分。

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

记得使用 ng build --configuration=dev --deploy-url=/v2/--base-href=/v2/ 构建项目!需要deploy-url是因为在服务器的根目录下没有找到scripts/css/other文件；它位于/v2/中。 base-href 是路由器所必需的；它应该在 www.website.com/v2/ 而不是 www.website.com/ 开始路由应用程序!

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