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

角度 Webpack

卡卡西

2020-03-24

我正在使用这个有角度的4种子应用程序:https : //github.com/2sic/app-tutorial-angular4-hello-dnn

它使用webpack并正常工作。

它似乎只提供dev文件,而不提供dist /文件夹。

我想提供dist文件夹。

不确定执行此操作的命令或我是否需要安装精简服务器或其他工具。

我运行以下命令来创建dist文件夹(工作正常):

g build --prod --aot --output-hashing=none

现在,我想在浏览器中运行此构建。

第3652篇《如何提供Angular 2 dist文件夹index.html》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
Davaid蛋蛋 2020.03.24

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.
老丝小卤蛋梅 2020.03.24

我尝试通过全局安装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

它为我工作。

番长 2020.03.24

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

Gil米亚 2020.03.24

至少对于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等)一起使用。

西里神奇 2020.03.24

一点提示

所以你避免全局安装

安装在您的根目录

npm i http-server

在您的package.json中

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

npm run pwa 
达蒙 2020.03.24

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

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

npm install -g http-server

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

http-server

如下所示:

在此处输入图片说明

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

2020.03.24

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

ng serve --prod = true

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

https://angular.io/cli/serve

小胖Gil 2020.03.24

您可以使用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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android