Angular 路由器在 IIS 服务器上部署时删除查询参数答案

【问题标题】：Angular router removes query params when deployed on IIS serverAngular 路由器在 IIS 服务器上部署时删除查询参数
【发布时间】：2018-09-27 13:28:08
【问题描述】：

我尝试使用 Angular 路由器，但在部署应用程序时遇到了一些问题。首先，这是我的版本：

Angular CLI: 6.2.3
Node: 9.11.1
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.3
@angular-devkit/build-angular     0.8.3
@angular-devkit/build-optimizer   0.8.3
@angular-devkit/build-webpack     0.8.3
@angular-devkit/core              0.8.3
@angular-devkit/schematics        0.8.3
@angular/cli                      6.2.3
@ngtools/webpack                  6.2.3
@schematics/angular               0.8.3
@schematics/update                0.8.3
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2

我想有 2 条可能的路线：

mydomain.com/TestRouting/my-route
mydomain.com/TestRouting/my-route?route=whatever

看起来很简单，对吧？

这是我在特定模块中的路由定义：

import ...

const appRoutes = [
  { path: 'my-route', component: RouteComponent },
  { path: '', redirectTo: '/my-route', pathMatch: 'full' }
];

@NgModule({
  imports: [
    CommonModule,
    RouteModule, // This is a module containing the RouteComponent
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})
export class RoutingModule { }

当然，我已经在 AppModule 中导入了这个模块，在 app.component.html 中添加了 router-outlet 标记

在我的 RouteComponent 中，我以这种方式获取查询参数：

export class RouteComponent implements OnInit {
  urlParam: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.route.snapshot);
    this.urlParam = this.route.snapshot.queryParams['route'];
  }

}

因为我已经在 IIS 服务器上部署了网站，所以我添加了这个 web.config 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/TestRouting" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

问题：在本地，它运作良好......（ng服务）在本地和生产模式下，它也运行良好（ng serve --prod）

我使用以下命令构建应用程序： ng build --base-href /TestRouting/ --prod

一旦部署，

mydomain.com/TestRouting/ 重定向到 mydomain.com/TestRouting/my-route（预期行为） mydomain.com/TestRouting/my-route 呈现组件（预期行为）但 mydomain.com/TestRouting/my-route?route=test 重定向到 mydomain.com/TestRouting/my-route （好吧，那不行……） p>

有人有想法吗？非常感谢您的帮助。

【问题讨论】：

不记得为什么我们在 IIS 上遇到这个问题，但不幸的是，我们能找到的唯一解决方案是使用哈希定位策略。 tektutorialshub.com/location-strategies-angular

标签： javascript angular angular-routing angular-router-params

【解决方案1】：

这与 Angular 无关。您正在使用 /TestRouting 重写 url 并忽略查询字符串，试试这个：

<action type="Rewrite" url="/TestRouting" appendQueryString="true" />

【讨论】：

行为还是一样的:(

【解决方案2】：

感谢@ritaj，我使用the HashLocation strategy 解决了这个问题。它更改了 url 模板，但效果很好！

【讨论】：