有时候在开发的过程中发现一个Angular项目不太够用，两个独立的项目又不太好复用。比如当前我们需要一个新的运行于微信小程序端的H5项目，但却在想在新的H5项目中应用原WEB项目中实体、Share、Serivce以及MockApi等模块。此时，便需要将原来的Angular项目简单做个升级。

情景：

1. 当前已经有了一个运行于浏览器端的web项目。
2. 在当前项目的基础上新增一个wechat项目。
3. 将web项目中的一些公有的东西抽离出来组成一个公共库
4. 原web项目、新的wechat项目均能调用其公共库
   

开发环境

本文开发环境如下：

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

生成新工程

我们进入原web项目的根文件夹，执行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

同时更新了angular.json文件，写入了wechat这个新的项目的配置信息。

此时我们便可以使用ng s wechat来启动wechat项目，使用ng t wechat来测试wechat项目，以及使用ng build wechat来构建wechat的项目了。

wechat项目有了以后，我们当前得到了如下的目录树：

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工程文件，对web及wechat项目均生效

② web项目的专属文件

移动web项目

为了更加的整齐划一，我们将以②为标识的文件统一移动到projects文件夹中。新建文件夹名为web。

项目移动完成后，我们对应修正项目的配置信息

angular.json

该文件存放的是Angular项目的配置信息，配置不正确将直接导致ng s等命令无法正常启动。
我们对应修正如下：

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

修改完成后，运行ng s web或ng t来检查是否存在其它的语法错误（主要是在迁移过程中可能发生的引用错误），有的话按提示进行修正。

至此，历史项目迁移完毕。

公共模块

接下来便可以在projects里面新一个common文件夹，然后将公用的实体、服务、组件等全部移过去了。这些小的功能模块即可以在web工程中使用，也可以在wechat中使用，这样以来同样的轮子我们只造一个就可以了。

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript的打断点怎么实现，方法有多少种

  本篇文章给大家总结分享6种JavaScript的打断点的方式，值的学习收藏，快来看看你用过几种吧？希望对大家有所帮助！

• reduce方法的基本使用是怎样，有哪些使用技巧？

  ​本篇文章给大家带来了关于JavaScript的相关知识，reduce是数组原型对象上的一个方法，可以帮助我们操作数组。本文将和大家分享4个关于JavaScript中数组reduce的用法，希望对大家有所帮助。

• JavaScript的eval用于什么，用法是怎样

  eval是全局对象的一个函数属性，用于计算某个字符串，并执行其中的JavaScript代码。函数语法是eval(string)。参数string表示要计算的字符串。

• jQuery中如何去除没有ID元素，方法是什么

  去除HTML中没有ID元素的方法：1、使用“$("父元素").children(":not([id])")”语句获取到需要去除的所有没有ID的元素；2、使用remove()方法删除获取到的元素即可，语法“没有ID的元素.remove()”。

• JS判断变量类型方法是什么，哪些事项要注意

  JavaScript是一个动态类型语言，在运行时获取变量类型是常用操作。本文将通过示例为大家详细讲讲在JavaScript中如何判断变量类型，感兴趣的可以学习一下