如何提供Angular 2 dist文件夹index.html

I use the VS Code extension Live Server.

1. Run your ng build which will output the dist/ folder with index.html
2. Open separate instance of VS Code onto the dist/ folder
3. Press "Go Live" button in bottom right of VS Code status bar which you will see after installing the Live Server extension.

我尝试通过全局安装http服务器

npm install -g http-server

然后移到dist / project-folder并尝试

http-server -o

控制台输出

[Fri Sep 13 2019 15:19:57 GMT+0530 (India Standard Time)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132
Safari/537.36"

然后，此解决方案使用了所有相同的步骤，但没有使用http-server try angular-http-server

它为我工作。

ng serve将正常运行，并且不需要事先构建。它在内存中生成文件，并具有一些其他功能，例如自动重新加载。

至少对于Angular应用程序来说，这angular-http-server似乎是一个更好的选择。

首先使用您喜欢的软件包管理器进行安装，例如

npm install angular-http-server -g

要么

yarn global add angular-http-server

然后执行它：

angular-http-server --path path/to/dist/folder

查看回购以获取有关用法的更多信息。

PS：作者认为，它还应与其他SPA框架（React，Vue等）一起使用。

一点提示

所以你避免全局安装

安装在您的根目录

npm i http-server

在您的package.json中

"scripts": {
    "pwa": "http-server ./dist"
  }

比

npm run pwa 

您需要一个服务器来服务您生成的构建。

我正在使用http服务器。使用以下命令安装http-server：

npm install -g http-server

现在进入dist文件夹并运行此命令

http-server

如下所示：

在浏览器中检查http：// localhost：8080

我使用Angular CLI为dist文件夹提供服务...

ng serve --prod = true

如果为true，则将构建配置设置为生产目标。所有建筑都利用捆绑和有限的摇树。生产版本还可以消除有限的死代码。

https://angular.io/cli/serve

您可以使用http-server这样做。首先使用命令生成一个构建ng build --prod --aot --output-hashing=none。这将在目录结构中创建一个dist文件夹。

之后，运行http-server ./dist，这将开始从dist文件夹提供您的项目。

确保使用以下命令全局安装了http-server

npm install http-server -g

有关参考，请参见https://www.npmjs.com/package/http-server