Angular项目目录结构设计

目录结构

|- src
	|- app
		|- core
			|- permissions
			|- components
			|- services
		|- features
			|- home
			|- settings
		|- shared
			|- components
			|- services
	|- assets
		|- images
		|- icons
		|- static
	|- styles
		|- variable.less
		|- flex.less
	|- themes

权限模块

ngx-permissions

UI框架

NG-ZORRO

Lint工具

angular-eslint

图表

ECharts@4.4.0
ngx-echarts@4.2.1

核心模块

每个应用程序必须有一个且只有一个实例的所有服务（单例服务）都应该在这里实现。
核心模块是一个 NgModule，其中包含实例化服务并加载核心功能的代码。
在核心模块中，我们通常放置将在整个应用程序中使用但只需要导入一次的单例服务和模块。比如 LocalStorage、 HttpClientModule 等模块。然后将 CoreModule 导入 AppModule 。

注意事项：

• 务必导入单例服务。
• 不要将 CoreModule 导入除 AppModule 之外的任何模块。

分享模块

创建共享模块能让你更好地组织和梳理代码。你可以把常用的指令、管道和组件放进一个模块中，然后在功能模块中导入该模块。
SharedModule 对我们应用程序的其余部分没有任何依赖性。
SharedModule 包含在多个动态加载模块中使用的类和资源。

注意事项：

• 务必声明组件、管道、指令并导出它们。
• 务必导入 FormsModule 或需要的其他（第 3 方）模块。
• 务必将 SharedModule 导入任何其他功能模块。
• 不要在您的 SharedModule 中提供应用程序范围的单例服务。而是将这些移动到 CoreModule。
• 不要将 SharedModule 导入 AppModule。

功能模块

我们将为应用程序的每个独立功能创建多个功能模块。功能模块应该只从 CoreModule 导入服务。如果功能模块 A 需要从功能模块 B 导入服务，请考虑将该服务移至核心模块。

尝试创建不依赖于任何其他功能的功能，仅依赖于 CoreModule 提供的服务和 SharedModule 提供的组件。

这将使我们的代码保持干净、易于维护和扩展新功能。它还减少了重构所需的工作量。

延迟加载

我们应该尽可能延迟加载功能模块。理论上，应用启动时只需要同步加载一个功能模块即可显示初始内容。在用户触发导航后，应延迟加载所有其他功能模块。