Angular router удаляет параметры запроса при развертывании на сервере IIS - PullRequest
0 голосов
/ 27 сентября 2018

Я пытаюсь использовать Angular router, но у меня возникают проблемы при развертывании приложения.Во-первых, вот мои версии:

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 = что угодно

Это кажется довольно простым, верно?

Вот мое определение маршрутов в определенном модуле:

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

В моем 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 serve) В локальном и производственном режиме он также работает хорошо (ng serve --prod)

Я создаю приложение с помощью этой команды: ng build --base-href / TestRouting / --prod

После развертывания

mydomain.com / TestRouting / перенаправляет на mydomain.com / TestRouting / my-route (ожидаемое поведение) mydomain.сom / TestRouting / my-route отображает компонент (ожидаемое поведение), НО mydomain.com / TestRouting / my-route? route = test перенаправляет на mydomain.com / TestRouting / my-маршрут (ну, это не нормально ...)

У кого-нибудь есть идея?Большое спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Благодаря @ritaj я решаю проблему, используя стратегию HashLocation .Он изменил шаблон URL, но он работает хорошо!

0 голосов
/ 27 сентября 2018

Это никак не связано с Angular.Вы переписываете URL с помощью /TestRouting и игнорируете строку запроса, попробуйте это:

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