如何将Angular应用捆绑到生产环境中

把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?

请在回答中包含Angular版本，以便我们在它转移到后续版本时更好地跟踪。

当前回答

2到14 (TypeScript)使用Angular CLI

前设置

NPM install -g @angular/cli 创建一个新的应用程序

捆绑销售的步骤

ng build(当目录为projectFolder时在命令行中运行)。 flag prod bundle for production现在是默认的(如果需要，请参阅Angular文档自定义它)。使用Brotli压缩使用以下命令压缩资源对于dist/*/*中的I;Do brotli $i;完成

包默认生成到projectFolder/dist(/$projectFolder for v6+)**

输出

Angular 14.0.2的大小和CLI 14.0.2的选项CSS没有Angular路由

dist/main.[hash].js Your application bundled [ size: 118 KB for new Angular CLI application empty, 36 KB compressed]. dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS...) bundled [ size: 34 KB for new Angular CLI application empty, 11 KB compressed]. dist/index.html entry point of your application. dist/runtime.[hash].bundle.js webpack loader dist/style.[hash].bundle.css the style definitions dist/assets resources copied from the Angular CLI assets configuration

部署

可以使用ng serve——prod命令预览应用程序，该命令启动本地HTTP服务器，这样就可以使用http://localhost:4200访问带有生产文件的应用程序。这在生产中使用并不安全。

对于生产应用，必须从所选择的HTTP服务器中的dist文件夹中部署所有文件。

2016-08-04 11:18:47

其他回答

请在当前项目目录下尝试以下CLI命令。它将创建dist文件夹bundle。因此，您可以上传dist文件夹中的所有文件进行部署。

Ng build——prod——aot——base-href。

2019-05-15 07:42:29

使用SystemJs生成器和gulp的Angular 2生产工作流

角。IO有快速入门教程。我复制了本教程，并扩展了一些简单的gulp任务，将所有内容捆绑到dist文件夹，可以复制到服务器并像那样工作。我尝试优化所有内容，以便在Jenkis CI上正常工作，因此node_modules可以被缓存，不需要复制。

源代码与示例应用程序在Github: https://github.com/Anjmao/angular2-production-workflow

Steps to production

清洁打字文件编译js文件和dist文件夹在app文件夹内编译typescript文件使用SystemJs捆绑器将所有内容捆绑到dist文件夹，并生成哈希值，以便浏览器缓存刷新使用gulp-html-replace将index.html脚本替换为捆绑版本并复制到dist文件夹复制资产文件夹内的所有内容到dist文件夹

Node:虽然你总是可以创建自己的构建过程，但我强烈建议使用angular-cli，因为它有所有需要的工作流，现在它工作得很完美。我们已经在生产环境中使用它了，在使用angular-cli时没有任何问题。

2016-09-18 18:59:20

        **Production build with

         - Angular Rc5
         - Gulp
         - typescripts 
         - systemjs**

        1)con-cat all js files  and css files include on index.html using  "gulp-concat".
          - styles.css (all css concat in this files)
          - shims.js(all js concat in this files)

        2)copy all images and fonts as well as html files  with gulp task to "/dist".

        3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
         Using gulp  'systemjs-builder'

            SystemBuilder = require('systemjs-builder'),
            gulp.task('system-build', ['tsc'], function () {
                var builder = new SystemBuilder();
                return builder.loadConfig('systemjs.config.js')
                    .then(function () {
                        builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
                    })
                    .then(function () {
                        del('temp')
                    })
            });


    4)Minify bundles  using 'gulp-uglify'

jsMinify = require('gulp-uglify'),

    gulp.task('minify', function () {
        var options = {
            mangle: false
        };
        var js = gulp.src('dist/app/shims.js')
            .pipe(jsMinify())
            .pipe(gulp.dest('dist/app/'));
        var js1 = gulp.src('dist/app/app_libs_bundle.js')
            .pipe(jsMinify(options))
            .pipe(gulp.dest('dist/app/'));
        var css = gulp.src('dist/css/styles.min.css');
        return merge(js,js1, css);
    });

5) In index.html for production 

    <html>
    <head>
        <title>Hello</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />

       <link rel="stylesheet" href="app/css/styles.min.css" />   
       <script type="text/javascript" src="app/shims.js"></script>  
       <base href="/">
    </head>
     <body>
    <my-app>Loading...</my-app>
     <script type="text/javascript" src="app/app_libs_bundle.js"></script> 
    </body>

    </html>

 6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.

2017-01-10 08:42:32

带Webpack的Angular 2(不需要CLI设置)

1- Angular2团队的教程

Angular2团队发布了一个使用Webpack的教程

我将教程中的文件创建并放置在一个小型GitHub种子项目中。因此，您可以快速地尝试工作流。

产品说明:

npm安装 npm的开始。为发展。这将创建一个虚拟“dist”文件夹，该文件夹将被重载到您的本地主机地址。 NPM运行构建。用于生产。这将创建一个可以发送到web服务器的物理“dist”文件夹版本。dist文件夹有7.8MB，但实际上只需要234KB就可以在web浏览器中加载页面。

2 - Webkit入门套件

这个Webpack入门套件比上面的教程提供了更多的测试功能，看起来很受欢迎。

2016-10-08 20:41:50

只要在一分钟内用webpack 3安装angular 4，你的开发和生产ENV包就会准备好，没有任何问题只要跟随下面的github文档

https://github.com/roshan3133/angular2-webpack-starter