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

我们正在努力将我们的应用程序迁移到新的Angular版本.旧的(Angular.JS)是它自己的应用程序/ repo由.NET Framework 4.5.2 ASP.NET MVC应用程序提供服务,它将每个调用路由到Home,它将返回包含angular应用程序的Razor View,然后启动它,可能会将URL的后缀路由到实际的Angular页面.例如,它会将www.website.com/profile路由到Angular中的配置文件路由,而不是尝试访问服务器上名为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应用程序.如果我们已完成配置文件页面的v2版本,则导航到wwww.website.com/v2/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 / part之后的部分,尽管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联系页面,同时也可以使内部导航成为可能(因此,如果用户点击“导航到v2联系页面“在Angular 7应用程序内部,它也导航到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>
        <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 url的原因是因为angular 7 app包含一个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通常会将用户带到网络服务器上名为文件夹的文件夹中,但这不是Angular运行的地方,可能会导致404.此规则将用户带回www.website.com然后让角度路由文件夹部分.

因为我在子文件夹中运行我的应用程序,所以我将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配置,没有特殊的角度路由.只是这些简单的步骤！

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

相关推荐