在azure中部署Angular 2很简单

运行ng build——prod，它将生成一个dist文件夹，其中所有内容都捆绑在几个文件中，包括index.html。 创建一个资源组和其中的web应用程序。 使用FTP放置dist文件夹文件。在azure中，它将寻找index.html来运行应用程序。

就是这样。你的应用程序正在运行!

Angular 2在Github Pages中的部署

测试Angular2 Webpack在ghpages中的部署

首先从dist文件夹中获取所有相关文件，对我来说是: + CSS文件在资产文件夹 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

然后将这些文件推入您创建的repo中。

1 -如果你想让应用程序在根目录上运行-创建一个特殊的repo，名称为[yourgithubusername].github。IO并将这些文件推到主分支中

2——如果你想在子目录或根目录以外的不同分支中创建这些页面，创建一个分支gh-pages并将这些文件推到该分支中。

在这两种情况下，我们访问这些部署页面的方式将是不同的。

对于第一种情况，它将是https://[yourgithubusername].github.io，对于第二种情况，它将是[yourgithubusername].github。io /(回购的名字)。

如果你想使用第二种情况部署它，请确保在dist中更改index.html文件的基本url，因为所有的路由映射都依赖于你给出的路径，它应该设置为[/branchname]。

链接到本页

https://rahulrsingh09.github.io/Deployment

去回购

https://github.com/rahulrsingh09/Deployment

简单的答案。使用Angular CLI并发出

ng build 

命令在项目的根目录下。站点将在dist目录中创建，您可以将其部署到任何web服务器。

这将用于测试，如果你在你的应用程序中有生产设置，你应该使用

ng build --configuration production

这将在dist目录中构建项目，并且可以将其推送到服务器。

自从我第一次发布这个答案以来，发生了很多事情。CLI终于在1.0.0，所以按照这个指南去升级你的项目应该在你尝试构建之前发生。https://github.com/angular/angular-cli/wiki/stories-rc-update

我想说的是，很多在使用angular之前就有Web经验的人，都习惯于在战争中部署他们的Web构件(例如，在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 build，将index.html从/dist复制到WEB-INF/app。并且，添加了一个Java控制器，将所有服务器端rest调用重定向到索引。

您可以构建用于生产的应用程序

ng build --configuration=production

然后你可以检查你的角度。它的值通常是dist，但也可以是不同的。

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

使用dist作为值，生成的输出文件将放在/dist文件夹下

在构建angular项目时，你的项目将只由静态文件Html、Javascript、Css和图像或其他资产组成。正因为如此，你所需要的只是一个可以向客户端提供静态文件的web服务器。就这么简单。可以是nginx, tomcat，任何可以将这些静态文件提供给客户端的东西。这在angular的文档中也有说明

因为这些文件是静态的，你可以把它们托管在任何web服务器上 具备文件服务能力

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

你的第二个问题

我用gulp缩小它们吗

官方的方式

角。Json将包含每个环境的特定配置，其中之一将是优化

优化可以是布尔值(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也将避免样式缩小。

不管角的构型是什么。Json进行优化，它可以被覆盖，如果你在构建过程中提供一个参数。因此，通过执行ng build——configuration=production——optimization=false，它将构建用于生产的项目，并将值false应用到优化对象的每个属性，这实际上将禁用所有的最小化。

在Angular CLI中，你可以使用以下命令:

ng build --prod

它生成一个dist文件夹，其中包含部署应用程序所需的所有内容。

如果你没有使用web服务器的经验，我建议你使用Angular to Cloud。你只需要把dist文件夹压缩成zip文件，然后上传到平台上。