前言

有時(shí)候在開發(fā)的過程中發(fā)現(xiàn)一個(gè)Angular項(xiàng)目不太夠用，兩個(gè)獨(dú)立的項(xiàng)目又不太好復(fù)用。比如當(dāng)前我們需要一個(gè)新的運(yùn)行于微信小程序端的H5項(xiàng)目，但卻在想在新的H5項(xiàng)目中應(yīng)用原WEB項(xiàng)目中實(shí)體、Share、Serivce以及MockApi等模塊。此時(shí)，便需要將原來的Angular項(xiàng)目簡單做個(gè)升級(jí)。

情景：

1. 當(dāng)前已經(jīng)有了一個(gè)運(yùn)行于瀏覽器端的web項(xiàng)目。
2. 在當(dāng)前項(xiàng)目的基礎(chǔ)上新增一個(gè)wechat項(xiàng)目。
3. 將web項(xiàng)目中的一些公有的東西抽離出來組成一個(gè)公共庫
4. 原web項(xiàng)目、新的wechat項(xiàng)目均能調(diào)用其公共庫
   

開發(fā)環(huán)境

本文開發(fā)環(huán)境如下：

panjie@panjies-iMac web % ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.1.4
Node: 14.16.0
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.1.4
@angular-devkit/schematics      12.1.4
@angular/cli                    12.1.4
@schematics/angular             12.1.4
rxjs                            6.6.7
typescript                      4.3.5

生成新工程

我們進(jìn)入原web項(xiàng)目的根文件夾，執(zhí)行ng generate application wechat。

panjie@panjies-iMac web % ng generate application wechat
? Would you like to add Angular routing? Yes

選擇是否使用路由以及css樣式類別后angular cli將為我們生成projects文件夾：

projects
└── wechat
    ├── karma.conf.js
    ├── src
    │   ├── app
    │   │   ├── app-routing.module.ts
    │   │   ├── app.component.html
    │   │   ├── app.component.scss
    │   │   ├── app.component.spec.ts
    │   │   ├── app.component.ts
    │   │   └── app.module.ts
    │   ├── assets
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.scss
    │   └── test.ts
    ├── tsconfig.app.json
    └── tsconfig.spec.json

5 directories, 17 files

同時(shí)更新了angular.json文件，寫入了wechat這個(gè)新的項(xiàng)目的配置信息。

此時(shí)我們便可以使用ng s wechat來啟動(dòng)wechat項(xiàng)目，使用ng t wechat來測試wechat項(xiàng)目，以及使用ng build wechat來構(gòu)建wechat的項(xiàng)目了。

wechat項(xiàng)目有了以后，我們當(dāng)前得到了如下的目錄樹：

panjie@panjies-iMac web % tree -L 1 -a
.
├── .browserslistrc ②
├── .editorconfig ①
├── .eslintrc.json ②
├── README.md ①
├── angular.json ①
├── dist ①
├── karma.conf.js ②
├── node_modules ①
├── package-lock.json ①
├── package.json ①
├── projects ①
├── src ②
├── tsconfig.app.json ②
├── tsconfig.json ②
└── tsconfig.spec.json ②

① Angular工程文件，對(duì)web及wechat項(xiàng)目均生效

② web項(xiàng)目的專屬文件

移動(dòng)web項(xiàng)目

為了更加的整齊劃一，我們將以②為標(biāo)識(shí)的文件統(tǒng)一移動(dòng)到projects文件夾中。新建文件夾名為web。

項(xiàng)目移動(dòng)完成后，我們對(duì)應(yīng)修正項(xiàng)目的配置信息

angular.json

該文件存放的是Angular項(xiàng)目的配置信息，配置不正確將直接導(dǎo)致ng s等命令無法正常啟動(dòng)。
我們對(duì)應(yīng)修正如下：

{
  "projects": {
    "web": {
-      "root": "", 
+      "root": "projects/web",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "projects/web/tsconfig.app.json",
-            "tsConfig": "tsconfig.spec.json",
+            "tsConfig": "projects/web/tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
+            "karmaConfig": "projects/web/karma.conf.js",

然后使用全局替換，將"src替換為"projects/web/src

修改完成后，運(yùn)行ng s web或ng t來檢查是否存在其它的語法錯(cuò)誤（主要是在遷移過程中可能發(fā)生的引用錯(cuò)誤），有的話按提示進(jìn)行修正。

至此，歷史項(xiàng)目遷移完畢。

公共模塊

接下來便可以在projects里面新一個(gè)common文件夾，然后將公用的實(shí)體、服務(wù)、組件等全部移過去了。這些小的功能模塊即可以在web工程中使用，也可以在wechat中使用，這樣以來同樣的輪子我們只造一個(gè)就可以了。

總結(jié)

到此這篇關(guān)于將Angular單項(xiàng)目升級(jí)為多項(xiàng)目的文章就介紹到這了,更多相關(guān)Angular單項(xiàng)目升級(jí)多項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論