托管Angular应用程序路由的MVC应用程序在第一次导航中不起作用

Question

我在MVC页面上托管的Angular应用程序中导航时遇到问题，它通常可以正常工作，但有1种情况导致URL更改，但该应用程序未显示新页面。

我将尝试将安装分解为最简单的形式，（此问题在大型企业应用程序中发生）

我们有一个MVC应用程序，其中有2页，首页和应用程序。两者都有控制器和视图。主页index.cshtml是一个简单的Razor视图，应用程序index.cshtml仅定义了<app-root></app-root>元素。这两个视图都使用基本布局页面，该页面定义了整个应用程序的导航菜单。

在菜单中，我们有4个锚标签，带有：

• href =“ / home”
• href =“ / app /＃/ page1”
• href =“ / app /＃/ page2”
• href =“ / app /＃/ page3”

在“角度”侧，我们有3页（第1页，第2页和第3页）。路由也相当简单：

    Routes = [
    {
        path: 'page1',
        component: Page1Component,
    },
    {
        path: 'page2',
        component: Page2Component,
    },
    {
        path: 'page3',
        component: Page3Component,
    },
];
@NgModule({
    imports: [RouterModule.forRoot(routes , { useHash: true, enableTracing: true } )],
    exports: [RouterModule]
})

现在，如果我在主页上并单击指向第1页的链接，则一切正常。页面发生变化，有角度的应用程序加载，一切都很好。

如果现在单击页面2的链接，则URL会更改，但是angular应用程序不会加载新组件。 （在控制台中看不到路由器跟踪）。现在它处于这种“错误”状态，我可以单击第3页，它可以工作。 URL更改和第3页组件加载。如果现在单击第2页，它也可以正常工作。

应用程序现在将正确导航，直到我返回主页（MVC）页面。从那时起，我们回到上面的情况，第一个导航有效，第二个导航无效（但URL更新），所有其他导航有效。

注意：如果我在有角度的页面（Page1，Page2和Page3）上添加链接并使用routerLink属性，则看不到问题。仅当将锚标记与HRef一起使用时，才会出现此问题。

不幸的是，由于导航菜单位于MVC基本页面上（并且它是一个非常大的企业应用程序，所以我无法将其重写为Angular组件。

任何帮助将不胜感激。

Answer 1

尝试更改

            href="/app/#/pageX"

to

            href="/pageX"