大型Angular项目最佳实践

这里会陆续总结在一个大型的Angular项目中的最佳实践。

多App项目设置

这里说的大型项目,是说一个项目,包含多个app,多个app之间会共享组件。例如我们可能有多个管理系统,分别用于整个平台的运营系统、第三方商户的销售管理系统、库存及发货管理系统等等,这些系统可能有统一的风格样式,有很多service组件都是通用的,例如订单服务,用于从服务器获取订单,在第三方的销售管理系统,和平台的运营系统,或者统计报销都要使用。甚至这个订单显示的组件,在各个系统的显示都是一样的,只是根据角色有不同的功能。

要实现这样的项目也很容易,在使用angular-cli工具创建的项目中,会有一个
.angular-cli.json文件,里面有一个apps,通过配置多个app就能实现在一个项目里,包含多个应用。例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "admin-platform"
},
"apps": [
{
"name": "share",
"root": "src/share",
"outDir": "dist/share",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
...
},
{
"name": "admin",
"root": "src/admin",
"outDir": "dist/admin",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
...
},

然后在编译的时候,加上--app就能编译相应的应用。

项目结构

CoreModule

整个应用中只有一个实例,公用的service组件可以放在这里,需要保证这个模块在整个app里面只会被import一次。

SharedModule

包含组件、pipe、filter等。不依赖service,数据通过input方式接收。shareModule不应该再依赖app里面的其他模块。
如果SharedModule里面要用第三方的组件库,例如Angular Material components,可以在这里import再export出来。

index.ts

创建index,导入CoreModule, SharedModule再导出。

功能模块FeatureModule

功能模块之间不应该相互依赖,需要依赖的service放在CoreModule中。
如果确实有特例,一个模块需要用到另一个功能模块的service,可以创建一个特殊的FeatureModule(后面介绍)

模块之间的关系

模块之间的依赖关系应该是一个树状结构,也就是说不应该有循环依赖、不能有环。

延时加载

理论上来讲,应用一开始只应该加在一个功能模块,以及CoreModule和SharedModule。

使用别名

导入的时候:

1
import { SomeService } from "@app/core"

tsconfig里面定义:

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
"...": "reduced for brevity",
"baseUrl": "src",
"paths": {
"@app/*": ["app/*"],
"@env/*": ["environments/*"]
}
}
}

再结合index.ts的re-export,可以让代码更加简介。例如在CoreModule的index.ts中这样导出:

1
2
3
export * from './core.module';
export * from './user/user.service';
export * from './some-singleton-service/some-singleton.service';

那么在导入的时候就可以直接导入:

1
import { SomeSingletonService } from '@app/core';

这样可以大大简化代码,但是需要对service的命名有较好的规范,否则就会混乱。

坚持原创技术分享,您的支持将鼓励我继续创作!