在子文件夹中运行的Angular 7中的路由无法正常工作 [英] Routing in Angular 7 running in subfolder not working correctly

问题描述

我们正在努力将应用程序迁移到新的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中还具有虚拟文件夹，用于其他子文件夹，这些子文件夹应被访问，例如字体，图像，配置等.

We are working on migrating our application to a new Angular version. The old one (Angular.JS) was it's own application/repo being served by an .NET Framework 4.5.2 ASP.NET MVC application that would route every call to Home which would return a Razor View that contained the angular application and then start it up, possibly routing the suffix of the URL to the actual Angular page. For example, it would route www.website.com/profile to the profile route in Angular, NOT trying to access a folder called profile on the server. Integrating our API and Angular.JS application is not too too pretty but it worked. The server also has virtual folders in IIS for other subfolders that should be accessed like fonts, images, configs, etc.

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

Currently I am working on getting the Angular 7 application to run alongside the Angular.JS application. We want to run the Angular 7 application to run inside of a directory of the current application and later on move it to it's own web app because our new Angular application is just a bunch of static files and does not need to be bundled with the server anymore. Basically, there is no need for any ASP.NET MVC configuration.

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

The current url would be www.website.com and return the Angular.JS application. The new one would be www.website.com/v2/ and would return the Angular 7 application. If we had finished a v2 version of the profile page, navigating to wwww.website.com/v2/profile should now navigate to the profile page of the Angular 7 application.

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

In IIS, one of the virtual folders is a folder called dist which leads to the location of the Angular.JS app files. A new one called v2 is now configured, which leads to the location of the Angular 7 app files. Another one called assets leads to the assets folder of the Angular 7 application.

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

Now, when I navigate to www.website.com/v2/, Angular starts and routes me to www.website.com/v2/home, which is the home route.

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

The issue is that when I type in www.website.com/v2/home myself, it results in the application routing back to www.website.com. and thus it boots up the Angular.JS application again. There are no errors or redirects taking place. It seems like it just ignores the part that comes after the v2/ part even though Angular.JS does this just fine.

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

TL;DR Navigating to www.website.com/v2 loads up Angular 7, but navigating to v2/{{Anything}} results in the application falling back to the Angular.JS application running on www.website.com, even though if {{anything}} was an internal link in Angular 7, it would navigate to the {{anything}} route.

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

I build the Angular project with the following command:

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

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

The routes in the angular 7 application look like this:

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联系人页面，同时还使内部导航成为可能(因此，如果用户单击导航到v2联系人页面" "(在Angular 7应用程序内部)，它还会导航到v2联系人页面)

Can anyone tell me how I can make, for example, typing www.website.com/v2/contact in the browser lead to the v2 contact page, while also making the internal navigation possible (so if the user clicks on a "navigate to v2 contact page" inside of the Angular 7 application, it also navigates to the v2 contact page)

请求有关Angular.JS Routerconfig和后端web.config的信息；我在下面提供了它们.

Information about the Angular.JS Routerconfig and the back-end web.config were requested; I have provided them below.

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>

推荐答案

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

The reason why it would always route back to the v1 url is because the angular 7 app contained a web.config file that looked like this:

<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.

I believe this is default for an IIS deployment and a team member might have added this. I never thought about having a web.config in a front-end project.

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

Basically, this rule takes care of rerouting the user to the index.html. For example www.website.com/folder would normally bring the user to a folder called folder on the webserver, but this is not where Angular runs and could cause a 404. This rule brings the user back to www.website.com and then lets angular route the folder part.

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

Because I am running my application in a subfolder, I changed the url="/" to url="/v2/" and it worked immediatly!

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

Remember to build the project with ng build --configuration=dev --deploy-url=/v2/ --base-href=/v2/! The deploy-url is needed because the scripts/css/other files are not found in the root folder of the server; it is found in /v2/. The base-href is necessary for the router; it should start routing the application at www.website.com/v2/ and not at www.website.com/!

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

No other iis rewrite rules are necessary, no asp.net config, no special angular routing. Just these simple steps!

这篇关于在子文件夹中运行的Angular 7中的路由无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！