安裝Angular

前言:
Angular是在NodeJs上開發出來的,因此安裝Angular之前要先安裝nodejs。而且至少要在Node 6.9.0 或更新的版本,而且要 NPM 3或更新的版本。因為我個人使用windows 作業系統,所以以後的研習心得,也都會是在windows作業系統下完成。
想更深入研究可參考以下網址說明
https://gist.github.com/doggy8088/15e434b43992cf25a78700438743774a

一、安裝nodejs




2.如上圖可選用LTS(穩定版本)或目前版本
3.使用安裝包的64-bit,因為現在大部分的windows電腦都是64位元,如果電腦是32位元則選用32-bit
4.如果電腦中原來已經有安裝,有兩種狀況,電腦是64位元但安裝了32位元,要先把32位元的nodejs移除,再安裝64位元的nodejs。因為早期只有32位元的nodejs。如果本來就是64位元就直接下載新版的安裝就好了,因為安裝程式會自動更新版本。同時也會連帶安裝npm
5.查詢現有版本在cmd 中下指令  node -v     nmp -v

二、安裝Angular CLI

1.安裝指令
npm install -g @angular/cli
2.查看版本
ng --version

三、安裝特定版本Angular

指定安裝 Angular 6:
npm install -g @angular/cli@6
The -g flag tells npm to do this install globally. The 6 on the end tells npm that I want the latest available version 6.
You can verify your global version by using ng version outside of a local project. For example:
指定安裝 Angular 5:
npm install -g @angular/cli@1
ng new my-ng5-app

Remember, Angular CLI was version 1.7 for Angular 5.

Then when I want to go back to creating Angular 6 workspaces I just use:
npm install -g @angular/cli@6
ng new my-ng6-app

四、多種版本並存

1.       Install Angular 6 CLI globally:
npm install -g @angular/cli@6 //沒有錯angular 6 /cli@6 , angular 7 /cli@7 , angular 5 /cli@1
2.       Create a folder called ng5 to house all of your new Angular 5 applications: 
md ng5
cd ng5
3.  In your ng5 folder create a new local npm application by using:
npm init -y
4.       Install Angular 5 CLI locally using:
npm install @angular/cli@1  //沒有錯angular 5 /cli@1
5.       Now you MUST delete the local package.json file.
If you don’t, Angular CLI will complain when you try use 
ng new. This is because it will think you are trying to create a new application inside an existing Angular CLI application.
6.       Create your new Angular 5 application:
ng new my-ng5-app

Now any new application you create in this ng5 folder will be created using Angular 5. Creating an new application anywhere else will use the global Angular 6.

五、安裝心得

Angular 有一個特性是在同一部電腦可以有多個不同版本存在,在特定目錄下使用以下指令:
md ng5
cd ng5
npm init -y
npm install @angular/cli@1
del package.json
ng new my-ng5-app
則在目錄ng5下建立的專案會是angular 5的專案

六、查看angular 的版本ng version



留言