项目工程结构搭建

ng new taskmgr –skip-install –style=scss 或者用 缩写
npm new taskmgr -si –style=scss
希望项目的样式风格是scss而不是css,因为后面会用Angular Material做主题的支持

cd taskmgr 进入目录文件
code . 启动 Visual code IDE

ng g m core 新建核心模块，这个模块我想让它在系统中只加载一次
既然CoreModule是一个类，那么它就会有构造函数，然后我们就可以在构造函数当中去进行依赖性注入

举个栗子：core.module.ts
CoreModule代码：

//这里特殊引入了SkipSelf，
import { NgModule, SkipSelf ,Optional} from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule {

  //@SkipSelf()这个注解是告诉说不要在我这里打转转了，去系统我的父级去寻找我的依赖，如果我已经存在了，那么在我的父亲的依赖池里面就会有我了，你去那里面找我，这样就可以避免无限循环了

  //第一次进入的时候，系统当中并没有CoreModule，所以用@Optional()告诉说这个依赖是可选的，当CoreModule不存在时，那就正常运行构造就好了。当存在时，那抛出一个异常就好了
  constructor(@Optional() @SkipSelf() parent: CoreModule) {
    if (parent){
      throw new Error('模块已经存在，不能再次加载');
    } else {

    } 
  }
 }

ng g m shared 新建共享模块，就是把大家都需要的东西导入进来，再导出出去。
举个栗子：shared.module.ts
SharedModule代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule { }

在这里我们把 CommonModule导入进来再导出出去，这样的话以后再有其它的模块需要 CommonModule的时候我们只需要导入SharedModule就好了，随着项目的增长，SharedModule里面会有很多模块需要导入导出。如果分别在每一个模块中导入导出就会很烦，再一个作用就是这个模块中后面也会有其它大家共享的组件

接下来：

在app.module.ts 根模块当中我们需要把CoreModule模块导入进来，这样我们在根模块中加载一次，其它的时候就不加载了

举个栗子：core.module.ts
CoreModule代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CoreModule} from './core/core.module'


import { AppComponent } from './app.component';

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