把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本，以便我们在它转移到后续版本时更好地跟踪。
当前回答
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就无法配置)
其他回答
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文件夹中部署所有文件。
2.0.1 Final using Gulp (TypeScript - Target: ES5)
前设置
npm安装(在cmd中运行时目录是projectFolder)
捆绑销售的步骤
运行bundle(当目录为projectFolder时在cmd下运行) bundle被生成到projectFolder / bundles /
输出
bundles/dependencies.bundle.js[大小:~ 1 MB(尽可能小)] 包含RXJS和angular依赖项，而不是整个框架 bundle /app.bundle.js[大小:取决于你的项目，我的是~ 0.5 MB] 包含您的项目
文件结构
projectFolder / app /(所有组件、指令、模板等) projectFolder / gulpfile.js
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
Builder = require('systemjs-builder'),
inlineNg2Template = require('gulp-inline-ng2-template');
gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});
gulp.task('inline-templates', function () {
return gulp.src('app/**/*.ts')
.pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
.pipe(tsc({
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
}))
.pipe(gulp.dest('dist/app'));
});
gulp.task('bundle-app', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
gulp.task('bundle-dependencies', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
projectFolder / package。json(与快速入门指南相同，只是显示了捆绑所需的devDependencies和npm脚本)
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
***
"gulp": "gulp",
"rimraf": "rimraf",
"bundle": "gulp bundle",
"postbundle": "rimraf dist"
},
"license": "ISC",
"dependencies": {
***
},
"devDependencies": {
"rimraf": "^2.5.2",
"gulp": "^3.9.1",
"gulp-typescript": "2.13.6",
"gulp-inline-ng2-template": "2.0.1",
"systemjs-builder": "^0.15.16"
}
}
projectFolder / systemjs.config.js(与快速入门指南相同，不再可用)
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.asp's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
projetcFolder / dist-systemjs.config.js(刚刚显示了与systemjs.config.json的区别)
var map = {
'app': 'dist/app',
};
projectFolder / index.html(生产)——脚本标记的顺序很关键。将dist-systemjs.config.js标记放在bundle标记之后仍然允许程序运行，但是依赖包将被忽略，依赖项将从node_modules文件夹中加载。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<base href="/"/>
<title>Angular</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<my-app>
loading...
</my-app>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
projectFolder / app / boot。t是自举点所在的位置。
这是我能做的最好的:)
请在当前项目目录下尝试以下CLI命令。它将创建dist文件夹bundle。因此，您可以上传dist文件夹中的所有文件进行部署。
Ng build——prod——aot——base-href。
“最佳”取决于场景。有时你只关心最小的单个包，但在大型应用程序中，你可能不得不考虑延迟加载。在某种程度上，将整个应用程序作为一个单一的bundle提供是不切实际的。
在后一种情况下，Webpack通常是最好的方法，因为它支持代码分割。
对于单个包，我会考虑Rollup，或者Closure编译器，如果你有勇气的话:-)
我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds
代码可以在这里找到:https://github.com/thelgevold/angular-2-samples
Angular版本:4.1.x
你可以在github上使用 angular-cli-ghpages
请查看链接，以了解如何使用此cli进行部署。
部署的网站通常会存储在github的某个分支中
gh-pages
使用可以克隆git分支和使用它像静态网站在您的服务器
推荐文章
- 如何用angular 2路由器重新加载当前路由
- 创建组件与Angular-CLI &将它添加到一个特定的模块
- @HostBinding和@HostListener:它们是做什么用的?
- 如何在TypeScript中实现睡眠函数?
- 在Angular 6中生成服务时，为din提供可注入装饰器的目的是什么?
- 如何在webpack.config.js中使用ES6 ?
- 如何在angular2中调用另一个组件函数
- Angular 2可选的路由参数
- 获取Angular中的当前url
- 如何下载Angular2或更高版本的文件
- Angular2 @Input到一个get/set属性中
- 如何将“类”添加到主机元素?
- Angular 2选中双向数据绑定
- markForCheck()和detectChanges()的区别是什么
- 如何在angular 2 typescript应用程序中使用moment.js库?
