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文件夹中部署所有文件。

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

1- Angular2团队的教程

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

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

产品说明:

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

2 - Webkit入门套件

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

Angular CLI 1.x。适用于Angular 4.x。x 5. x.x)

这支持:

角2。X和4.x 最新Webpack 2.x Angular AoT编译器 路由(正常和惰性) SCSS 自定义文件捆绑(资产) 额外的开发工具(linter，单元和端到端测试设置)

初始设置

ng new project-name --routing

你可以添加——style=scss来支持SASS .scss。

你可以添加——ng4来使用Angular 4而不是Angular 2。

创建项目后，CLI会自动为你运行npm install。如果你想使用Yarn，或者只是想查看项目框架而不安装，请在这里检查如何做到这一点。

包的步骤

在项目文件夹内:

ng build -prod

在当前版本中，您需要手动指定——aot，因为它可以在开发模式中使用(尽管由于速度慢，这是不实际的)。

它还为更小的包执行AoT编译(没有Angular编译器，而是生成编译器输出)。如果你使用Angular 4, AoT的包会更小，因为生成的代码更小。 你可以在开发模式下用AoT测试你的应用(source cemaps, no minification)，通过运行ng build——AoT测试你的应用。

输出

默认的输出目录是。/dist，尽管可以在。/angular-cli.json中更改。

部署文件

构建步骤的结果如下:

(注意:<content-hash>指的是文件内容的hash /指纹，这意味着是一种缓存破坏方式，这是可能的，因为Webpack自己写脚本标签)

。/ dist /资产 原样从。/src/assets/**复制的文件 / dist / index . html 从。/src/index.html，添加webpack脚本后 源模板文件可以在。/angular-cli.json中配置 / dist / inline.js 小型webpack加载器/ polyfill / dist /主要。< content-hash > .bundle.js 主.js文件，包含所有生成/导入的.js脚本 。/ dist /风格。< content-hash > .bundle.js 当你为CSS使用Webpack加载器时，这是CLI的方式，它们是通过JS加载的

在旧版本中，它还创建了gzip版本来检查它们的大小，以及.map源地图文件，但这不再发生，因为人们一直要求删除这些文件。

其他文件

在某些情况下，你可能会发现其他不需要的文件/文件夹:

/ out-tsc /。 从/ src / tsconfig。json的outDir / out-tsc-e2e /。 从/ e2e / tsconfig。json的outDir / dist / ngfactory / 来自AoT编译器(在beta 16中，不使用CLI就无法配置)

“最佳”取决于场景。有时你只关心最小的单个包，但在大型应用程序中，你可能不得不考虑延迟加载。在某种程度上，将整个应用程序作为一个单一的bundle提供是不切实际的。

在后一种情况下，Webpack通常是最好的方法，因为它支持代码分割。

对于单个包，我会考虑Rollup，或者Closure编译器，如果你有勇气的话:-)

我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds

代码可以在这里找到:https://github.com/thelgevold/angular-2-samples

Angular版本:4.1.x

        **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.

请在终端中使用以下命令

  ng build --configuration production --aot