Cách gói ứng dụng Angular cho sản xuất


353

Phương pháp tốt nhất để gói Angular (phiên bản 2, 4, 6, ...) để sản xuất trên máy chủ web trực tiếp là gì.

Vui lòng bao gồm phiên bản Angular trong câu trả lời để chúng tôi có thể theo dõi tốt hơn khi chuyển sang phiên bản mới hơn.


Để bây giờ (RC1). Dưới đây là một vài giải pháp stackoverflow.com/questions/37324511/how-to-bundle-angular2-rc1-with-systemjs
Pat M


RC3 hiện cung cấp một phiên bản tệp được đóng gói làm giảm số lượng yêu cầu từ 300+ xuống còn khoảng 40.
Pat M

2
Chào. Tôi cũng ghét WebPack và xây dựng các bước nói chung. Sắp xếp quá mức cần thiết cho việc cố gắng kết hợp một trang web đơn giản. Vì vậy, tôi đã thực hiện điều này: github.com/schungx/angular2-bundle
Stephen Chung

Cảm ơn bạn Stephen. Đây sẽ là một giải pháp đơn giản cho các nhà cung cấp. Hy vọng điều này có thể được chính thức cung cấp và cập nhật. Tôi cho rằng bạn sử dụng một cái gì đó như Gulp cho các tập tin của dự án?
Pat M

Câu trả lời:


362

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) với CLI góc

Cài đặt OneTime

  • npm install -g @angular/cli
  • ng new projectFolder tạo một ứng dụng mới

Bước đi kèm

  • ng build --prod(chạy trong dòng lệnh khi thư mục là projectFolder)

    prodgói cờ cho sản xuất (xem tài liệu Angular để biết danh sách tùy chọn đi kèm với cờ sản xuất).

  • Nén bằng Brotli nén tài nguyên bằng lệnh sau

    for i in dist/*; do brotli $i; done

các gói được tạo theo mặc định cho projectFolder / dist (/ $ projectFolder cho 6)

Đầu ra

Kích thước với Angular 9.0.0với CLI 9.0.1và CSS tùy chọn mà không cần định tuyến Angular

  • dist/main-[es-version].[hash].jsỨng dụng của bạn được gói [kích thước ES5: 158 KB cho ứng dụng Angular CLI mới trống, được nén 40 KB ].
  • dist/polyfill-[es-version].[hash].bundle.jscác phụ thuộc polyfill (@angular, RxJS ...) được gói [kích thước ES5: 127 KB cho ứng dụng Angular CLI mới trống, nén 37 KB ].
  • dist/index.html điểm vào của ứng dụng của bạn.
  • dist/runtime-[es-version].[hash].bundle.js trình tải webpack
  • dist/style.[hash].bundle.css định nghĩa phong cách
  • dist/assets tài nguyên được sao chép từ cấu hình tài sản CLI góc

Triển khai

Bạn có thể xem trước ứng dụng của mình bằng ng serve --prodlệnh khởi động máy chủ HTTP cục bộ sao cho có thể truy cập ứng dụng có tệp sản xuất bằng http: // localhost: 4200 .

Để sử dụng sản xuất, bạn phải triển khai tất cả các tệp từ distthư mục trong máy chủ HTTP bạn chọn.


Tôi đã gặp lỗi khi chạy cài đặt npm -g angular-cli @ webpack: npm ERR! Vui lòng bao gồm tệp sau với bất kỳ yêu cầu hỗ trợ nào: .... \ npm-debug.log. Bạn có biết những gì đang xảy ra?
Chong Wang

2
@chrismarx nó chỉ tạo ra một gói bao gồm tất cả các thành phần với html và kiểu của chúng.
Nicolas Henneaux

4
Tôi đã có một ứng dụng và tôi muốn sử dụng phương pháp này, vì vậy tôi khởi chạy ng init từ thư mục dự án. Tôi đã thực hiện các bước còn lại nhưng khi tôi triển khai các ứng dụng của mình thì dường như trống rỗng. Điều duy nhất xuất hiện là một "ứng dụng hoạt động!" Tin nhắn, có nơi nào tôi phải đặt nơi lấy tệp ứng dụng của mình không?
mautrok

2
ng-init đã được gỡ bỏ khỏi cli góc. github.com/angular/angular-cli/issues/5176
Pat M

2
Cuối cùng tôi đã đánh dấu đây là câu trả lời được chấp nhận. Mặc dù các giải pháp khác có thể hoạt động tốt và thậm chí cung cấp thêm một số tính linh hoạt (tôi đã đăng một bài về việc sử dụng Webpack mà không có CLI). Sử dụng Angular CLI chắc chắn là một cách giúp giảm bớt đau đầu. Tôi đã kết thúc việc sử dụng Angular CLI và điều chỉnh dự án của mình để tôi có thể sử dụng AoT dễ dàng hơn.
Pat M

57

2.0.1 Final sử dụng Gulp (TypeScript - Target: ES5)


Cài đặt OneTime

  • npm install (chạy trong cmd khi direcory là projectFolder)

Các bước đi kèm

  • npm run bundle (chạy trong cmd khi direcory là projectFolder)

    các gói được tạo để projectFolder / bundles /

Đầu ra

  • bundles/dependencies.bundle.js [ kích thước: ~ 1 MB (càng nhỏ càng tốt)]
    • chứa rxjs và các phụ thuộc góc, không phải toàn bộ khung
  • bundles/app.bundle.js[ kích thước: phụ thuộc vào dự án của bạn , của tôi là ~ 0,5 MB ]
    • chứa dự án của bạn

Cấu trúc tệp

  • projectFolder / ứng dụng / (tất cả các thành phần, chỉ thị, mẫu, v.v.)
  • 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 / pack.json (giống như hướng dẫn Quickstart , chỉ hiển thị devDependencies và npm-scripts cần thiết để gói)

{
  "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"
  }
}

(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 (chỉ cho thấy sự khác biệt với systemjs.config.json)

var map = {
    'app':                        'dist/app',
  };
  • projectFolder / index.html (sản xuất) - Thứ tự của các thẻ script là rất quan trọng. Đặt dist-systemjs.config.jsthẻ sau thẻ bó vẫn sẽ cho phép chương trình chạy nhưng gói phụ thuộc sẽ bị bỏ qua và phụ thuộc sẽ được tải từ node_modulesthư mục.

<!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.ts là nơi bootstrap.

Điều tốt nhất tôi có thể làm được :)


2
Xin chào, tập lệnh gulp đang tạo các gói, nhưng tôi không chắc nên có gì trong tệp boot.ts? Không phải tất cả các tệp bây giờ trong gói? Chúng tôi thực hiện các gói?
chrismarx

2
Huh, tôi đoán tôi cần phải thử lại. Tôi đã thử chuyển sang builder.buildStatic và gặp lỗi từ rxjs về việc không được tải dưới dạng mô-đun chung hoặc amd. Tôi sẽ đưa ra gợi ý của bạn một lần thử khác
chrismarx

1
Tôi cũng không rõ làm thế nào các gói thực sự được sử dụng trong thiết lập này? Tôi dường như đang chạy vào các vấn đề chính xác như @chrismarx ở đây. Tôi có thể tạo các gói, nhưng sau đó có vẻ như mọi thứ vẫn đang được tải từ thư mục ứng dụng được sao chép và sao chép của tôi (nằm ở dist / app). Nếu tôi nhìn vào bảng điều khiển mạng của mình, tôi có thể thấy rằng các tệp liên quan đến ứng dụng của tôi thực sự được tải từ đó (các thành phần, v.v.), thay vì mọi thứ liên quan đến ứng dụng đến từ app.bundle.js. A_Singh, bạn có thể chia sẻ boot.ts của bạn không? Có vẻ như tôi đang thiếu một cái gì đó ở đây và sẽ yêu thích một số làm rõ.
jbgarr

1
A_Singh, tôi không thấy nó giúp như thế nào. Khi inline-templatesđược chạy, nó sẽ nội tuyến các mẫu sau đó tạo một bản sao của tất cả các thư mục và tệp ứng dụng tại dist/app. Sau đó, trong dist-systemjs.config.jsbạn ánh xạ apptới dist/appmà là một thư mục đó sẽ không tồn tại nếu bạn sử dụng các distthư mục root. Bạn có muốn chạy ứng dụng của mình từ distthư mục không? Và nếu đó là trường hợp, bạn sẽ không có một distthư mục được lồng trong distthư mục gốc . Tôi phải thiếu một cái gì đó khác ở đây. Bạn không cần phải nói với systemjs sử dụng các tệp được đóng gói của bạn chứ không phải các tệp thông thường được tìm thấy trong dist/appthư mục?
jbgarr

1
Tôi đang gặp vấn đề với giải pháp của bạn, boot là thứ không tồn tại ở đây và khi tôi thay thế nó bằng "ứng dụng" thì tôi không xác định được mô-đun ".
LoïcR

22

Angular 2 với Webpack (không có thiết lập CLI)

1- Hướng dẫn của nhóm Angular2

Nhóm Angular2 đã xuất bản một hướng dẫn sử dụng Webpack

Tôi đã tạo và đặt các tệp từ hướng dẫn trong một dự án hạt giống GitHub nhỏ . Vì vậy, bạn có thể nhanh chóng thử quy trình làm việc.

Hướng dẫn :

  • cài đặt npm

  • npm bắt đầu . Cho sự phát triển. Điều này sẽ tạo một thư mục "dist" ảo sẽ được tải về tại địa chỉ localhost của bạn.

  • npm chạy xây dựng . Cho việc sản xuất. "Điều này sẽ tạo ra một phiên bản thư mục" dist "vật lý hơn mức có thể được gửi đến máy chủ web. Thư mục dist là 7,8 MB nhưng thực sự chỉ cần 233KB để tải trang trong trình duyệt web.

2 - Một bộ khởi động Webkit

Bộ công cụ khởi động Webpack này cung cấp một số tính năng thử nghiệm hơn hướng dẫn ở trên và có vẻ khá phổ biến.


xin chào, có thể cập nhật dự án hạt giống với 2.1.0 không? Hướng dẫn sử dụng góc 2.1.0 bây giờ. Tôi đã làm theo nó và không thể làm cho nó hoạt động. Lỗi là http 404 - không thể tìm thấy app.component.html.
heq99

Tôi cập nhật lên 2.1.0 góc mà không có vấn đề. app.component.html được gọi từ app.component.ts (templateUrl: './app.component.html'). Bạn có cả hai tập tin trong cùng một thư mục ứng dụng?
Pat M

1
Cây rung, Giảm thiểu & Gzipping có thể làm giảm đáng kể kích thước khi bạn đi sản xuất. đây là một bài đọc tuyệt vời với ví dụ, blog.mgechev.com/2016/06/26/ Kẻ
Hamzeen Hameem

16

Quy trình sản xuất Angular 2 với trình xây dựng SystemJs và gulp

Angular.io có hướng dẫn bắt đầu nhanh chóng. Tôi đã sao chép hướng dẫn này và mở rộng với một số tác vụ gulp đơn giản để gói mọi thứ vào thư mục dist có thể được sao chép vào máy chủ và hoạt động như vậy. Tôi đã cố gắng tối ưu hóa mọi thứ để hoạt động tốt trên Jenkis CI, vì vậy node_modules có thể được lưu trữ và không cần phải sao chép.

Mã nguồn với ứng dụng mẫu trên Github: https://github.com/Anjmao/angular2-production-workflow

Các bước để sản xuất
  1. Làm sạch các bản thảo được biên dịch các tập tin js và thư mục dist
  2. Biên dịch tập tin bản in trong thư mục ứng dụng
  3. Sử dụng gói SystemJs để gói mọi thứ vào thư mục dist với các băm được tạo để làm mới bộ đệm của trình duyệt
  4. Sử dụng gulp-html-thay thế để thay thế tập lệnh index.html bằng các phiên bản được đóng gói và sao chép vào thư mục dist
  5. Sao chép mọi thứ trong thư mục tài sản vào thư mục dist

Nút : Mặc dù bạn luôn có thể tạo quy trình xây dựng của riêng mình, nhưng tôi khuyên bạn nên sử dụng angular-cli, vì nó có tất cả các quy trình công việc cần thiết và hiện tại nó hoạt động hoàn hảo. Chúng tôi đã sử dụng nó trong sản xuất và không có bất kỳ vấn đề nào với angular-cli cả.


Đây là những gì tôi đang tìm kiếm. Ứng dụng mẫu trên github rất hữu ích. Cảm ơn
Shahriar Hasan Sayeed

14

Angular CLI 1.xx (Hoạt động với Angular 4.xx, 5.xx)

Điều này hỗ trợ:

  • Góc 2.x và 4.x
  • Webpack mới nhất 2.x
  • Trình biên dịch AoT góc
  • Định tuyến (bình thường và lười biếng)
  • SCSS
  • Gói tệp tùy chỉnh (tài sản)
  • Các công cụ phát triển bổ sung (thiết lập thử nghiệm linter, unit & end-to-end)

Thiết lập ban đầu

Tên dự án mới - xuất hiện

Bạn có thể thêm --style=scssđể hỗ trợ SASS .scss.

Bạn có thể thêm --ng4để sử dụng Angular 4 thay vì Angular 2.

Sau khi tạo dự án, CLI sẽ tự động chạy npm installcho bạn. Nếu bạn muốn sử dụng Sợi thay thế, hoặc chỉ muốn xem bộ xương dự án mà không cần cài đặt, hãy kiểm tra cách thực hiện tại đây .

Các bước bó

Trong thư mục dự án:

ng xây dựng

Ở phiên bản hiện tại, bạn cần chỉ định --aotthủ công, bởi vì nó có thể được sử dụng trong chế độ phát triển (mặc dù điều đó không thực tế do chậm).

Điều này cũng thực hiện biên dịch AoT cho các gói thậm chí nhỏ hơn (không có trình biên dịch Angular, thay vào đó, đầu ra trình biên dịch được tạo). Các gói nhỏ hơn nhiều với AoT nếu bạn sử dụng Angular 4 vì mã được tạo nhỏ hơn.
Bạn có thể kiểm tra ứng dụng của mình với AoT ở chế độ phát triển (sourcemaps, không thu nhỏ) và AoT bằng cách chạyng build --aot .

Đầu ra

Thư mục đầu ra mặc định là ./dist, mặc dù nó có thể được thay đổi trong./angular-cli.json .

Tệp có thể triển khai

Kết quả của bước xây dựng là như sau:

(Lưu ý: <content-hash>đề cập đến hàm băm / dấu vân tay của nội dung của tệp có nghĩa là một cách làm bộ nhớ cache, điều này có thể xảy ra do Webpack tự viết các scriptthẻ)

  • ./dist/assets
    Các tệp được sao chép nguyên trạng từ ./src/assets/**
  • ./dist/index.html
    Từ ./src/index.html, sau khi thêm tập lệnh webpack vào
    tệp Tệp nguồn có thể định cấu hình trong./angular-cli.json
  • ./dist/inline.js
    Trình tải / gói webpack nhỏ
  • ./dist/main.<content-hash>.bundle.js
    Tệp .js chính chứa tất cả các tập lệnh .js được tạo / nhập
  • ./dist/styles.<content-hash>.bundle.js
    Khi bạn sử dụng trình tải Webpack cho CSS, đó là cách CLI, chúng được tải thông qua JS tại đây

Trong các phiên bản cũ hơn, nó cũng tạo ra các phiên bản được nén để kiểm tra kích thước của chúng và .map các tệp sourcemaps, nhưng điều này không còn xảy ra khi mọi người cứ yêu cầu xóa chúng.

Những tập tin khác

Trong một số trường hợp khác, bạn có thể tìm thấy các tệp / thư mục không mong muốn khác:

  • ./out-tsc/
    Từ ./src/tsconfig.json'soutDir
  • ./out-tsc-e2e/
    Từ ./e2e/tsconfig.json'soutDir
  • ./dist/ngfactory/
    Từ trình biên dịch AoT (không thể định cấu hình mà không hủy CLI kể từ phiên bản beta 16)

Có thể tách lib góc và phụ thuộc của chúng khỏi ứng dụng của tôi không?
Dominick Piganell

Không sử dụng CLI, nhằm mục đích làm rung chuyển cây hoạt động. Đó là loại bỏ tất cả các mô-đun EcmaScript góc không được sử dụng trong ứng dụng của bạn. Có một kế hoạch để vô hiệu hóa điều này trong chế độ dev cho tốc độ (họ gọi các thư viện được tải là "DLL"), nhưng không có kế hoạch tách riêng trong kết quả cuối cùng. Có thể đạt được nếu bạn đang cuộn các công cụ Webpack của riêng mình mặc dù không có CLI.
Meligy

Làm thế nào để kiểm tra ứng dụng của tôi bằng thư mục dist. Làm thế nào tôi có thể lưu trữ trong máy chủ web của tôi?
raj m

Bạn chỉ cần sao chép nó vào máy chủ. Đó là trang web tĩnh đơn giản có thể được phục vụ bằng mọi cách. Tuy nhiên, nếu bạn sử dụng định tuyến, bạn có thể muốn chuyển hướng tất cả các cuộc gọi đến tệp HTML, để kiểm tra tài liệu triển khai Angular trên phần cấu hình máy chủ angular.io/docs/ts/latest/guide/,
Meligy 18/03/2017

@Meligy nếu tôi gỡ bỏ <content-hash>khỏi các gói trong prod. nó có thể gây ra vấn đề trong việc nhận gói mới nhất?
k11k2

5

Cho đến ngày hôm nay, tôi vẫn thấy cuốn sách dạy nấu ăn tổng hợp thời gian trước là công thức tốt nhất để sản xuất bó. Bạn có thể tìm thấy nó ở đây: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Trải nghiệm của tôi với Angular 2 cho đến nay là AoT tạo ra các bản dựng nhỏ nhất mà hầu như không có thời gian tải. Và quan trọng nhất như câu hỏi ở đây là về - bạn chỉ cần gửi một vài tệp để sản xuất.

Điều này có vẻ là do trình biên dịch Angular sẽ không được cung cấp cùng với các bản dựng sản xuất vì các mẫu được biên dịch "Trước thời gian". Thật tuyệt khi thấy đánh dấu mẫu HTML của bạn được chuyển đổi thành các hướng dẫn javascript, rất khó để chuyển đổi kỹ thuật thành HTML gốc.

Tôi đã tạo một video đơn giản trong đó tôi chứng minh kích thước tải xuống, số lượng tệp, v.v. cho ứng dụng Angular 2 trong bản dựng dev vs AoT - mà bạn có thể xem tại đây:

https://youtu.be/ZoZDCgQwnmQ

Bạn sẽ tìm thấy mã nguồn được sử dụng trong video tại đây:

https://github.com/fintechneo/angular2-temsheet


3
        **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="https://stackoverflow.com/">
    </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.

2

Bạn có thể triển khai ứng dụng góc của mình githubbằng cách sử dụng angular-cli-ghpages

kiểm tra liên kết để tìm cách triển khai bằng cli này.

trang web được triển khai sẽ được lưu trữ ở một số chi nhánh tại github thường

trang gh

sử dụng có thể sao chép nhánh git và sử dụng nó như trang web tĩnh trong máy chủ của bạn


1

"Tốt nhất" tùy thuộc vào kịch bản. Đôi khi bạn chỉ quan tâm đến gói đơn nhỏ nhất có thể, nhưng trong các ứng dụng lớn, bạn có thể phải cân nhắc tải lười biếng. Tại một số điểm, nó trở nên không thực tế để phục vụ toàn bộ ứng dụng như một gói duy nhất.

Trong trường hợp sau, Webpack thường là cách tốt nhất vì nó hỗ trợ tách mã.

Đối với một gói duy nhất tôi sẽ xem xét Rollup hoặc trình biên dịch đóng nếu bạn cảm thấy dũng cảm :-)

Tôi đã tạo các mẫu của tất cả các gói Angular tôi từng sử dụng ở đây: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

Mã có thể được tìm thấy ở đây: https://github.com/thelgevold/angular-2-samples

Phiên bản góc: 4.1.x



0

Vui lòng thử bên dưới lệnh CLI trong thư mục dự án hiện tại. Nó sẽ tạo ra gói thư mục dist. để bạn có thể tải lên tất cả các tệp trong thư mục dist để triển khai.

ng xây dựng --prod --aot --base-href.


0

ng phục vụ công việc để phục vụ ứng dụng của chúng tôi cho mục đích phát triển. Còn sản xuất thì sao? Nếu chúng ta xem xét tệp pack.json, chúng ta có thể thấy rằng có các tập lệnh chúng ta có thể sử dụng:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Tập lệnh xây dựng sử dụng bản dựng của Angular CLI với cờ --prod. Hãy thử nó ngay bây giờ. Chúng tôi có thể làm điều đó theo một trong hai cách:

# sử dụng tập lệnh npm

npm run build

# sử dụng cli trực tiếp

ng build --prod

Lần này chúng tôi được cung cấp bốn tệp thay vì năm. Cờ --prod báo cho Angular làm cho ứng dụng của chúng ta có kích thước nhỏ hơn nhiều.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.