无法使用 WAMP 服务器中的 dist 文件夹部署 Angular 5

Question

我无法让我的 Angular 5 应用程序在 WAMP 服务器中运行。我已经阅读了许多其他堆栈溢出帖子并尝试了一些选项。

dist 文件夹制作步骤：

第 1 步 - ng build --prod --base-href "/dist/"。

第 2 步：将 dist/* 文件复制到 DOCUMENT_ROOT。

dist in root folder

enter image description here

第 3 步 - 重新启动 WAMP 服务器

第 4 步 - 本地主机。 dist 文件夹显示在 WAMP 中

enter image description here

第 5 步：localhost/dist 和 localhost/dist/index.html - 没有任何效果

第 6 步：我将基本 href 更改为“/dist/”并重新启动 WAMP - 此打开的索引文件 Dint work

第 7 步 - 基于 Angular 站点中给出的部署方法 -https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

我创建了 .htaccess 文件并复制了以下代码并将文件放在 dist 文件夹中 enter image description here

enter image description here

仍然路由不工作。请帮忙。过去 3 天都在为此苦苦挣扎！

Answer 1

我只是尝试了同样的事情，它奏效了。这就是我所做的。 首先，我将 Angular CLI 升级到最新版本。

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

然后我可以使用自定义 baseHref 进行构建，您还可以指定一个 deploy-url（此选项仅适用于 CLI 生成的文件，而不适用于您包含在资产中的文件）。顺便说一句，当您想在索引文件中包含静态文件时避免任何问题，最好的选择是这样做（在文件前面添加 ./）

<script src="./assets/bower_components/underscore/underscore-min.js" type="text/javascript"></script>

最后我用来构建的选项是这样的：

ng build --prod --base-href /dist --deploy-url ./

当我进行构建并将其放入我的 MAMP/WAMP/XAMP 时，它可以工作文件