Не удается получить доступ к угловым компонентам через URL

Question

Я сделал Angular Application, который должен располагаться поверх .NET-Application. Существует индексное представление ASP.Net-приложения, из которого мне следует вызвать определенный Angular-View.

Для тестирования я попытался локально разместить приложение с http serve - здесь я могу получить доступ только к индексу.html (который в моем случае не имеет записей) - маршрут типа /users для перехода к обзору пользователей приводит к 404.

Вот мой модуль маршрутизации:

const routes: Routes = [
  {path: 'users', component: UsersComponent},
  {path: 'user/new', component: UserNewComponent},
  {path: 'user/edit/:id', component: UserEditComponent}
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Я знаю, что это должно быть одностраничное приложение, но сейчас для этой итерации должно быть так. Как я могу решить это?

Answer 1

RouterModule.forRoot(routes, { useHash: true }) 

Попробуйте useHash: true в app.routing файле. Это работает для меня.

Answer 2

Решением было добавить web.config с явными правилами перезаписи для IIS, а также URL-Rewriter 2.

Config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

Answer 3

Вам понадобится сервер, который перенаправит все маршруты на index.html. http serve не будет этого делать.

Внутренне Angular обрабатывает маршруты, используя нечто, называемое виртуальными маршрутами.

Например:

В Node.js у нас есть что-то вроде

app.get('*', function (req, res) {
  res.sendFile(path.join(frontend_path, 'index.html'));
});

В целях разработки вы можете запустить локальный сервер, используя

ng serve

В Angular Directory верхнего уровня