ng build --prod in angular 7 后出现导航错误答案

【问题标题】：Get navigation error after ng build --prod in angular 7ng build --prod in angular 7 后出现导航错误
【发布时间】：2020-10-30 22:50:46
【问题描述】：

我正在使用一个非常简单的 Angular 应用程序。

我有以下路由文件。

const routes: Routes = [
    {
        path: '',
        component: SelectFrameworkComponent
    }, {
        path: 'angular-4-bootstrap-3',
        component: AngularFourBootstrapThreeComponent
    }
];

这很好，但是当我使用 ng build --prod 进行构建并尝试在将 href 更改为我的 dist 文件夹 <base href=""> 后在本地运行 index.html 文件时

我在控制台中收到此错误。

Unhandled Navigation Error:  main.eac436052bd523dffe9b.js

【问题讨论】：

Paresh Gami，你找到解决方案了吗？
@Simer 实际上是当我将 dist 文件夹上传到正在工作的实时服务器时。
谢谢！ Paresh Gami，你知道为什么没有服务器它就不能工作吗？我发布了这个关于同一stackoverflow.com/questions/53626748/…的问题

标签： angular

【解决方案1】：

添加角路由器后遇到同样的问题。它似乎有路由问题，并找到了适合我的解决方案。在 index.html 中添加

&lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;

而不是

&lt;base href="./"&gt;

Chaned 路由器配置允许我在 app.module.ts 中的浏览器链接中使用哈希

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes,{useHash:true}),
    Bootstrap4FrameworkModule,
    BrowserAnimationsModule 
  ],

【讨论】：

useHash 可能会解决它，但如果您想使用更适合 SEO 和索引的“真实”网址，它实际上并不能解决问题。对 SSR 也没有帮助。

【解决方案2】：

将useHash: true 设置为RouterModule.forRoot 中提到的@suhyura

您可能还想在 index.html 中将基本 href 设置为 #，如下所示

<base href="#">

【讨论】：