Angular10+企业级前端应用开发

卸载与安装

用于降级，比如Primeng10要和Angular10匹配使用，不能与Angular12一起使用，要把全局安装的ng12换成10

npm uninstall -g @angular/cli
npm install -g @angular/cli@10

# 升级npm
npm install -g npm
sudo npm install @angular/cdk@10 --save

主要使用UI框架推荐

现在项目里面主要用的是PrimeNG，也是Angular使用的主流UI之一。
当然现在国内AntDesign非常火，NG也有对应的Angular的AntDesign的库，不过不是很活跃，目前还没有研究到底是不是full-featured的。

一些最佳实践

1. 尽量将一些使用到的module 引入到SharedModule，然后将ShareModule引入到AppModule中，这样更简洁。AppModule里面只应该包括 SharedModule, CoreModule, AppStoreModule, AppRoutingModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    SharedModule,
    CoreModule,
    AppStoreModule,
    AppRoutingModule,
    DevelopedModule,// dev by ourselves
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. EffectsModule.forRoot([]) 和 StoreModule.forRoot({}) 一般都放在根目录中的app-store.module.ts里面。

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreRouterConnectingModule, RouterStateSerializer, routerReducer } from '@ngrx/router-store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { CustomSerializer } from './+state/router.reducer';


@NgModule({
  declarations: [],
  imports: [
  	// router 1
    StoreModule.forRoot(
      {
        router: routerReducer
      }
    ),
    // router 2
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router',
    }),
    // 没用到 router的时候，  There is no need to add routerReducer here, since we don't use RoutingModule
    // StoreModule.forRoot({}),
    // 在这引入EffectModule 就不需要再在AppModule里面引入
    EffectsModule.forRoot([]),
    // StoreDevToolsModule 和 InMemoryService 都不能带到Prod 环境里面去，只能在dev
    // Swtiching use or not use StoreDevtoolsModule against different environment
    !environment.production ? StoreDevtoolsModule.instrument() : [],
    // !environment.production ? StoreDevtoolsModule.instrument({
    //   maxAge: 25,
    //   logOnly: environment.production,
    //   features: {
    //     pause: false,
    //     lock: true,
    //     persist: true
    //   }
    // }) : [],
    
  ],
  exports: [],
  providers: [
  	// router 3
    { provide: RouterStateSerializer, useClass: CustomSerializer }
  ],
})

export class AppStoreModule {
  constructor(@Optional() @SkipSelf() parentModule: AppStoreModule) {
    if (parentModule) {
      throw new Error('AppStoreModule is already loaded. Import it in the AppModule only.');
    }
  }
}