如果你像我一样在localhost上测试应用程序，或者你会有一些空白白页的问题，我使用这个:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

解释:

ng build

构建应用程序，但在代码中有许多空格，制表符和其他东西，使代码能够被人类阅读。对于服务器来说，代码看起来如何并不重要。这就是为什么我使用:

ng build --prod --build-optimizer 

这使得代码可以用于生产并减少大小[——build-optimizer]允许减少更多的代码]。

所以最后我添加——base-href="http://127.0.0.1/my-app/"来显示应用程序在哪里是'主框架'[简单的话]。有了它，你甚至可以在任何文件夹中拥有多个angular应用。

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

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应用到优化对象的每个属性，这实际上将禁用所有的最小化。

你其实是在同时回答两个问题。

第一个问题是如何托管应用程序。 正如@toskv提到的，这个问题太宽泛了，无法回答，取决于许多不同的事情。

第二个问题是如何准备应用程序的部署版本? 这里有几个选项:

Deploy as it is. Just that - no minification, concatenation, name mangling, etc. Transpile all your ts project copy all your resulting js/css/... sources + dependencies to the hosting server and you are good to go. Deploy using special bundling tools, like webpack or systemjs builder. They come with all the possibilities that are lacking in #1. You can pack all your app code into just a couple of js/css/... files that you reference in your HTML. systemjs builder even allows you to get rid of the need to include systemjs as part of your deployment package. You can use ng deploy as of Angular 8 to deploy your app from your CLI. ng deploy will need to be used in conjunction with your platform of choice (such as @angular/fire). You can check the official docs to see what works best for you here

是的，你很可能需要将systemjs和其他一些外部库部署到你的包中。是的，你可以将它们捆绑到你从HTML页面引用的几个js文件中。

你不需要从页面中引用所有已编译的js文件——systemjs作为模块加载器会处理这些。

我知道这听起来很模糊——为了帮助你开始第2点，这里有两个非常好的示例应用程序:

SystemJS构建器:angular2种子

安检检测器

点击下面的链接，

修改Index.html页面的脚本文件路径 改变你的component.html路径，以防你的获取错误无法找到位置

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

为了将你的Angular2应用部署到生产服务器上，首先要确保你的应用在你的机器上本地运行。

Angular2应用也可以部署为节点应用。

因此，创建一个节点入口点文件server.js/app.js(我的例子使用express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

还要在包中添加express作为依赖项。json文件。

然后将其部署到您喜欢的环境中。

我已经整理了一个关于IIS部署的小博客。按照链接

使用Angular CLI，这很简单。以Heroku为例:

创建Heroku帐号并安装CLI 移动angular-cli dep到package中的依赖项。json(这样当你推送到Heroku时它就会被安装。 添加一个postinstall脚本，当代码被推送到Heroku时将运行ng build。还要为将在下面的步骤中创建的Node服务器添加启动命令。这将把应用程序的静态文件放在服务器上的dist目录中，然后启动应用程序。

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

创建一个Express服务器来服务应用程序。

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

创建一个Heroku远程和推动部署应用程序。

heroku create
git add .
git commit -m "first deploy"
git push heroku master

下面是我做的一个快速的书写，有更多的细节，包括如何强制请求使用HTTPS，以及如何处理PathLocationStrategy:)