วิธีรวมแอป Angular สำหรับการผลิต


353

วิธีที่ดีที่สุดในการรวม Angular (รุ่น 2, 4, 6, ... ) สำหรับการผลิตบนเว็บเซิร์ฟเวอร์สดคืออะไร

โปรดรวมเวอร์ชันแองกูลาร์ไว้ในคำตอบเพื่อให้เราสามารถติดตามได้ดีขึ้นเมื่อมันเปลี่ยนเป็นรีลีสในภายหลัง


สำหรับตอนนี้ (rc1) ต่อไปนี้เป็นวิธีแก้ไขปัญหาแบบไม่กี่ stackoverflow.com/questions/37324511/how-to-bundle-angular2-rc1-with-systemjs
Pat M

และนี่คือstackoverflow.com/questions/37098942/…
Pat M

ตอนนี้ rc3 มีไฟล์เวอร์ชั่นที่รวมมาซึ่งจะลดจำนวนคำขอจาก 300+ เหลือประมาณ 40
Pat M

2
เฮ้ ฉันเกลียด WebPack และสร้างขั้นตอนโดยทั่วไป เรียงลำดับของ overkill เพียงแค่พยายามรวบรวมเว็บไซต์อย่างง่าย ๆ ดังนั้นฉันทำสิ่งนี้: github.com/schungx/angular2-bundle
Stephen Chung

ขอบคุณสตีเฟ่น นี่จะเป็นวิธีแก้ปัญหาอย่างง่ายสำหรับส่วนผู้ขาย หวังว่าสิ่งนี้จะถูกนำเสนอและอัปเดตอย่างเป็นทางการ ฉันคิดว่าคุณใช้บางอย่างเช่นอึกสำหรับไฟล์ของโครงการใช่ไหม
Pat M

คำตอบ:


362

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) ที่มี Angular CLI

การตั้งค่าครั้งเดียว

  • npm install -g @angular/cli
  • ng new projectFolder สร้างแอปพลิเคชันใหม่

ขั้นตอนการมัด

  • ng build --prod(ทำงานในบรรทัดคำสั่งเมื่อมีไดเรกทอรีprojectFolder)

    prodชุดแฟล็กสำหรับการผลิต (ดูเอกสารประกอบเชิงมุมสำหรับรายการตัวเลือกที่มาพร้อมกับแฟล็กการผลิต)

  • บีบอัดโดยใช้Brotli บีบอัดทรัพยากรโดยใช้คำสั่งต่อไปนี้

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

บันเดิลถูกสร้างโดยค่าเริ่มต้นเป็นprojectFolder / dist (/ $ projectFolder สำหรับ 6)

เอาท์พุต

ขนาดที่มี Angular 9.0.0กับ CLI 9.0.1และ CSS ตัวเลือกโดยไม่มีการกำหนดเส้นทาง Angular

  • dist/main-[es-version].[hash].jsแอปพลิเคชันของคุณรวม [ขนาด ES5: 158 KB สำหรับแอปพลิเคชัน Angular CLI ใหม่ว่างเปล่าบีบอัด40 KB ]
  • dist/polyfill-[es-version].[hash].bundle.jsการพึ่งพา polyfill (@angular, RxJS ... ) รวมไว้ใน [ขนาด ES5: 127 KB สำหรับแอปพลิเคชัน Angular CLI ใหม่ว่างเปล่าบีบอัด37 KB ]
  • dist/index.html จุดเริ่มต้นของแอปพลิเคชันของคุณ
  • dist/runtime-[es-version].[hash].bundle.js โหลด webpack
  • dist/style.[hash].bundle.css นิยามสไตล์
  • dist/assets ทรัพยากรที่คัดลอกมาจากการกำหนดค่าสินทรัพย์ Angular CLI

การปรับใช้

คุณสามารถดูตัวอย่างการใช้งานของคุณโดยใช้ng serve --prodคำสั่งที่เริ่มเซิร์ฟเวอร์ HTTP ท้องถิ่นเช่นว่าโปรแกรมที่มีไฟล์ผลิตสามารถเข้าถึงได้โดยใช้http: // localhost: 4200

สำหรับการใช้งานจริงคุณต้องปรับใช้ไฟล์ทั้งหมดจากdistโฟลเดอร์ในเซิร์ฟเวอร์ HTTP ที่คุณเลือก


ฉันได้รับข้อผิดพลาดเมื่อรัน npm install -g angular-cli @ webpack: npm ERR! โปรดรวมไฟล์ต่อไปนี้ไว้ในคำขอการสนับสนุนใด ๆ : .... \ npm-debug.log คุณรู้หรือไม่ว่าเกิดอะไรขึ้น
Chong Wang

2
@chrismarx มันสร้างเพียงหนึ่งบันเดิลรวมถึงส่วนประกอบทั้งหมดที่มี html และสไตล์ของพวกเขา
Nicolas Henneaux

4
ฉันมีแอปพลิเคชันและฉันต้องการใช้วิธีนี้ดังนั้นฉันจึงเปิดใช้งาน ng init จากโฟลเดอร์โครงการ ฉันทำตามขั้นตอนที่เหลือแล้ว แต่เมื่อฉันปรับใช้แอปพลิเคชันของฉันดูเหมือนว่าจะว่างเปล่า สิ่งเดียวที่ปรากฏคือ "แอปใช้งานได้!" ข้อความมีสถานที่ที่ฉันต้องตั้งที่จะใช้ไฟล์แอพของฉันหรือไม่?
mautrok

2
ng-init ถูกลบออกจาก cli เชิงมุม github.com/angular/angular-cli/issues/5176
Pat M

2
ในที่สุดฉันก็ระบุว่านี่เป็นคำตอบที่ได้รับการยอมรับ แม้ว่าโซลูชันอื่น ๆ อาจทำงานได้ดีและยังให้ความยืดหยุ่นเพิ่มเติมบางอย่าง (ฉันโพสต์ไว้เกี่ยวกับการใช้ Webpack โดยไม่ต้องใช้ CLI) การใช้ Angular CLI เป็นสิ่งที่ทำให้ปวดหัวน้อยลง ฉันลงเอยด้วยการใช้ Angular CLI และปรับโครงการของฉันเพื่อให้สามารถใช้ AoT ได้ง่ายขึ้น
Pat M

57

2.0.1 Final ใช้ Gulp (TypeScript - เป้าหมาย: ES5)


การตั้งค่าครั้งเดียว

  • npm install (ทำงานใน cmd เมื่อ direcory เป็น projectFolder)

ขั้นตอนการมัด

  • npm run bundle (ทำงานใน cmd เมื่อ direcory เป็น projectFolder)

    สร้างบันเดิลให้กับprojectFolder / bundles /

เอาท์พุต

  • bundles/dependencies.bundle.js[ ขนาด: ~ 1 MB (เล็กที่สุด)]
    • มี rxjs และการพึ่งพาเชิงมุมไม่ใช่กรอบทั้งหมด
  • bundles/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 (เช่นเดียวกับคู่มือ Quickstartเพียงแสดง 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 (เหมือนกับQuickstart guideไม่มีอยู่อีกต่อไป)

(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แท็กหลังจากแท็กบันเดิลจะยังคงอนุญาตให้โปรแกรมรัน แต่บันเดิลการอ้างอิงจะถูกละเว้นและการอ้างอิงจะถูกโหลดจาก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.tsเป็นที่ bootstrap อยู่

ดีที่สุดที่ฉันสามารถทำได้ :)


2
สวัสดีสคริปต์ gulp กำลังสร้างบันเดิล แต่ฉันไม่แน่ใจว่าควรจะอยู่ในไฟล์ boot.ts อย่างไร ตอนนี้ไฟล์ทั้งหมดในชุดรวมไม่ได้ใช่ไหม เราจะดำเนินการมัดหรือไม่
chrismarx

2
ฉันคิดว่าฉันต้องลองอีกครั้ง ฉันพยายามเปลี่ยนไปใช้ builder.buildStatic และมีข้อผิดพลาดจาก rxjs เกี่ยวกับการไม่โหลดเป็น commonjs หรือโมดูล amd ฉันจะให้คำแนะนำของคุณอีกครั้งลอง
chrismarx

1
ฉันยังไม่ชัดเจนว่ากลุ่มใช้ในการตั้งค่านี้อย่างไร ฉันดูเหมือนจะพบปัญหาเดียวกันกับ @chrismarx ที่นี่ ฉันสามารถสร้างบันเดิล แต่ดูเหมือนว่าทุกอย่างยังคงถูกโหลดจากโฟลเดอร์แอป transpiled และคัดลอกของฉัน (อยู่ที่ dist / app) หากฉันดูในแผงเครือข่ายของฉันฉันจะเห็นว่าไฟล์ที่เกี่ยวข้องกับแอปของฉันกำลังถูกโหลดจากที่นั่น (ส่วนประกอบ ฯลฯ ) แทนที่จะเป็นแอปทุกอย่างที่เกี่ยวข้องมาจาก app.bundle.js A_Singh คุณแบ่งปัน boot.ts ของคุณได้ไหม ดูเหมือนว่าฉันขาดอะไรบางอย่างที่นี่และจะรักการชี้แจง
jbgarr

1
A_Singh ฉันไม่เห็นว่ามันช่วยได้อย่างไร เมื่อinline-templatesมีการเรียกใช้มัน inlines dist/appแม่แบบแล้วสร้างสำเนาของโฟลเดอร์แอปและไฟล์ที่ จากนั้นในdist-systemjs.config.jsคุณแมปappไปdist/appซึ่งเป็นโฟลเดอร์ที่จะไม่อยู่ถ้าคุณใช้distโฟลเดอร์เป็นราก คุณไม่ต้องการเรียกใช้แอพจากdistโฟลเดอร์ใช่ไหม และถ้าเป็นเช่นนั้นคุณจะไม่มีdistโฟลเดอร์ซ้อนอยู่ในdistโฟลเดอร์รูท ฉันต้องคิดถึงสิ่งอื่นที่นี่ คุณไม่จำเป็นต้องบอกให้ systemjs ใช้ไฟล์บันเดิลของคุณไม่ใช่ไฟล์ปกติที่พบในdist/appโฟลเดอร์หรือไม่?
jbgarr

1
ฉันกำลังประสบปัญหากับวิธีแก้ปัญหาของคุณการบูทเป็นสิ่งที่ไม่มีอยู่ที่นี่และเมื่อฉันแทนที่ด้วย "แอพ" ฉันมีข้อผิดพลาด "โมดูลไม่ได้ถูกกำหนด"
LoïcR

22

Angular 2 พร้อม Webpack (ไม่มีการตั้งค่า CLI)

1- การสอนโดยทีม Angular2

ทีม Angular2 เผยแพร่บทช่วยสอนสำหรับการใช้ Webpack

ฉันสร้างและวางไฟล์จากการกวดวิชาในขนาดเล็กโครงการเมล็ด GitHub ดังนั้นคุณสามารถลองเวิร์กโฟลว์ได้อย่างรวดเร็ว

คำแนะนำ :

  • ติดตั้ง NPM

  • เริ่มต้นนาที สำหรับการพัฒนา สิ่งนี้จะสร้างโฟลเดอร์ "dist" เสมือนที่จะถูกนำไปโหลดที่ที่อยู่ localhost ของคุณ

  • NPM วิ่งสร้าง สำหรับการผลิต "นี่จะสร้างรุ่นโฟลเดอร์ทางกายภาพ" dist "เกินกว่าที่จะถูกส่งไปยังเว็บเซิร์ฟเวอร์โฟลเดอร์ dist คือ 7.8MB แต่จำเป็นต้องมีเพียง 234KB เท่านั้นในการโหลดหน้าเว็บในเว็บเบราว์เซอร์

2 - ชุดเริ่มต้นของ Webkit

ชุดเริ่มต้น Webpackนี้มีคุณสมบัติการทดสอบมากกว่าแบบฝึกหัดด้านบนและดูค่อนข้างเป็นที่นิยม


สวัสดีเป็นไปได้ไหมที่จะอัปเดตโปรเจ็กต์เมล็ดด้วยแองกูลาร์ 2.1.0? บทช่วยสอนกำลังใช้มุม 2.1.0 ทันที ฉันติดตามและไม่สามารถใช้งานได้ ข้อผิดพลาดคือ http 404 - ไม่พบ app.component.html
heq99

ฉันอัพเดทเป็นมุม 2.1.0 โดยไม่มีปัญหา app.component.html ถูกเรียกจาก app.component.ts (templateUrl: './app.component.html') คุณมีไฟล์ทั้งสองในโฟลเดอร์แอพเดียวกันหรือไม่
Pat M

1
การเขย่าต้นไม้การลดขนาดและการบีบอัดสามารถลดขนาดลงอย่างมากเมื่อคุณไปผลิต นี่คือตัวอย่างการอ่านที่ยอดเยี่ยมblog.mgechev.com/2016/06/26/…
Hamzeen Hameem

16

เวิร์กโฟลว์การผลิตเชิงมุม 2 ที่มีตัวสร้างและการ SystemJs

Angular.io มีแบบฝึกหัดเริ่มต้นอย่างรวดเร็ว ฉันคัดลอกบทช่วยสอนนี้และขยายด้วยงานอึกง่าย ๆ บางอย่างสำหรับการรวมทุกอย่างไปยังโฟลเดอร์ dist ซึ่งสามารถคัดลอกไปยังเซิร์ฟเวอร์และทำงานแบบนั้น ฉันพยายามเพิ่มประสิทธิภาพทุกอย่างเพื่อให้ทำงานได้ดีกับ Jenkis CI ดังนั้น node_modules สามารถถูกแคชและไม่จำเป็นต้องคัดลอก

ซอร์สโค้ดพร้อมแอปตัวอย่างบน Github: https://github.com/Anjmao/angular2-production-workflow

ขั้นตอนในการผลิต
  1. ทำความสะอาดไฟล์ typescripts ที่คอมไพล์แล้ว js และโฟลเดอร์ dist
  2. รวบรวมไฟล์ typescript ในโฟลเดอร์แอพ
  3. ใช้บันเดิล SystemJs เพื่อรวมทุกอย่างเพื่อแยกโฟลเดอร์ที่มีแฮชที่สร้างขึ้นสำหรับการรีเฟรชแคชเบราว์เซอร์
  4. ใช้ gulp-html-replace เพื่อแทนที่สคริปต์ index.html ด้วยเวอร์ชันที่รวมและคัดลอกไปยังโฟลเดอร์ dist
  5. คัดลอกทุกอย่างภายในโฟลเดอร์ทรัพย์สินไปยังโฟลเดอร์ dist

โหนด : ในขณะที่คุณสามารถสร้างกระบวนการสร้างของคุณเอง แต่ฉันขอแนะนำให้ใช้ angular-cli เพราะมันมีเวิร์กโฟลว์ที่จำเป็นทั้งหมดและมันทำงานได้อย่างสมบูรณ์แบบในขณะนี้ เราใช้มันในการผลิตแล้วและไม่มีปัญหาใด ๆ กับ angular-cli เลย


นี่คือสิ่งที่ฉันกำลังมองหา แอปตัวอย่างบน GitHub มีประโยชน์มาก ขอบคุณ
Shahriar Hasan Sayeed

14

Angular CLI 1.xx (ใช้ได้กับ Angular 4.xx, 5.xx)

สิ่งนี้รองรับ:

  • เชิงมุม 2.x และ 4.x
  • ล่าสุด Webpack 2.x
  • คอมไพเลอร์ AoT เชิงมุม
  • เส้นทาง (ปกติและสันหลังยาว)
  • SCSS
  • การรวมไฟล์ที่กำหนดเอง (เนื้อหา)
  • เครื่องมือพัฒนาเพิ่มเติม (การตั้งค่า linter, unit & end-to-end)

ตั้งค่าเริ่มต้น

ใหม่ชื่อโครงการ - กำลังออกเดินทาง

คุณสามารถเพิ่ม--style=scssสำหรับการรองรับ SASS .scss

คุณสามารถเพิ่ม--ng4การใช้ Angular 4 แทน Angular 2

หลังจากสร้างโครงการ CLI จะทำงานnpm installให้คุณโดยอัตโนมัติ หากคุณต้องการที่จะใช้เส้นด้ายแทนหรือเพียงแค่ต้องการที่จะมองไปที่โครงกระดูกโครงการโดยไม่ต้องติดตั้งตรวจสอบวิธีการที่จะทำมันนี่

ขั้นตอน Bundle

ภายในโฟลเดอร์โครงการ:

ng build -prod

ในเวอร์ชันปัจจุบันคุณต้องระบุ--aotด้วยตนเองเพราะสามารถใช้ในโหมดการพัฒนา (แม้ว่าจะไม่สามารถใช้งานได้จริงเนื่องจากความช้า)

สิ่งนี้ยังทำการคอมไพล์ AoT สำหรับบันเดิลขนาดเล็กลง (ไม่มี Angular compiler แทนสร้างคอมไพเลอร์เอาท์พุท) บันเดิลนั้นเล็กกว่า AoT มากถ้าคุณใช้ Angular 4 เนื่องจากโค้ดที่สร้างนั้นมีขนาดเล็กกว่า
คุณสามารถทดสอบแอปของคุณกับทอทโหมดการพัฒนา (sourcemaps ไม่มี minification) ng build --aotทอทโดยการเรียกใช้

เอาท์พุต

dir เอาท์พุทเริ่มต้นคือ./distแม้ว่ามันสามารถเปลี่ยนแปลง./angular-cli.jsonได้

ไฟล์ที่ปรับใช้ได้

ผลลัพธ์ของขั้นตอนการสร้างมีดังต่อไปนี้:

(หมายเหตุ: <content-hash>หมายถึงแฮช / ลายนิ้วมือของเนื้อหาของไฟล์ที่มีความหมายว่าเป็นวิธีการป้องกันแคชซึ่งเป็นไปได้เนื่องจาก Webpack เขียนscriptแท็กด้วยตัวเอง)

  • ./dist/assets
    ไฟล์ที่คัดลอกมาจาก - ./src/assets/**
  • ./dist/index.html
    จาก./src/index.html, หลังจากเพิ่มสคริปต์ webpack ลงใน
    ไฟล์เทมเพลตซอร์สสามารถกำหนดค่าได้./angular-cli.json
  • ./dist/inline.js
    webpack loader / polyfill ขนาดเล็ก
  • ./dist/main.<content-hash>.bundle.js
    ไฟล์. js หลักที่มีสคริปต์. js ทั้งหมดที่สร้าง / นำเข้า
  • ./dist/styles.<content-hash>.bundle.js
    เมื่อคุณใช้ Webpack loader สำหรับ CSS ซึ่งเป็นวิธี CLI พวกเขาจะถูกโหลดผ่าน JS ที่นี่

ในรุ่นก่อนหน้านี้มันยังสร้าง gzipped รุ่นสำหรับตรวจสอบขนาดและ.mapไฟล์ซอร์สแผนที่ แต่สิ่งนี้ไม่ได้เกิดขึ้นอีกต่อไปเมื่อมีคนขอให้ลบไฟล์เหล่านี้

ไฟล์อื่น ๆ

ในบางโอกาสคุณอาจพบไฟล์ / โฟลเดอร์ที่ไม่ต้องการอื่น ๆ :

  • ./out-tsc/
    จาก./src/tsconfig.json'soutDir
  • ./out-tsc-e2e/
    จาก./e2e/tsconfig.json'soutDir
  • ./dist/ngfactory/
    จากคอมไพเลอร์ AoT (ไม่สามารถกำหนดค่าได้โดยไม่ต้องฟอร์ก CLI ตั้งแต่ Beta 16)

เป็นไปได้ไหมที่จะแยก lib เชิงมุมและการอ้างอิงจากแอพของฉัน?
Dominick Piganell

ไม่ใช้ CLI ซึ่งมีวัตถุประสงค์เพื่อให้ต้นไม้เขย่าเพื่อทำงาน นั่นคือการลบโมดูล Angular EcmaScript ทั้งหมดที่ไม่ได้ใช้ในแอปพลิเคชันของคุณ มีแผนที่จะปิดใช้งานสิ่งนี้ในโหมด dev สำหรับความเร็ว (พวกเขาเรียกไลบรารีที่โหลดเช่นเดียวกับ "DLL") แต่ไม่มีแผนที่จะแยกในผลลัพธ์สุดท้าย มันควรจะทำได้ถ้าคุณเปิดเว็บแพ็คของคุณเองโดยไม่ต้องมี CLI
Meligy

วิธีตรวจสอบแอพของฉันโดยใช้โฟลเดอร์ dist ฉันจะโฮสต์ในเว็บเซิร์ฟเวอร์ของฉันได้อย่างไร
raj m

คุณเพียงแค่คัดลอกไปยังเซิร์ฟเวอร์ เป็นเว็บไซต์คงที่ธรรมดาที่สามารถให้บริการได้ ถ้าคุณใช้เส้นทางคุณอาจต้องการที่จะเปลี่ยนเส้นทางทุกสายไปยังไฟล์ HTML แม้ว่าสำหรับการตรวจสอบการใช้งานที่ docss เชิงมุมในส่วนการกำหนดค่าเซิร์ฟเวอร์angular.io/docs/ts/latest/guide/...
Meligy

@Meligy จะเกิดอะไรขึ้นถ้าฉันลบออก<content-hash>จากกลุ่มในแยง มันอาจทำให้เกิดปัญหาในการรับชุดล่าสุด?
k11k2

5

ณ วันนี้ฉันยังคงพบตำราปรุงอาหารล่วงหน้าเวลาเป็นสูตรที่ดีที่สุดสำหรับการผลิตรวม คุณสามารถค้นหาได้ที่นี่: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

ประสบการณ์ของฉันกับ Angular 2 จนถึงขณะนี้คือ AoT สร้างงานสร้างที่เล็กที่สุดโดยแทบไม่มีเวลาโหลด และที่สำคัญที่สุดคือคำถามที่นี่เป็นเรื่องเกี่ยวกับ - คุณจะต้องจัดส่งไฟล์ไม่กี่ไฟล์เพื่อการผลิต

สิ่งนี้น่าจะเป็นเพราะคอมไพเลอร์ Angular จะไม่ถูกส่งมาพร้อมกับบิลด์โปรดักชั่นเนื่องจากเทมเพลตจะถูกคอมไพล์ "Ahead of Time" นอกจากนี้ยังเป็นเรื่องที่ยอดเยี่ยมมากเมื่อเห็นว่ามาร์กอัป HTML เทมเพลตของคุณเปลี่ยนเป็นคำสั่ง javascript ซึ่งยากที่จะแปลงวิศวกรกลับเป็น HTML ดั้งเดิม

ฉันสร้างวิดีโออย่างง่ายที่แสดงขนาดการดาวน์โหลดจำนวนไฟล์และอื่น ๆ สำหรับแอพ Angular 2 ใน dev vs AoT build ซึ่งคุณสามารถดูได้ที่นี่:

https://youtu.be/ZoZDCgQwnmQ

คุณจะพบซอร์สโค้ดที่ใช้ในวิดีโอที่นี่:

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


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

คุณสามารถปรับใช้แอปพลิเคชันเชิงมุมของคุณgithubโดยใช้ angular-cli-ghpages

ตรวจสอบลิงค์เพื่อค้นหาวิธีการปรับใช้โดยใช้ CLI นี้

เว็บไซต์ที่ใช้งานจะถูกเก็บไว้ในสาขาบางแห่งgithubโดยทั่วไป

GH-หน้า

ใช้สามารถโคลนสาขา git และใช้มันเหมือนเว็บไซต์คงที่ในเซิร์ฟเวอร์ของคุณ


1

"ดีที่สุด" ขึ้นอยู่กับสถานการณ์ มีบางครั้งที่คุณสนใจเพียงกลุ่มเดียวที่เล็กที่สุดเท่าที่จะเป็นไปได้ แต่ในแอพขนาดใหญ่คุณอาจต้องพิจารณาการโหลดที่ขี้เกียจ ในบางจุดการใช้งานทั้งแอปเป็นชุดเดียวไม่สามารถทำได้

ในกรณีหลัง Webpack เป็นวิธีที่ดีที่สุดเพราะรองรับการแยกรหัส

สำหรับกลุ่มเดียวฉันจะพิจารณา Rollup หรือคอมไพเลอร์ปิดหากคุณรู้สึกกล้า :-)

ฉันสร้างตัวอย่างของตัวรวบรวมเชิงมุมทั้งหมดที่ฉันเคยใช้ที่นี่: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

รหัสสามารถพบได้ที่นี่: https://github.com/thelgevold/angular-2-samples

เวอร์ชั่นเชิงมุม: 4.1.x


0

เพียงแค่ติดตั้งเชิงมุม 4 ด้วย webpack 3 ภายในไม่กี่นาทีการพัฒนาและการผลิตชุด ENV ของคุณจะพร้อมโดยไม่มีปัญหาใด ๆ เพียงแค่ทำตามขั้นตอนด้านล่าง github doc

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


0

โปรดลองคำสั่ง CLI ด้านล่างในไดเรกทอรีโครงการปัจจุบัน มันจะสร้างมัดโฟลเดอร์ dist เพื่อให้คุณสามารถอัปโหลดไฟล์ทั้งหมดภายในโฟลเดอร์ dist สำหรับการปรับใช้

ng build --prod --aot --base-href


0

ng ให้บริการงานสำหรับการให้บริการแอปพลิเคชันของเราเพื่อการพัฒนา แล้วการผลิตล่ะ? หากเราดูไฟล์ package.json ของเราเราจะเห็นว่ามีสคริปต์ที่เราสามารถใช้ได้:

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

สคริปต์การสร้างใช้การสร้าง ng ของ Angular CLI ด้วยแฟล็ก --prod ลองตอนนี้กัน เราสามารถทำได้หนึ่งในสองวิธี:

# ใช้สคริปต์ npm

npm run build

# ใช้ cli โดยตรง

ng build --prod

เวลานี้เราได้รับสี่ไฟล์แทนที่จะเป็นห้าไฟล์ ธง --prod บอกให้ Angular ทำให้แอปพลิเคชันของเรามีขนาดเล็กลงมาก

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.