你如何部署Angular应用程序？

在 Github Pages 上部署 Angular 2 应用

测试在 ghpages 上部署 Angular2 Webpack 应用

首先，从应用的 dist 目录中获取所有相关文件，对我来说包括: + assets 文件夹中的 css 文件 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推送到您创建的仓库中。

1 -- 如果您希望应用程序运行在根目录上 - 创建一个名为[yourgithubusername].github.io 的特殊仓库，并将这些文件推送到主分支上

2 -- 如果您想在子目录或与根目录不同的其他分支中创建这些页面，则需要创建一个名为gh-pages 的分支，并将这些文件推送到该分支中。

无论哪种情况，访问这些部署页面的方式都会有所不同。

对于第一种情况，它将是 https://[yourgithubusername].github.io，而对于第二种情况，它将是 [yourgithubusername].github.io/[Repo name]。

如果你想使用第二种情况进行部署，请确保更改 dist 中 index.html 文件的基本 URL，因为所有路由映射都取决于您给出的路径，应将其设置为 [/branchname]。

链接到此页面

https://rahulrsingh09.github.io/Deployment

Git 仓库

https://github.com/rahulrsingh09/Deployment

在Azure中部署Angular 2很容易

1. 运行ng build --prod，它将生成一个包含所有内容的dist文件夹，包括index.html。

2. 创建一个资源组和一个Web应用程序。

3. 使用FTP放置您的dist文件夹中的文件。在Azure中，它将查找index.html来运行应用程序。

就是这样。您的应用正在运行！

使用 Angular CLI，您可以使用以下命令：

ng build --prod

它会生成一个dist文件夹，其中包含部署应用所需的所有内容。
如果您没有使用Web服务器的经验，我建议您使用 Angular to Cloud。您只需要将dist文件夹压缩为zip文件并上传到平台即可。

我认为很多有Web经验的人在使用Angular之前，都会将他们的Web成果部署在war（即在Java / Spring项目中放置jquery和html）。在尝试保持我的Angular和REST项目分离后，我最终采用了这种方法来解决CORS问题。
我的解决方案是将所有由CLI生成的Angular（4）内容从my-app移动到MyJavaApplication / angular。然后，我修改了我的Maven构建，使用maven-resources-plugin将内容从/angular/dist移动到我的分发根目录（即$project.build.directory}/MyJavaApplication）。Angular默认从war的根目录加载资源。
当我开始向我的Angular项目添加路由时，我进一步修改了Maven构建，将index.html从/dist复制到WEB-INF / app。并且，添加了一个Java控制器，将所有服务器端rest调用重定向到index。

我一直使用Firebase托管来快速且便宜地托管Angular应用程序。第一层是免费的，并且使用Firebase CLI轻松部署新版本。这篇文章解释了将生产Angular 2应用程序部署到Firebase所需的步骤：https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d 简而言之，您需要运行ng build --prod，这会在包中创建一个dist文件夹，这个文件夹将被部署到Firebase托管中。

你可以使用以下方式构建生产应用程序：

ng build --configuration=production

然后您可以检查您的 angular.json 文件中的 outputPath 键，通常它的值为 dist，但也可能不同。

"build": {
          "options": {
            "outputPath": "dist"

将dist作为值，构建输出的文件将被放置在文件夹/dist下。

构建完成后，您的Angular项目将仅包含静态文件HTML、JavaScript、CSS和图像或其他资产。因此，您只需要一个能够向客户端提供静态文件的Web服务器。可以是Nginx、Tomcat或任何能够向客户端提供这些静态文件的服务器。这也在angular文档中说明。

由于这些文件是静态的，您可以将它们托管在任何能够提供文件服务的Web服务器上。

您的构建项目在outputPath下已经包含了一个index.html，其中已经自动导入了所有必要的内容，因此当index.html传递给客户端时，浏览器也会获取所有其他必要的文件。必要的信息已经包含在index.html中。

您问题的第二部分

我是否应该使用gulp对它们进行缩小处理

官方方式

"

angular.json将包含每个环境的特定配置，其中之一是optimization

optimization可以是布尔值（true、false）

"

"configurations": {
            "production": {
              "optimization": true  --> will mean true for all properties of the next custom object

优化也可以是自定义对象

 "configurations": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": true
      },
      "fonts": true
    }

切换到 "scripts": false 将导致 .js 文件不被压缩。

同时，切换到样式 -> "minify": false 也将避免样式的压缩。

无论你在 angular.json 中做了什么配置，如果在构建过程中提供了参数，它都可以被覆盖。因此，通过执行 ng build --configuration=production --optimization=false，它将为生产环境构建项目，并将optimization 对象的每个属性应用值 false，这实际上会禁用所有内容的压缩。

截至2017年，最好的方法是使用angular-cli（v1.4.4）来构建你的angular项目。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

您无需显式添加 --aot，因为它已随 --prod 默认启用。而使用 --output-hashing 则取决于您个人对缓存破坏的偏好。

您可以通过添加以下内容来显式添加 CDN 支持：

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

如果您计划使用CDN进行托管，那么速度会相当快。

对于那些遇到“Failed to load module script:…”错误的人。只需转到您的angular.json并将“OutputPath”更改为“dist”。然后运行ng build --configuration production来构建您的应用程序。
原因是angular认为您的应用程序位于根目录中，但如果您不进行此更改，则实际上它位于根目录/您的应用程序名称。

只需按照下面的链接进行操作，

更改您的Index.html页面脚本文件路径 如果出现找不到位置的错误，请更改您的组件.html路径

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy