1.ng-zorro项目结构

angular项目结构

项目结构可以使项目看起来更加简洁，用过多种结构，感觉还是ng-alain的比较合理，可以参考ng-alain

项目地址：https://github.com/ng-alain/ng-alain/

借用ng-alain的目录结构

├── _mock                                       # Mock 数据规则
├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默认HTTP拦截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── layout                              # 通用布局
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes.module.ts                # 业务路由模块
│   │   │   └── routes-routing.module.ts        # 业务路由注册口
│   │   ├── shared                              # 共享模块
│   │   │   ├── shared-delon.module.ts          # @Delon/* 次级共享模块导入
│   │   │   ├── shared-zorro.module.ts          # NG-ZORRO 次级共享模块导入
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── global-config.module.ts             # @delon & ng-zorro 全局配置项
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
└── └── style.less                              # 样式引导入口

用命令生成4个模块

ng g m core
ng g m layout
ng g m routes --routing
ng g m shared

修改app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { RoutesModule } from '@routes/routes.module';
import { LayoutModule } from '@layout/layout.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule,
    LayoutModule,
    RoutesModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

删除app.component.css、app.component.html，修改app.component.ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
})
export class AppComponent { }

是路由的入口，如果标签报错，需要在组件注入的模块中引入RouterModule。标签引入后，需要在routes里routes-routing.module.ts配置对应的路由，不然页面显示空白。

1.可以在tsconfig.json中修改paths属性，让页面引用时路径类似绝对路径。

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@shared/*": [
        "src/app/shared/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@routes/*": [
        "src/app/routes/*"
      ],
      "@layout/*": [
        "src/app/layout/*"
      ]
    }
  }
}

引用的时候，可以写成

import { SharedModule } from '@shared/shared.module';

2.shared模块和core模块

shared模块作为公共模块，不需要在app.module中引入，layout模块、routes模块都需要引入，惰性加载的模块也需要引入，避免重复引入。

core模块中处理全部接口请求，有需要的组件对应的module中都需要引入core模块，否则无法拦截。如果直接将core模块注入到根模块app.module中，惰性加载的模块则无法拦截，需要注意此问题。

shared模块中的service在不同模块引入shared模块时会被重新初始化。如果需要不同模块中使用同一个服务，在service中直接注入到root中，不再注入到shared模块

@Injectable({
    providedIn: 'root'
})

3.routes模块

routes模块中尽量将同一块功能的写到一个文件夹中，然后模块化，然后改成惰性加载，会减少初始化页面时加载时间