http-server -p 8080 不服务于我的角度应用程序。而 ng 服务则

Question

这是我打开本地主机时看到的内容

我想用 Angular 制作一个 PWA，所以我按照 angular.io 网站上的说明进行操作，直到最小的细节，但它没有打开通常的“欢迎使用您的应用程序”页面。可能是什么问题？

我安装了以下内容：

Angular CLI：6.0.1
节点：8.9.4
操作系统：linux x64
角度：6.0.1

这是当我单击 pwaApp 时控制台显示的内容，浏览器将我定向到空白页面

我的问题是什么？我该如何解决它？预先感谢

Answer 1

我在Angular6中也面临这个问题，但可以通过以下步骤解决

1. 使用

   ng build --prod

进行分布
2. 然后

cd dist
cd project_name
npx http-server

3. 单击服务器启动后给出的任何IP，例如

   127.0.0.1:8080

Answer 2

我找到了解决方案。我必须构建应用程序，然后 cd 到 dist，然后 cd （再次）到构建的应用程序，然后再 http-server -p 8080。我遵循的教程刚刚提到 cd 到 dist 并提供服务，所以不是很清楚。

Answer 3

看来您的 dist 文件夹是空的。请仔细检查并确保您的构建成功。lite-server 这就是我经常用来运行我的角度应用程序的东西。看一下这个链接https://github.com/angular/angular-cli/wiki/stories-disk-serve。 即使您使用 http-server，当您重新加载页面时，它也会显示 404 错误。找不到网页。最好的解决方案是使用 lite-server。

npm i lite-server -g

然后 cd 进入应用程序的根路径并运行

lite-server --baseDir="dist"

默认情况下，您的应用程序将在端口

3000

上运行。 如果您想在不同的端口上运行它，请查看这个答案https://stackoverflow.com/a/35517817/6261137

Answer 4

看起来您在父文件夹中启动了开发服务器。

您的应用程序构建成功了吗？

Answer 5

在 Angular 17 上，您可以只运行 ng build 因为 默认情况下，ng build 命令使用生产配置

这将生成 dist/[projectname]/browser，我注意到它包含该项目的所有资产。所以我所做的是

1.) 在 ng build 之前，在 index.html 上修改并删除 /

2.) 运行 ng build

3.) 将 dist/[projectname]/browser 的内容移动到 dist/[projectname]

4.) cd dist/[项目名称] 并运行 http-server -p [端口号]

5.）您将到达索引，刷新页面，它应该会显示