Question

我制作了一个Angular应用程序，该应用程序应该位于.NET应用程序的顶部。我应该从ASP.Net-Application的Index-View中调用某个Angular-View。

为了进行测试，我尝试在本地使用http serve托管应用程序-在这里，我只能访问index.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

您将需要一台将所有路由重定向到index.html的服务器。 http serve不会那样做。

在内部，Angular通过使用称为虚拟路由的东西来处理路由。

例如：

在Node.js中，我们有类似的东西，

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

出于开发目的，您可以使用以下命令运行本地服务器

ng serve

在顶级Angular目录中

Answer 3

解决方案是添加一个带有针对IIS以及URL-Rewriter 2的明确重写规则的web.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>

无法通过URL访问Angular组件

3 个答案: