我们正在努力将应用程序迁移到新的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中具有虚拟文件夹,用于其他子文件夹,这些子文件夹应被访问,例如字体,图像,配置等。
Home
www.website.com/profile
profile
目前,我正在努力使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应用程序的页面。
www.website.com
www.website.com/v2/
wwww.website.com/v2/profile
在IIS中,虚拟文件夹之一是一个名为的文件夹dist,它指向Angular.JS应用程序文件的位置。v2现在配置了一个名为的新文件,它指向Angular 7应用程序文件的位置。另一个名为assets导致指向assetsAngular 7应用程序的文件夹。
dist
v2
assets
现在,当我导航到时www.website.com/v2/,Angular会启动并将我路由到www.website.com/v2/home,这是本地路由。
www.website.com/v2/home
问题 是,当我输入www.website.com/v2/home自己的内容时,它会导致应用程序路由回www.website.com。因此它再次启动了Angular.JS应用程序。没有错误或重定向发生。看起来它只是忽略了v2/紧随其后的部分,即使Angular.JS做到这一点也没问题。
v2/
TL; DR 导航到www.website.com/v2Angular 7,但导航到v2/{{Anything}}导致应用程序退回到运行的Angular.JS应用程序www.website.com,即使{{anything}}是Angular 7中的内部链接,它 也会 导航到该{{anything}}路线。
www.website.com/v2
v2/{{Anything}}
{{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联系人页面)
www.website.com/v2/contact
编辑:有关Angular.JS Routerconfig和后端的信息web.config被要求;我在下面提供了它们。
Routerconfig
web.config
RouterConfig:
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文件:
<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。
www.website.com/folder
folder
因为我正在我的子文件夹的应用程序,我改变了url="/",以url="/v2/"它立刻工作!
url="/"
url="/v2/"
记得用来构建项目ng build --configuration=dev --deploy-url=/v2/ --base- href=/v2/!需要部署网址,因为在服务器的根文件夹中找不到脚本/ css /其他文件;在/ v2 /中可以找到它。路由器需要base- href;它应该www.website.com/v2/从而不是在开始路由应用程序www.website.com/!
ng build --configuration=dev --deploy-url=/v2/ --base- href=/v2/
www.website.com/
不需要其他iis重写规则,asp.net配置,特殊的角度路由。只需这些简单的步骤!