在 Angular 7 中执行 ng build --prod 后出现导航错误

Question

我是一个非常简单的Angular应用程序。

我有以下路由文件:

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

这个功能运行良好，但是当我使用ng build --prod进行构建并尝试在本地运行修改过href指向我的dist文件夹的index.html文件时，出现以下控制台错误。

Unhandled Navigation Error:  main.eac436052bd523dffe9b.js

- Paresh Gami

---

Paresh Gami，你找到解决方案了吗？ - Always_a_learner

@Simer 实际上，当我将dist文件夹上传到生产服务器时，它可以正常工作。 - Paresh Gami

谢谢！Paresh Gami，你有没有想法为什么它没有服务器就无法工作？我在这个问题上发布了同样的问题https://stackoverflow.com/questions/53626748/why-angular-app-dist-build-needs-to-be-served-on-web-server - Always_a_learner

Answer 1

在添加了Angular路由之后，我遇到了同样的问题。看起来是路由问题，我找到了一个适合我的解决方案。

在index.html中添加以下内容：

<script>document.write('<base href="' + document.location + '" />');</script>

最初的回答

而不是

<base href="./">

改变了路由器配置，使我能够在app.module.ts中使用哈希在浏览器链接中。翻译后的内容为：

修改路由器配置，使应用程序模块中的浏览器链接可以使用哈希。

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

- suhyura

---

useHash 可能会解决问题，但如果您想使用更适合 SEO 和索引的“真实” URL，则实际上不会解决问题。并且不会帮助处理 SSR。 - Reza Kajbaf

Answer 2

在RouterModule.forRoot中设置useHash: true，如@suhyura所述

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

<base href="#">

- Brijesh Lakkad