ng build 后只有主页在 angular 网站上有效

Question

我正在开发 Angular 8 网站。该站点有多个页面，www.site.com、www.site.com/foo 和 www.site.com/bar。当我使用 ng serve 时，一切正常。但是，当我运行 ng build、ng build --prod 或 ng build --aot 时，唯一可用的页面是根页面。 www.mywebsite.com 会工作，但 www.mywebsite.com/foo 和 www.mywebsite.com/bar 是一个带有 "File not found."

的白屏

我尝试过使用 ng build、ng build --prod 和 ng build --aot 进行构建。

我也尝试过遵循此 When running ng build, the index.html does nothing?

中的说明

这是我应用程序中的一些路线-routing.module.ts

const routes: Routes = [
  { path: '', component: HomepageComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'editorial', component:  EditorialArticleComponent},
  { path: 'article/:id', component: ArticleComponent },
];

更新：我在 Ubuntu 服务器上使用 nginx

Answer 1

这可以通过设置 HashLocationStrategy 来完成，在更改 url 之后，您需要在供应商列表中将 LocationStrategy 设置为 HashLocationStrategy看起来像这样 www.mywebsite.com/#/

{
 providers : [
      { provide: LocationStrategy, useClass: HashLocationStrategy },
 ]
}

demo

还要检查这个

Answer 2

如果您在 IIS 中部署应用程序

然后你需要确定以下事情:

URL重写安装

在您的应用程序中添加 web.config URL 重写

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/ePortal" />
    </rule>
  </rules>
</rewrite>
  </system.webServer>
</configuration>

ng build 后只有主页在 angular 网站上有效

Only homepage works on angular site after ng build

angular

angular-ui-router