ohayolibs

--- order: 30 title: Pluggable plugin type: Documents --- ## Foreword Plugins are the add and remove of optional features, such as when you don't need code style (although I don't think so), only need to: ```bash ng g ohayojp:plugin codeStyle -t=remove ``` Or add code style: ```bash ng g ohayojp:plugin codeStyle ``` ## Command format ```bash ng g ohayojp:plugin [plugin name] -t=[add | remove] ``` The `[plugin name]` is plugin name, `-t` supports two values `add` (default) and `remove`. ## List of plugins ### codeStyle Code style rules: - Verify typescript with [tslint](https://github.com/palantir/tslint) - Verify less with [stylelint](https://github.com/stylelint/stylelint) - Use [prettier](https://github.com/prettier/prettier) code formatting - Use [husky](https://github.com/typicode/husky) and [pretty-quick](https://github.com/azz/pretty-quick) to code verify and code format when git add ```bash # add ng g ohayojp:plugin codeStyle # remove ng g ohayojp:plugin codeStyle -t=remove ``` ### hmr Support HMR. ```bash # add ng g ohayojp:plugin hmr # remove ng g ohayojp:plugin hmr -t=remove ``` After installation, you can start HMR in the development environment: ```bash npm run hmr ``` ### ie IE browser can only be used under ES5. For more details, please refer to [Support IE11](/docs/ie11). ```bash # add ng g ohayojp:plugin ie # remove ng g ohayojp:plugin ie -t=remove ``` After installation, you can use `npm run ie: start` or` npm run ie: hmr` to enter IE11 development environment. ### docker Support for Docker deployment. ```bash # add ng g ohayojp:plugin docker # remove ng g ohayojp:plugin docker -t=remove ``` ### defaultLanguage Change the current default language, refer to: [I18n - Default Language](/docs/i18n#默认语言) ```bash # change to [en] ng g ohayojp:plugin defaultLanguage --defaultLanguage=en # change to [zh] ng g ohayojp:plugin defaultLanguage --defaultLanguage=zh # change to [zh-tw] ng g ohayojp:plugin defaultLanguage --defaultLanguage=zh-tw ``` #### Supported language list | Name | Language pack name | [Angular](https://github.com/angular/angular/tree/master/packages/common/locales) pack | [Zorro](http://ng.ant.design/docs/i18n/zh#%E6%94%AF%E6%8C%81%E8%AF%AD%E8%A8%80) pack | [Ohayo](/theme/locale) pack | |------|--------------------|----------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------|-----------------------------| | Simplified Chinese | zh-Hans,zh-cn,zh-Hans-CN,zh | zh-Hans,zh-cn,zh-Hans-CN,zh | zh_CN | zh_CN | | Traditional Chinese | zh-Hant,zh-tw,zh-Hant-TW | zh-Hant,zh-tw,zh-Hant-TW | zh_TW | zh_TW | | English (American) | en | en | en_US | en_US | | Turkish | tr | tr | tr_TR | tr_TR | | Polish | pl | pl | pl_PL | pl_PL | | Greek | el | el | el_GR | el_GR | | Korean | ko | ko | ko_KR | ko_KR | | Croatian | hr | hr | hr_HR | hr_HR | | Slovenian | sl | sl | sl_SI | sl_SI | ### networkEnv Allow chinese users to add a taobao mirror configuration file `.npmrc` or `.yarnrc` to solve network problems. ```bash # add npm ng g ohayojp:plugin networkEnv --packageManager=npm # add yarn ng g ohayojp:plugin networkEnv --packageManager=yarn # remove npm ng g ohayojp:plugin networkEnv --packageManager=npm -t=remove # remove yarn ng g ohayojp:plugin networkEnv --packageManager=yarn -t=remove ``` ### sts [ohayojp-sts](https://github.com/ohayojp/sts) Plugins, Build Swagger APIs to list, edit pages, You can finish some interesting things. ```bash # add ng g ohayojp:plugin sts # remove ng g ohayojp:plugin sts -t=remove ``` ### icon From the project to analyze and generate static load Icon, The plugin will automatically generate two files in the `src` directory: - `src/style-icons.ts` Custom Icon (e.g: remote menu icon) - `src/style-icons-auto.ts` command automatically generates files > Automatically exclude [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/nz-icon.service.ts#L6) and [@ohayo](https://github.com/ohayojp/ohayo/blob/master/packages/theme/src/theme.module.ts#L33) already loaded icons. ```bash ng g ohayojp:plugin icon ``` Also, you need to manually import in `startup.service.ts`: ```ts import { ICONS_AUTO } from '../../../style-icons-auto'; import { ICONS } from '../../../style-icons'; @Injectable() export class StartupService { constructor(iconSrv: NzIconService) { iconSrv.addIcon(...ICONS_AUTO, ...ICONS); } } ``` **Valid Grammar** ```html <nz-input-group [nzAddOnBeforeIcon]="focus ? 'anticon anticon-arrow-down' : 'anticon anticon-search'"></nz-input-group> ```