回文集目录:JHipster一知半解
概述：
研究了一堆的配置文件后，终于回到了ts的源码里面，从架构转我代码的细节应该是程序员更为适应的区域，ng-jhipster是jhipster的前端工具lib，提供了通用的多语言服务、http拦截器、组件、指令、管道、服务等，下面我们逐步解析看看
入口和配置类
ng-jhipster.ts
仅包含一句
export * from './index';
index.ts(LIB库module的标准写法)
import部分：
//引入需要使用基础库
import { NgModule, ModuleWithProviders, Sanitizer } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { TranslateModule, TranslateLoader, MissingTranslationHandler, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
//引入自己内的实现
import { JHI_PIPES, JHI_DIRECTIVES, JHI_COMPONENTS, JHI_SERVICES } from './src/jhi-components';
import {
JhiMissingTranslationHandler,
JhiTranslateComponent,
JhiLanguageService
} from './src/language';
import { JhiModuleConfig } from './src/config';
import { JhiConfigService } from './src/config.service';
import { JhiAlertService } from './src/service';
export部分：
// Re export the files
export * from './src/pipe';
export * from './src/directive';
export * from './src/service';
export * from './src/component';
export * from './src/language';
export * from './src/interceptor';
重新把实现的功能导出，这样在其他地方就可以用 import {×} form 'ng-jhipster'，这样应用里面的实现（ts语法层）
ngModule部分
@NgModule({
imports: [
//这里原先使用了jhipster自己实现的PartialLoader，不过ngx-translat本身就是平行的了，所以现在只是简单封装一下地址。
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: translatePartialLoader,
deps: [HttpClient, JhiConfigService]
},
//这里用了自己实现的missingTranslationHandler，可以根据配置多语言和默认的错误提示。
missingTranslationHandler: {
provide: MissingTranslationHandler,
useFactory: missingTranslationHandler,
deps: [JhiConfigService]
}
}),
//这里吧Http作为通用的模块。
HttpClientModule,
HttpModule,
CommonModule
],
declarations: [
...JHI_PIPES,
...JHI_DIRECTIVES,
...JHI_COMPONENTS,
JhiTranslateComponent
],
//这里的export是保证直接import { NgJhipsterModule } from form 'ng-jhipster' 的地方可以，可以直接用里面的服务、指令（angular 层）
exports: [
...JHI_PIPES,
...JHI_DIRECTIVES,
...JHI_COMPONENTS,
JhiTranslateComponent,
TranslateModule,
HttpClientModule,
HttpModule,
CommonModule
]
})
export class NgJhipsterModule {
static forRoot(moduleConfig: JhiModuleConfig): ModuleWithProviders {
return {
ngModule: NgJhipsterModule,
//由于用了forRoot方法，需要返回ngModule和providers，就不是在上面@NgModule里面声明providers了。
providers: [
...JHI_SERVICES,
{ provide: JhiLanguageService, useClass: JhiLanguageService, deps: [TranslateService, JhiConfigService] },
{ provide: JhiAlertService, useClass: JhiAlertService, deps: [Sanitizer, JhiConfigService, TranslateService] },
{ provide: JhiModuleConfig, useValue: moduleConfig },
{ provide: JhiConfigService, useClass: JhiConfigService, deps: [JhiModuleConfig] }
]
};
}
}
config.ts（ng-jhipster具体可配置项）
@Injectable()
//整个lib暴露给外部的配置项,都有 "?=" ,提供了默认值。
export class JhiModuleConfig {
//给sort用的图标
sortIcon? = 'fa-sort';
sortAscIcon? = 'fa-sort-asc';
sortDescIcon? = 'fa-sort-desc';
sortIconSelector? = 'span.fa';
//i18n多语言选项，默认为关闭，英语，已经默认无法匹配翻译提示
i18nEnabled? = false;
defaultI18nLang? = 'en';
noi18nMessage? = 'translation-not-found';
//给组合的json加时间戳标记，避免浏览器缓存时无法更新。那构建时间也要成json就得有值，那必须修改webpack配置，并且同步替换到lib初始化中，还是不要的好
buildTimestamp? = '';
//给alert服务传递的默认配置。
alertAsToast? = false;
//jhi-boolean用的样式，没用到的component
classBadgeTrue? = 'badge badge-success';
classBadgeFalse? = 'badge badge-danger';
classTrue? = 'fa fa-lg fa-check text-success';
classFalse? = 'fa fa-lg fa-times text-danger';
}
config.service.ts
@Injectable()
export class JhiConfigService {
CONFIG_OPTIONS: JhiModuleConfig;
//构造函数，也就是forRoot的参数，传入一个JhiModuleConfig变量，先new一个默认值，然后再用...展开替换默认值。
//编译为js时会调用内嵌的__assign()方法合并两个值，再传递给CONFIG_OPTIONS。
constructor(moduleConfig?: JhiModuleConfig) {
this.CONFIG_OPTIONS = {
...new JhiModuleConfig(),
...moduleConfig
};
}
getConfig(): JhiModuleConfig {
return this.CONFIG_OPTIONS;
}
}
jhipster中初始化lib的地方
shared-libs.module.ts
NgJhipsterModule.forRoot({
// set below to true to make alerts look like toast
alertAsToast: false,
//启用默认值为英语的多语言
i18nEnabled: true,
defaultI18nLang: 'en'
//如果改为默认中文，应该改成如下值：
//defaultI18nLang: 'zh_cn',
//noi18nMessage: '无法找到翻译内容'
}),
附：ng-jhipster的webpack.common.js
// require those dependencies but don't bundle them
//我们的工程也必然需要这两个lib，所以就别打包他们了。
externals: [/^\@angular\//, /^rxjs\//],