[Cùng học Angular 2] Cài đặt môi trường

Mình viết bài này vì muốn giới thiệu cho các bạn cách cài đặt một môi trường cơ bản nhất để làm quen với Angular 2 dành cho các bạn mới bắt đầu hoặc muốn học.

Những thứ thiết yếu trước khi bắt đầu:

  1. NodeJS và một package manager: Bạn nên download bản 4.x trở lên và sử dụng npm 3.x trở lên để tăng tốc độ xử lý và giảm gánh nặng cho ổ cứng. Lời khuyên là dùng bản LTS hiện tại là 6.9 và npm 4.x. Bạn có thể vào đây và tiến hành download phiên bản phù hợp với hệ điều hành của mình. Sau khi đã cài đặt, gõ npm version để kiểm tra.

  1. Note: Mở powershell với quyền quản trị (nếu là windows) hoặc sử dụng sudo (Mac và Linux) khi cài đặt các package dưới đây nếu bạn thấy lỗi xảy ra.
  2. Typings:npm install -g typings hoặc yarn global add typings trong terminal
  3. Typescript: npm install -g typescript hoặc yarn global add typescript
  4. Node-gyp: Chỉ dành cho windows để build một số package cần thiết cho môi trường windows, các bạn có thể tham khảo cách cài đặt node-gyp và windows build tools ở đây.
  5. Text edior: Dùng bất kì cái nào bạn thích, nhưng trong bài này mình sẽ dùng Visual Studio Code (vsc) để demo.
  6. Một angular 2 starter kit: Cũng tương tự, dùng bất kì cái nào bạn thích, nhưng ở đây mình sẽ dùng angular-cli: gõ npm install -g @angular/clihoặc yarn global add @angular/cli.
  7. Tùy chọn khi sử dụng yarn: ng set --global packageManager=yarn để đặt yarn làm mặc định

Những package của visual studio code giành cho angular 2 và typescript:

Các bạn có thể vào đây để tìm extension phù hợp hoặc mở panel extension của vsc để download trực tiếp.

  • Angular 2 TypeScript/HTML Snippets: Snippets cho angular 2
  • Beautify: Auto format code.
  • EditorConfig for VS Code: Để đồng nhất về thiết lập (khoảng cách, xuống dòng,…) cho các editor khác nhau để giữ tính đồng bộ.
  • Path Intellisense: Giúp bạn có thể import file dễ dàng hơn
  • Project Manager: Quản lý project, có thể lưu bất kì một workspace nào đó lại và sau này có thể mở lên bằng phím tắt
  • Settings Sync: Lưu settings và các package đã cài đặt thông qua Gist
  • TSLint: Kiểm tra lỗi cho file .ts (typescript)

Một số package khác có thể giúp cho việc học hành của bạn bớt nhàm chán hơn:

  • vscode-icons: Một bộ icon rất đẹp giành cho vsc
  • One Monokai Theme: Giao diện.

Mọi thứ đã xong, bây giờ là lúc bắt đầu với hello world

  • Đầu tiên, tạo một folder mà bạn thích ở vị trị mà bạn thích
  • Mở terminal ở vị trí đó
  • Gõ ng new <tên_project>

ng new hello-world

  • Gõ cd hello-world.

code .

  • Và project của bạn đã được mở ra thành công trong vsc!

Một thông báo hiện ra hỏi về phiên bản typescript mà bạn muốn dùng cho vsc, chọn Use Workspace.

Ctrl+`

Một cửa sổ terminal thu nhỏ sẽ được mở lên, rất tiện lợi!

Trong cửa sổ này, gõ:

ng serve

Sau đó mở trình duyệt và truy cập vào http://localhost:4200/ và.. thành công!

Bây giờ, mở file src -> app -> app.component.ts và thay dòng 9 từ app works! thành hello world, refresh trang web của bạn và bạn sẽ thấy hello world hiện ra!

Chúc mừng, bạn đã hoàn thành dòng code đầu tiên của angular 2!

Kích hoạt hmr (Hot Module Replacement):

[Cập nhật]: Vì phiên bản mới của @angular/cli đã tích hợp sẵn HMR nên bạn không cần phải làm theo phần này nữa

Angular-cli sử dụng webpack để bundle project của bạn, vì thế bạn hoàn toàn có thể sử dụng hmr để tăng tốc quá trình build app trong lúc lập trình (tức là lúc bạn sửa một dòng code, thay vì phải compile toàn bộ các module thì nó chỉ compile các module bị ảnh hưởng bởi dòng code đó mà thôi).

  1. Đảm bảo bạn phải sử dụng angular-cli 1.0.0-beta.22 hoặc cao hơn. Gõ ng — version để check.
  2. Mở folder src/environments/ trong project của bạn
  3. Thêm file có tên: environment.hmr.ts và paste đoạn code này vào:
export const environment = {  
 production: false,  
 hmr: true  
};

Sau đó mở file src/environments/environment.prod.ts và sửa:

export const environment = {  
 production: true,  
 hmr: false  
};

Cuối cùng, sửa file src/environments/environment.ts:

export const environment = {  
 production: false,  
 hmr: false  
};

Mở angular-cli.json và sửa đoạn này:

...  
    "environments": {  
      "source": "environments/environment.ts",  
      "dev": "environments/environment.ts",  
      "hmr": "environments/environment.hmr.ts",  
      "prod": "environments/environment.prod.ts"  
    },  
...

Kế đến, sửa file package.json thành:

...  
  "scripts": {  
    "start": "ng serve",  
    "hmr": "ng serve --hmr -e=hmr",  
    "lint": "tslint \"src/**/*.ts\"",  
    "test": "ng test",  
    "pree2e": "webdriver-manager update",  
    "e2e": "protractor"  
  }  
...

Tiếp theo, cài đặt @angular/hmr: npm install — save-dev @angularclass/hmr

Tạo file src/hmr.ts và paste đoạn code này:

import { NgModuleRef, ApplicationRef } from ‘@angular/core’;  
import { createNewHosts } from ‘@angularclass/hmr’;

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {  
 let ngModule: NgModuleRef<any>;  
 module.hot.accept();  
 bootstrap().then(mod => ngModule = mod);  
 module.hot.dispose(() => {  
 let appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);  
 let elements = appRef.components.map(c => c.location.nativeElement);  
 let makeVisible = createNewHosts(elements);  
 ngModule.destroy();  
 makeVisible();  
 });  
};

Phần còn lại là sửa file src/main.ts

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
import { enableProdMode } from '@angular/core';  
import { environment } from './environments/environment';  
import { AppModule } from './app/app.module';

import { hmrBootstrap } from './hmr';

if (environment.production) {  
 enableProdMode();  
}

const bootstrap = () => {  
 return platformBrowserDynamic().bootstrapModule(AppModule);  
};

if (environment.hmr) {  
 if (module[ 'hot' ]) {  
 hmrBootstrap(module, bootstrap);  
 } else {  
 console.error('HMR is not enabled for webpack-dev-server!');  
 console.log('Are you using the --hmr flag for ng serve?');  
 }  
} else {  
 bootstrap();  
}

Bây giờ bạn đã có thể chạy hmr, thay vì chạy ng serve thì bây giờ sẽ là:

npm run hmr

Và thử sửa đoạn hello world trong file app.component.ts thành bất kì đoạn văn bản nào đó và mở mở lại trình duyệt để cảm nhận tốc độ load!

Vậy là bạn đã có thể tiến hành code thử một trang web đơn giản với angular 2 rồi, nếu muốn tìm hiểu thêm thì có thể truy cập angular docs và làm theo tutorial.

Cảm ơn đã đọc và hẹn gặp lại ở bài tiếp theo.

Previous: [Android Tutorial] Bài 2: Tạo project Hello World

Next: Ứng dụng Pomodoro