preparement of deploy

2019-11-12 18:54:21 +09:00 · 2019-11-12 18:54:21 +09:00 · e9b444e64b
commit e9b444e64b
parent 1d282b59cb
80 changed files with 1384 additions and 923 deletions
--- a/angular.json
+++ b/angular.json
@ -82,7 +82,7 @@
              "budgets": [
                {
                  "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
@ -140,7 +140,7 @@
              "budgets": [
                {
                  "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
--- a/config/angular.webpack.config.js
+++ b/config/angular.webpack.config.js
@ -4,14 +4,12 @@ module.exports = (config, options) => {
  const PRODUCTION = process.env.NODE_ENV === 'production';
  const BROWSER = process.env.UCAP_ENV_RUNTIME === 'BROWSER';

-  console.log('BROWSER', BROWSER, config.target);
-
  if (!BROWSER) {
    config.target = 'electron-renderer';
  } else {
    config.target = 'web';
    config.node = {
-      fs: 'empty'
+      fs: 'empty',
    };
  }

@ -21,7 +19,7 @@ module.exports = (config, options) => {
      __dirname,
      '..',
      'projects/ucap-webmessenger-ui/src/assets/scss'
-    )
+    ),
  };

  return config;
--- a/config/main.webpack.config.ts
+++ b/config/main.webpack.config.ts
@ -20,18 +20,18 @@ const mainConfig: webpack.Configuration = {
      __dirname,
      '..',
      'electron-projects/ucap-webmessenger-electron/src/index'
-    )
+    ),
  },
  target: 'electron-main',
  mode: enviroments.__DEV__ ? 'development' : 'production',
  devtool: 'source-map',
  optimization: {
-    noEmitOnErrors: true
+    noEmitOnErrors: true,
  },
  externals,
  output: {
    filename: '[name].js',
-    path: path.resolve(__dirname, '..', outputDir)
+    path: path.resolve(__dirname, '..', outputDir),
  },
  module: {
    rules: [
@ -44,7 +44,7 @@ const mainConfig: webpack.Configuration = {
            'electron-projects/ucap-webmessenger-electron/src'
          ),
          path.resolve(__dirname, '..', 'electron-projects'),
-          path.resolve(__dirname, '..', 'projects')
+          path.resolve(__dirname, '..', 'projects'),
        ],
        use: [
          {
@ -55,20 +55,20 @@ const mainConfig: webpack.Configuration = {
                __dirname,
                '..',
                'electron-projects/ucap-webmessenger-electron/tsconfig.electron.json'
-              )
-            }
-          }
+              ),
+            },
+          },
        ],
-        exclude: /node_modules/
+        exclude: /node_modules/,
      },
      {
        test: /\.node$/,
        loader: 'awesome-node-loader',
        options: {
-          name: '[name].[ext]'
-        }
-      }
-    ]
+          name: '[name].[ext]',
+        },
+      },
+    ],
  },
  plugins: [
    new CleanWebpackPlugin({ verbose: false }),
@ -77,16 +77,16 @@ const mainConfig: webpack.Configuration = {
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin(
      Object.assign({}, enviroments, {
-        __PROCESS_KIND__: JSON.stringify('main')
+        __PROCESS_KIND__: JSON.stringify('main'),
      })
    ),
    new CopyWebpackPlugin([
      {
        from: 'ucap-webmessenger-electron/resources/**/*',
        to: path.resolve(__dirname, '..', 'dist'),
-        context: 'electron-projects'
-      }
-    ])
+        context: 'electron-projects',
+      },
+    ]),
  ],
  resolve: {
    extensions: ['.js', '.ts'],
@ -101,6 +101,11 @@ const mainConfig: webpack.Configuration = {
        '..',
        'electron-projects/ucap-webmessenger-electron-notification/src/public-api'
      ),
+      '@ucap-webmessenger/core': path.resolve(
+        __dirname,
+        '..',
+        'projects/ucap-webmessenger-core/src/public-api'
+      ),
      '@ucap-webmessenger/native': path.resolve(
        __dirname,
        '..',
@ -115,14 +120,14 @@ const mainConfig: webpack.Configuration = {
        __dirname,
        '..',
        'electron-projects/ucap-webmessenger-electron/src/public-api'
-      )
+      ),
    },
-    modules: [path.resolve(__dirname, '..', 'node_modules/')]
+    modules: [path.resolve(__dirname, '..', 'node_modules/')],
  },
  node: {
    __dirname: false,
-    __filename: false
-  }
+    __filename: false,
+  },
 };

 export default [mainConfig];
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@ -0,0 +1,9 @@
+version: '3.1'
+
+services:
+  nginx:
+    image: nginx:1.17.5-alpine
+    volumes:
+      - ../dist/ucap-webmessenger-app:/usr/share/nginx/html:ro
+    ports:
+      - 8099:80
--- a/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json
+++ b/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json
@ -19,6 +19,9 @@
      "@ucap-webmessenger/electron-notification": [
        "../ucap-webmessenger-electron-notification/src/public-api"
      ],
+      "@ucap-webmessenger/core": [
+        "../../projects/ucap-webmessenger-core/src/public-api"
+      ],
      "@ucap-webmessenger/native": [
        "../../projects/ucap-webmessenger-native/src/public-api"
      ],
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
    "start:renderer": "cross-env UCAP_ENV_RUNTIME=ELECTRON ng serve -c renderer-development",
    "start:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng serve -c browser-development -o",
    "build:renderer": "cross-env NODE_ENV=production ng build --base-href ./",
+    "build:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng build -c browser-development",
    "build:main:development": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts",
    "build:main:production": "cross-env NODE_ENV=production TS_NODE_PROJECT='./config/tsconfig.webpack.json' NODE_OPTIONS='--max_old_space_size=4096' parallel-webpack --config=config/main.webpack.config.ts",
    "test": "ng test",
--- a/projects/ucap-webmessenger-api-common/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/config/module-config.ts
@ -0,0 +1,7 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {
+  acceptableFileExtensions: string[];
+}
--- a/projects/ucap-webmessenger-api-common/src/lib/config/token.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/config/token.ts
--- a/projects/ucap-webmessenger-api-common/src/lib/config/urls.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/config/urls.ts
@ -0,0 +1,12 @@
+export interface Urls {
+  fileProfileSave: string;
+  fileTalkDownload: string;
+  fileTalkSave: string;
+  fileTalkShare: string;
+  massTalkDownload: string;
+  massTalkSave: string;
+  transMassTalkDownload: string;
+  transMassTalkSave: string;
+  translationReq: string;
+  translationSave: string;
+}
--- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
@ -3,82 +3,92 @@ import {
  HttpClient,
  HttpEventType,
  HttpResponse,
-  HttpRequest
+  HttpRequest,
 } from '@angular/common/http';

 import { Observable, Subject } from 'rxjs';
 import { map, filter } from 'rxjs/operators';

-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import {
  FileProfileSaveRequest,
  FileProfileSaveResponse,
  encodeFileProfileSave,
-  decodeFileProfileSave
+  decodeFileProfileSave,
 } from '../apis/file-profile-save';
 import {
  FileTalkDownloadRequest,
  encodeFileTalkDownload,
-  encodeFormDataFileTalkDownload
+  encodeFormDataFileTalkDownload,
 } from '../apis/file-talk-download';
 import {
  FileTalkSaveRequest,
  FileTalkSaveResponse,
  encodeFileTalkSave,
-  decodeFileTalkSave
+  decodeFileTalkSave,
 } from '../apis/file-talk-save';
 import {
  FileTalkShareRequest,
  FileTalkShareResponse,
  encodeFileTalkShare,
-  decodeFileTalkShare
+  decodeFileTalkShare,
 } from '../apis/file-talk-share';
 import {
  MassTalkDownloadRequest,
  MassTalkDownloadResponse,
  encodeMassTalkDownload,
-  decodeMassTalkDownload
+  decodeMassTalkDownload,
 } from '../apis/mass-talk-download';
 import {
  MassTalkSaveRequest,
  MassTalkSaveResponse,
  encodeMassTalkSave,
-  decodeMassTalkSave
+  decodeMassTalkSave,
 } from '../apis/mass-talk-save';
 import {
  TransMassTalkDownloadRequest,
  TransMassTalkDownloadResponse,
  encodeTransMassTalkDownload,
-  decodeTransMassTalkDownload
+  decodeTransMassTalkDownload,
 } from '../apis/trans-mass-talk-download';
 import {
  TransMassTalkSaveRequest,
  TransMassTalkSaveResponse,
  encodeTransMassTalkSave,
-  decodeTransMassTalkSave
+  decodeTransMassTalkSave,
 } from '../apis/trans-mass-talk-save';
 import {
  TranslationReqRequest,
  TranslationReqResponse,
  encodeTranslationReq,
-  decodeTranslationReq
+  decodeTranslationReq,
 } from '../apis/translation-req';
 import {
  TranslationSaveRequest,
  TranslationSaveResponse,
  encodeTranslationSave,
-  decodeTranslationSave
+  decodeTranslationSave,
 } from '../apis/translation-save';

+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CommonApiService {
+  readonly urls: Urls;
+
  constructor(
    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
    private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }

  public fileProfileSave(
    req: FileProfileSaveRequest,
@ -86,12 +96,10 @@ export class CommonApiService {
  ): Observable<FileProfileSaveResponse> {
    return this.httpClient
      .post<any>(
-        !!fileProfileSaveUrl
-          ? fileProfileSaveUrl
-          : this.moduleConfig.urls.fileProfileSave,
+        !!fileProfileSaveUrl ? fileProfileSaveUrl : this.urls.fileProfileSave,
        {},
        {
-          params: encodeFileProfileSave(req)
+          params: encodeFileProfileSave(req),
        }
      )
      .pipe(map(res => decodeFileProfileSave(res)));
@ -103,12 +111,10 @@ export class CommonApiService {
  ): string {
    const httpReq = new HttpRequest(
      'GET',
-      !!fileTalkDownloadUrl
-        ? fileTalkDownloadUrl
-        : this.moduleConfig.urls.fileTalkDownload,
+      !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
      {},
      {
-        params: encodeFileTalkDownload(req)
+        params: encodeFileTalkDownload(req),
      }
    );

@ -121,9 +127,7 @@ export class CommonApiService {
  ): Observable<Blob> {
    const httpReq = new HttpRequest(
      'POST',
-      !!fileTalkDownloadUrl
-        ? fileTalkDownloadUrl
-        : this.moduleConfig.urls.fileTalkDownload,
+      !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
      encodeFormDataFileTalkDownload(req),
      { reportProgress: true, responseType: 'blob' }
    );
@ -159,7 +163,7 @@ export class CommonApiService {
  ): Observable<FileTalkSaveResponse> {
    const httpReq = new HttpRequest(
      'POST',
-      !!fileTalkSaveUrl ? fileTalkSaveUrl : this.moduleConfig.urls.fileTalkSave,
+      !!fileTalkSaveUrl ? fileTalkSaveUrl : this.urls.fileTalkSave,
      encodeFileTalkSave(req),
      { reportProgress: true, responseType: 'text' as 'json' }
    );
@ -185,7 +189,10 @@ export class CommonApiService {
  public acceptableExtensionForFileTalk(extensions: string[]): boolean {
    for (const extension of extensions) {
      if (
-        -1 === this.moduleConfig.acceptableFileExtensions.indexOf(extension.toLowerCase())
+        -1 ===
+        this.moduleConfig.acceptableFileExtensions.indexOf(
+          extension.toLowerCase()
+        )
      ) {
        return false;
      }
@ -198,10 +205,10 @@ export class CommonApiService {
  ): Observable<FileTalkShareResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.fileTalkShare,
+        this.urls.fileTalkShare,
        {},
        {
-          params: encodeFileTalkShare(req)
+          params: encodeFileTalkShare(req),
        }
      )
      .pipe(map(res => decodeFileTalkShare(res)));
@ -212,11 +219,11 @@ export class CommonApiService {
  ): Observable<MassTalkDownloadResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.massTalkDownload,
+        this.urls.massTalkDownload,
        {},
        {
          params: encodeMassTalkDownload(req),
-          responseType: 'text' as 'json'
+          responseType: 'text' as 'json',
        }
      )
      .pipe(map(res => decodeMassTalkDownload(res)));
@ -227,11 +234,11 @@ export class CommonApiService {
  ): Observable<MassTalkSaveResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.massTalkSave,
+        this.urls.massTalkSave,
        {},
        {
          params: encodeMassTalkSave(req),
-          responseType: 'text' as 'json'
+          responseType: 'text' as 'json',
        }
      )
      .pipe(map(res => decodeMassTalkSave(res)));
@ -242,10 +249,10 @@ export class CommonApiService {
  ): Observable<TransMassTalkDownloadResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.transMassTalkDownload,
+        this.urls.transMassTalkDownload,
        {},
        {
-          params: encodeTransMassTalkDownload(req)
+          params: encodeTransMassTalkDownload(req),
        }
      )
      .pipe(map(res => decodeTransMassTalkDownload(res)));
@ -256,10 +263,10 @@ export class CommonApiService {
  ): Observable<TransMassTalkSaveResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.transMassTalkSave,
+        this.urls.transMassTalkSave,
        {},
        {
-          params: encodeTransMassTalkSave(req)
+          params: encodeTransMassTalkSave(req),
        }
      )
      .pipe(map(res => decodeTransMassTalkSave(res)));
@ -270,10 +277,10 @@ export class CommonApiService {
  ): Observable<TranslationReqResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.translationReq,
+        this.urls.translationReq,
        {},
        {
-          params: encodeTranslationReq(req)
+          params: encodeTranslationReq(req),
        }
      )
      .pipe(map(res => decodeTranslationReq(res)));
@ -284,10 +291,10 @@ export class CommonApiService {
  ): Observable<TranslationSaveResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.translationSave,
+        this.urls.translationSave,
        {},
        {
-          params: encodeTranslationSave(req)
+          params: encodeTranslationSave(req),
        }
      )
      .pipe(map(res => decodeTranslationSave(res)));
--- a/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
@ -1,15 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    fileProfileSave: string;
-    fileTalkDownload: string;
-    fileTalkSave: string;
-    fileTalkShare: string;
-    massTalkDownload: string;
-    massTalkSave: string;
-    transMassTalkDownload: string;
-    transMassTalkSave: string;
-    translationReq: string;
-    translationSave: string;
-  };
-  acceptableFileExtensions: string[];
-}
--- a/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';

 import { CommonApiService } from './services/common-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';

 const SERVICES = [CommonApiService];

@NgModule({
  declarations: [],
  imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapCommonApiModule {
  public static forRoot(
@ -17,7 +18,7 @@ export class UCapCommonApiModule {
  ): ModuleWithProviders<UCapCommonApiModule> {
    return {
      ngModule: UCapCommonApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-api-common/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-common/src/public-api.ts
@ -2,8 +2,6 @@
 * Public API Surface of ucap-webmessenger-api-common
 */

-export * from './lib/types/module-config';
-
 export * from './lib/apis/file-profile-save';
 export * from './lib/apis/file-talk-download';
 export * from './lib/apis/file-talk-save';
@ -21,3 +19,6 @@ export * from './lib/models/file-upload-item';
 export * from './lib/services/common-api.service';

 export * from './lib/ucap-common-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-api-external/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/config/module-config.ts
@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
--- a/projects/ucap-webmessenger-api-external/src/lib/config/token.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/config/token.ts
--- a/projects/ucap-webmessenger-api-external/src/lib/config/urls.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/config/urls.ts
@ -0,0 +1,6 @@
+export interface Urls {
+  checkUserInfoEx: string;
+  companyList: string;
+  tokenUpdate: string;
+  urlInfo: string;
+}
--- a/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
@ -4,51 +4,61 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import {
  CheckUserInfoExRequest,
  CheckUserInfoExResponse,
  encodeCheckUserInfoEx,
-  decodeCheckUserInfoEx
+  decodeCheckUserInfoEx,
 } from '../apis/check-user-info-ex';
 import {
  CompanyListRequest,
  CompanyListResponse,
  encodeCompanyList,
-  decodeCompanyList
+  decodeCompanyList,
 } from '../apis/company-list';
 import {
  TokenUpdateRequest,
  TokenUpdateResponse,
  encodeTokenUpdate,
-  decodeTokenUpdate
+  decodeTokenUpdate,
 } from '../apis/token-update';
 import {
  UrlInfoResponse,
  UrlInfoRequest,
  encodeUrlInfo,
-  decodeUrlInfo
+  decodeUrlInfo,
 } from '../apis/url-info';

+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ExternalApiService {
+  readonly urls: Urls;
+
  constructor(
    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
    private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }

  public checkUserInfoEx(
    req: CheckUserInfoExRequest
  ): Observable<CheckUserInfoExResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.checkUserInfoEx,
+        this.urls.checkUserInfoEx,
        {},
        {
-          params: encodeCheckUserInfoEx(req)
+          params: encodeCheckUserInfoEx(req),
        }
      )
      .pipe(map(res => decodeCheckUserInfoEx(res)));
@ -57,10 +67,10 @@ export class ExternalApiService {
  public companyList(req: CompanyListRequest): Observable<CompanyListResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.companyList,
+        this.urls.companyList,
        {},
        {
-          params: encodeCompanyList(req)
+          params: encodeCompanyList(req),
        }
      )
      .pipe(map(res => decodeCompanyList(res)));
@ -69,10 +79,10 @@ export class ExternalApiService {
  public tokenUpdate(req: TokenUpdateRequest): Observable<TokenUpdateResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.tokenUpdate,
+        this.urls.tokenUpdate,
        {},
        {
-          params: encodeTokenUpdate(req)
+          params: encodeTokenUpdate(req),
        }
      )
      .pipe(map(res => decodeTokenUpdate(res)));
@ -81,10 +91,10 @@ export class ExternalApiService {
  public urlInfo(req: UrlInfoRequest): Observable<UrlInfoResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.urlInfo,
+        this.urls.urlInfo,
        {},
        {
-          params: encodeUrlInfo(req)
+          params: encodeUrlInfo(req),
        }
      )
      .pipe(map(res => decodeUrlInfo(res)));
--- a/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
@ -1,8 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    checkUserInfoEx: string;
-    companyList: string;
-    tokenUpdate: string;
-    urlInfo: string;
-  };
-}
--- a/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';

 import { ExternalApiService } from './services/external-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';

 const SERVICES = [ExternalApiService];

@NgModule({
  declarations: [],
  imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapExternalApiModule {
  public static forRoot(
@ -17,7 +18,7 @@ export class UCapExternalApiModule {
  ): ModuleWithProviders<UCapExternalApiModule> {
    return {
      ngModule: UCapExternalApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-api-external/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-external/src/public-api.ts
@ -2,8 +2,6 @@
 * Public API Surface of ucap-webmessenger-api-public
 */

-export * from './lib/types/module-config';
-
 export * from './lib/models/company';

 export * from './lib/apis/check-user-info-ex';
@ -14,3 +12,6 @@ export * from './lib/apis/url-info';
 export * from './lib/services/external-api.service';

 export * from './lib/ucap-external-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts
@ -4,7 +4,7 @@ import {
  APIResponse,
  APIEncoder,
  APIDecoder,
-  ParameterUtil
+  ParameterUtil,
 } from '@ucap-webmessenger/api';

 export interface UpdateInfoRequest extends APIRequest {
@ -19,7 +19,7 @@ export interface UpdateInfoResponse extends APIResponse {
 }

 const updateInfoEncodeMap = {
-  deviceType: 'p_device_type'
+  deviceType: 'p_device_type',
 };

 export const encodeUpdateInfo: APIEncoder<UpdateInfoRequest> = (
@ -35,6 +35,6 @@ export const decodeUpdateInfo: APIDecoder<UpdateInfoResponse> = (res: any) => {
    appVersion: res.AppVer,
    installUrl: res.InstallURL,
    launcherAppVersion: res.LauncherAppVer,
-    launcherInstallUrl: res.LauncherInstallURL
+    launcherInstallUrl: res.LauncherInstallURL,
  } as UpdateInfoResponse;
 };
--- a/projects/ucap-webmessenger-api-public/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/config/module-config.ts
@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
--- a/projects/ucap-webmessenger-api-public/src/lib/config/token.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/config/token.ts
--- a/projects/ucap-webmessenger-api-public/src/lib/config/urls.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/config/urls.ts
@ -0,0 +1,4 @@
+export interface Urls {
+  versionInfo2: string;
+  updateInfo: string;
+}
--- a/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
@ -4,39 +4,49 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

-import { _MODULE_CONFIG } from '../types/token';
 import {
  VersionInfo2Request,
  VersionInfo2Response,
  encodeVersionInfo2,
-  decodeVersionInfo2
+  decodeVersionInfo2,
 } from '../apis/version-info2';
 import {
  UpdateInfoRequest,
  UpdateInfoResponse,
  encodeUpdateInfo,
-  decodeUpdateInfo
+  decodeUpdateInfo,
 } from '../apis/update-info';
-import { ModuleConfig } from '../types/module-config';
+
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { UrlConfig } from '@ucap-webmessenger/core';
+import { Urls } from '../config/urls';

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PublicApiService {
+  readonly urls: Urls;
+
  constructor(
    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
    private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }

  public versionInfo2(
    req: VersionInfo2Request
  ): Observable<VersionInfo2Response> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.versionInfo2,
+        this.urls.versionInfo2,
        {},
        {
-          params: encodeVersionInfo2(req)
+          params: encodeVersionInfo2(req),
        }
      )
      .pipe(map((res: any) => decodeVersionInfo2(res)));
@ -45,10 +55,10 @@ export class PublicApiService {
  public updateInfo(req: UpdateInfoRequest): Observable<UpdateInfoResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.updateInfo,
+        this.urls.updateInfo,
        {},
        {
-          params: encodeUpdateInfo(req)
+          params: encodeUpdateInfo(req),
        }
      )
      .pipe(map(res => decodeUpdateInfo(res)));
--- a/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
@ -1,6 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    versionInfo2: string;
-    updateInfo: string;
-  };
-}
--- a/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';

 import { PublicApiService } from './services/public-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';

 const SERVICES = [PublicApiService];

@NgModule({
  declarations: [],
  imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapPublicApiModule {
  public static forRoot(
@ -17,7 +18,7 @@ export class UCapPublicApiModule {
  ): ModuleWithProviders<UCapPublicApiModule> {
    return {
      ngModule: UCapPublicApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-api-public/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-public/src/public-api.ts
@ -7,7 +7,9 @@ export * from './lib/apis/version-info2';

 export * from './lib/services/public-api.service';

-export * from './lib/types/module-config';
 export * from './lib/types/sync-mode.type';

 export * from './lib/ucap-public-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
+++ b/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
@ -1,4 +1,4 @@
 export enum StatusCode {
  Success = '200',
-  Fail = '500'
+  Fail = '500',
 }
--- a/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
@ -1,35 +1,59 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule, APP_INITIALIZER, Type } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http';
+
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';

 import { RESOLVERS } from './resolvers';
 import { SERVICES } from './services';
 import { AppService } from './services/app.service';
-import { HttpClient } from '@angular/common/http';
-import { UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
-import { environment } from '../environments/environment';

-export function initializeApp(appService: AppService) {
+import { environment } from '../environments/environment';
+import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+
+export function initializeApp(
+  appService: AppService,
+  nativeService: NativeService
+) {
  return (): Promise<any> => {
    return appService.postInit();
  };
 }

+// export function nativeServiceFactory(httpClient: HttpClient) {
+//   if ('browser' === environment.runtime) {
+//     return import('@ucap-webmessenger/native-browser').then(
+//       m => new m.BrowserNativeService(httpClient)
+//     );
+//   } else {
+//     return import('@ucap-webmessenger/native-electron').then(
+//       m => new m.ElectronNativeService()
+//     );
+//   }
+// }
+
@NgModule({
  imports: [],
  exports: [],
  providers: [
-    ...SERVICES,
-    ...RESOLVERS,
    {
      provide: UCAP_NATIVE_SERVICE,
-      useClass: environment.modules.native.serviceClass,
-      deps: [HttpClient]
+      // useFactory: nativeServiceFactory,
+      useClass:
+        'browser' === environment.runtime
+          ? BrowserNativeService
+          : ElectronNativeService,
+      deps: [HttpClient],
    },
+    ...SERVICES,
+    ...RESOLVERS,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppService, UCAP_NATIVE_SERVICE],
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class AppProviderModule {}
--- a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
@ -10,26 +10,26 @@ const routes: Routes = [
      import('./pages/messenger/messenger.page.module').then(
        m => m.AppMessengerPageModule
      ),
-    canActivate: [AppAuthGuard]
+    canActivate: [AppAuthGuard],
  },
  {
    path: 'account',
    loadChildren: () =>
      import('./pages/account/account.page.module').then(
        m => m.AppAccountPageModule
-      )
+      ),
  },
  {
    path: 'template',
    loadChildren: () =>
      import('./pages/template/template.page.module').then(
        m => m.AppTemplatePageModule
-      )
-  }
+      ),
+  },
 ];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@ -7,6 +7,13 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';

 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';

+import { UCapUiModule } from '@ucap-webmessenger/ui';
+import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
+
+import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
+
+import { UCapUtilModule } from '@ucap-webmessenger/util';
+
 import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
 import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
 import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
@ -25,17 +32,8 @@ import { UCapServiceProtocolModule } from '@ucap-webmessenger/protocol-service';
 import { UCapStatusProtocolModule } from '@ucap-webmessenger/protocol-status';
 import { UCapSyncProtocolModule } from '@ucap-webmessenger/protocol-sync';

-import { UCapUiModule } from '@ucap-webmessenger/ui';
-import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
-
-import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
-
-import { UCapUtilModule } from '@ucap-webmessenger/util';
-
 import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

-import { environment } from '../environments/environment';
-
 import { AppProviderModule } from './app-provider.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppStoreModule } from './app-store.module';
@ -47,6 +45,8 @@ import { GUARDS } from './guards';
 import { AppMessengerLayoutModule } from './layouts/messenger/messenger.layout.module';
 import { AppNativeLayoutModule } from './layouts/native/native.layout.module';

+import { environment } from '../environments/environment';
+
@NgModule({
  imports: [
    BrowserModule,
@ -58,28 +58,14 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';

    PerfectScrollbarModule,

-    UCapCommonApiModule.forRoot({
-      urls: environment.urls.apiCommon,
-      acceptableFileExtensions:
-        environment.modules.event.acceptableFileExtensions
-    }),
+    UCapCommonApiModule.forRoot(environment.commonApiModuleConfig),

-    UCapPublicApiModule.forRoot({
-      urls: environment.urls.apiPublic
-    }),
-    UCapExternalApiModule.forRoot({
-      urls: environment.urls.apiExternal
-    }),
+    UCapPublicApiModule.forRoot(environment.publicApiModuleConfig),
+    UCapExternalApiModule.forRoot(environment.externalApiModuleConfig),

-    UCapPiModule.forRoot({
-      urls: environment.urls.pi
-    }),
+    UCapPiModule.forRoot(environment.piModuleConfig),

-    UCapProtocolModule.forRoot({
-      urls: environment.urls.protocol,
-      reconnect: environment.protocol.reconnect,
-      requestId: environment.protocol.requestId
-    }),
+    UCapProtocolModule.forRoot(environment.protocolModuleConfig),
    UCapAuthenticationProtocolModule.forRoot(),
    UCapEventProtocolModule.forRoot(),
    UCapGroupProtocolModule.forRoot(),
@ -107,12 +93,12 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
    AppNativeLayoutModule,

    LoggerModule.forRoot({
-      level: NgxLoggerLevel.DEBUG
-    })
+      level: NgxLoggerLevel.DEBUG,
+    }),
  ],
  providers: [...GUARDS],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
-  entryComponents: []
+  entryComponents: [],
 })
 export class AppModule {}
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@ -9,8 +9,17 @@
      <ng-template mat-tab-label>
        <!--<mat-icon>group</mat-icon>-->
        <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
@ -18,7 +27,7 @@
      </ng-template>
      <app-layout-chat-left-sidenav-group
        class="left-group-side"
-        (newGroupAndMember)="onClickNewGroupAndMember($event)"
+        (newGroupAndMember)="onClickNewGroupAndMember()"
        (openProfile)="onClickOpenProfile($event)"
      ></app-layout-chat-left-sidenav-group>
    </mat-tab>
@ -32,16 +41,28 @@
          matBadgePosition="above after"
          >chat</mat-icon
        >-->
-        <div class="icon-item"  [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
+        <div
+          class="icon-item"
+          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
          [matBadge]="badgeChatUnReadCount$ | async"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
-          matBadgePosition="above after">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+          matBadgePosition="above after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
            <path
-              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
-            </path>
+              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+            ></path>
          </svg>
        </div>
      </ng-template>
@ -51,8 +72,17 @@
      <ng-template mat-tab-label>
        <!--<mat-icon>device_hub</mat-icon>-->
        <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
            <circle class="st0" cx="18.4" cy="18.5" r="3" />
            <circle class="st0" cx="12" cy="5" r="3" />
            <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
@ -73,16 +103,27 @@
      <ng-template mat-tab-label>
        <!--<mat-icon>phone</mat-icon>-->
        <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone">
-            <path class="st0"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-phone"
+          >
+            <path
+              class="st0"
              d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
                  		c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
                  		c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
                  		c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
                  		c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
-                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z">
-            </path>
+                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z"
+            ></path>
          </svg>
        </div>
      </ng-template>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@ -17,7 +17,7 @@
    [companyList]="companyList$ | async"
    [companyCode]="companyCode"
    (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-    (cancel)="onClickCancel($event)"
+    (cancel)="onClickCancel()"
  ></ucap-organization-tenant-search>

  <mat-menu
@ -28,8 +28,17 @@
  >
    <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
      <!--<mat-icon>group_add</mat-icon>-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="8.5" cy="7" r="4"></circle>
        <line x1="20" y1="8" x2="20" y2="14"></line>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@ -6,7 +6,7 @@
    [companyList]="companyList$ | async"
    [companyCode]="companyCode"
    (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-    (cancel)="onClickCancel($event)"
+    (cancel)="onClickCancel()"
  >
  </ucap-organization-tenant-search>
 </div>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@ -66,7 +66,7 @@
        <button
          *ngIf="!!roomInfo"
          mat-icon-button
-          (click)="onClickReceiveAlarm($event)"
+          (click)="onClickReceiveAlarm()"
          aria-label="Toggle Receive Alarm"
        >
          <mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@ -44,7 +44,7 @@
                  (keyDownEnter)="
                    onKeyDownEnterOrganizationTenantSearch($event)
                  "
-                  (cancel)="onClickCancel($event)"
+                  (cancel)="onClickCancel()"
                ></ucap-organization-tenant-search>
              </div>
              <div *ngIf="!isShowSearch" class="list-panel">
--- a/projects/ucap-webmessenger-app/src/app/services/app.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/app.service.ts
@ -32,7 +32,7 @@ export class AppService {
        this.sessionStorageService.set<EnvironmentsInfo>(
          KEY_ENVIRONMENTS_INFO,
          {
-            deviceType
+            deviceType,
          }
        );

--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
@ -6,7 +6,7 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { LoginInfo } from '@app/types';
 import {
  UserPasswordSetRequest,
-  UserPasswordSetResponse
+  UserPasswordSetResponse,
 } from '@ucap-webmessenger/protocol-service';

 export const webLogin = createAction(
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@ -9,14 +9,14 @@ import { Actions, ofType, createEffect } from '@ngrx/effects';
 import {
  PiService,
  Login2Response,
-  UserTermsActionResponse
+  UserTermsActionResponse,
 } from '@ucap-webmessenger/pi';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import {
  DialogService,
  ConfirmDialogComponent,
  ConfirmDialogData,
-  ConfirmDialogResult
+  ConfirmDialogResult,
 } from '@ucap-webmessenger/ui';

 import {
@ -34,13 +34,13 @@ import {
  privacyAgreeSuccess,
  changePassword,
  changePasswordFailure,
-  changePasswordSuccess
+  changePasswordSuccess,
 } from './actions';
 import {
  LoginInfo,
  KEY_LOGIN_INFO,
  EnvironmentsInfo,
-  KEY_ENVIRONMENTS_INFO
+  KEY_ENVIRONMENTS_INFO,
 } from '@app/types';
 import { AppAuthenticationService } from '@app/services/authentication.service';
 import { NGXLogger } from 'ngx-logger';
@ -48,7 +48,7 @@ import { Store } from '@ngrx/store';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
  ServiceProtocolService,
-  UserPasswordSetResponse
+  UserPasswordSetResponse,
 } from '@ucap-webmessenger/protocol-service';

@Injectable()
@ -62,7 +62,7 @@ export class Effects {
          .login2({
            loginId: params.loginInfo.loginId,
            loginPw: params.loginInfo.loginPw,
-            companyCode: params.loginInfo.companyCode
+            companyCode: params.loginInfo.companyCode,
          })
          .pipe(
            map((res: Login2Response) => {
@ -72,7 +72,7 @@ export class Effects {
                return webLoginSuccess({
                  loginInfo: params.loginInfo,
                  rememberMe: params.rememberMe,
-                  login2Response: res
+                  login2Response: res,
                });
              }
            }),
@ -138,8 +138,8 @@ export class Effects {
          width: '220px',
          data: {
            title: 'Logout',
-            message: 'Logout ?'
-          }
+            message: 'Logout ?',
+          },
        });

        return result.choice;
@ -168,7 +168,7 @@ export class Effects {
              token: loginRes.tokenString,
              deviceType: environmentsInfo.deviceType,
              localeCode: loginInfo.localeCode,
-              textOnly: 'true'
+              textOnly: 'true',
            });

            const result = await this.dialogService.open<
@ -180,9 +180,9 @@ export class Effects {
              height: '500px',
              disableClose: true,
              data: {
-                title: '개인정보 동의'
+                title: '개인정보 동의',
                // html: `<iframe id="ifm_privacy" src="${privacyTotalUrl}" style="width: 100%;height: 300px;" />`
-              }
+              },
            });

            if (result.choice) {
@ -204,8 +204,8 @@ export class Effects {
              disableClose: true,
              data: {
                title: '패스워드 만료',
-                message: ''
-              }
+                message: '',
+              },
            });

            if (result.choice) {
@ -232,7 +232,7 @@ export class Effects {
        return {
          loginInfo,
          environmentsInfo,
-          loginResponse: action.loginRes
+          loginResponse: action.loginRes,
        };
      }),
      exhaustMap(params =>
@ -240,7 +240,7 @@ export class Effects {
          .userTermsAction({
            userSeq: params.loginResponse.userSeq,
            token: params.loginResponse.tokenString,
-            deviceType: params.environmentsInfo.deviceType
+            deviceType: params.environmentsInfo.deviceType,
          })
          .pipe(
            map((res: UserTermsActionResponse) => {
@ -264,7 +264,7 @@ export class Effects {
        this.serviceProtocolService.userPasswordSet(req).pipe(
          map((res: UserPasswordSetResponse) => {
            return changePasswordSuccess({
-              res
+              res,
            });
          }),
          catchError(error => of(changePasswordFailure({ error })))
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
@ -7,7 +7,7 @@ export const reducer = createReducer(
  on(loginSuccess, (state, action) => {
    return {
      ...state,
-      loginRes: action.loginRes
+      loginRes: action.loginRes,
    };
  })
 );
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
@ -7,14 +7,11 @@ export interface State {
 }

 export const initialState: State = {
-  loginRes: null
+  loginRes: null,
 };

 export function selectors<S>(selector: Selector<any, State>) {
  return {
-    loginRes: createSelector(
-      selector,
-      (state: State) => state.loginRes
-    )
+    loginRes: createSelector(selector, (state: State) => state.loginRes),
  };
 }
--- a/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts
@ -1,18 +1,7 @@
-import { Environment, build } from './environment.type';
-import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';

-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment: Environment = build(false);
-environment.modules.native.serviceClass = BrowserNativeService;
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+export const environment: Environment = {
+  ...devEnvironment,
+  runtime: 'browser',
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts
@ -1,5 +1,7 @@
-import { Environment, build } from './environment.type';
-import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { Environment } from './environment.type';
+import { environment as prodEnvironment } from './environment.prod';

-export const environment: Environment = build(true);
-environment.modules.native.serviceClass = BrowserNativeService;
+export const environment: Environment = {
+  ...prodEnvironment,
+  runtime: 'browser',
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts
@ -1,18 +1,7 @@
-import { Environment, build } from './environment.type';
-import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';

-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment: Environment = build(false);
-environment.modules.native.serviceClass = ElectronNativeService;
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+export const environment: Environment = {
+  ...devEnvironment,
+  runtime: 'electron',
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts
@ -1,5 +1,7 @@
-import { Environment, build } from './environment.type';
-import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+import { Environment } from './environment.type';
+import { environment as prodEnvironment } from './environment.prod';

-export const environment: Environment = build(true);
-environment.modules.native.serviceClass = ElectronNativeService;
+export const environment: Environment = {
+  ...prodEnvironment,
+  runtime: 'electron',
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@ -0,0 +1,69 @@
+import {
+  Environment,
+  commonApiUrls,
+  commonApiacceptableFileExtensions,
+  publicApiUrls,
+  externalApiUrls,
+  piUrls,
+  protocolUrls,
+} from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  title: `[개발] Woori TALK`,
+
+  commonApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: commonApiUrls,
+    acceptableFileExtensions: commonApiacceptableFileExtensions,
+  },
+
+  publicApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: publicApiUrls,
+  },
+
+  externalApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: externalApiUrls,
+  },
+
+  piModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097,
+    },
+    urls: piUrls,
+  },
+
+  protocolModuleConfig: {
+    hostConfig: {
+      protocol: 'ws',
+      domain: '27.122.224.170',
+      port: 8080,
+    },
+    urls: protocolUrls,
+    reconnect: {
+      delay: 1000,
+    },
+    requestId: {
+      min: 1,
+      max: 59999,
+    },
+  },
+
+  nativeModuleConfig: {},
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@ -0,0 +1,69 @@
+import {
+  Environment,
+  commonApiUrls,
+  commonApiacceptableFileExtensions,
+  publicApiUrls,
+  externalApiUrls,
+  piUrls,
+  protocolUrls,
+} from './environment.type';
+
+export const environment: Environment = {
+  production: true,
+  title: `[개발] Woori TALK`,
+
+  commonApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: commonApiUrls,
+    acceptableFileExtensions: commonApiacceptableFileExtensions,
+  },
+
+  publicApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: publicApiUrls,
+  },
+
+  externalApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: externalApiUrls,
+  },
+
+  piModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097,
+    },
+    urls: piUrls,
+  },
+
+  protocolModuleConfig: {
+    hostConfig: {
+      protocol: 'ws',
+      domain: '27.122.224.170',
+      port: 8080,
+    },
+    urls: protocolUrls,
+    reconnect: {
+      delay: 1000,
+    },
+    requestId: {
+      min: 1,
+      max: 59999,
+    },
+  },
+
+  nativeModuleConfig: {},
+};
--- a/projects/ucap-webmessenger-app/src/environments/environment.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.ts
@ -1,10 +1,13 @@
-import { Environment, build } from './environment.type';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';

 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.

-export const environment: Environment = build(false);
+export const environment: Environment = {
+  ...devEnvironment,
+};

 /*
 * For easier debugging in development mode, you can import the following file
--- a/projects/ucap-webmessenger-app/src/environments/environment.type.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
--- a/projects/ucap-webmessenger-core/src/lib/config/host.config.ts
+++ b/projects/ucap-webmessenger-core/src/lib/config/host.config.ts
@ -0,0 +1,7 @@
+export type HostProtocol = 'http' | 'https' | 'ws' | 'wss';
+
+export interface HostConfig {
+  protocol: HostProtocol;
+  domain: string;
+  port: number;
+}
--- a/projects/ucap-webmessenger-core/src/lib/config/module.config.ts
+++ b/projects/ucap-webmessenger-core/src/lib/config/module.config.ts
@ -0,0 +1,6 @@
+import { HostConfig } from './host.config';
+
+export interface ModuleConfig<UrlsType = {}> {
+  hostConfig?: HostConfig;
+  urls?: UrlsType;
+}
--- a/projects/ucap-webmessenger-core/src/lib/config/url.config.ts
+++ b/projects/ucap-webmessenger-core/src/lib/config/url.config.ts
@ -0,0 +1,24 @@
+import { HostConfig } from './host.config';
+
+export abstract class UrlConfig {
+  static getUrls<T extends any>(hotConfig: HostConfig, urls: T): T {
+    const nUrls: any = {};
+    for (const key in urls) {
+      if (urls.hasOwnProperty(key)) {
+        const pathname = urls[key];
+        nUrls[key] = UrlConfig.getUrl(hotConfig, pathname);
+      }
+    }
+
+    return nUrls;
+  }
+
+  private static getUrl(hotConfig: HostConfig, pathname: string): string {
+    const url = new URL(
+      `${hotConfig.protocol}://${hotConfig.domain}:${String(hotConfig.port)}`
+    );
+    url.pathname = pathname;
+
+    return url.href;
+  }
+}
--- a/projects/ucap-webmessenger-core/src/public-api.ts
+++ b/projects/ucap-webmessenger-core/src/public-api.ts
@ -23,3 +23,7 @@ export * from './lib/types/video-conference-type.type';
 export * from './lib/utils/file.util';
 export * from './lib/utils/mime.util';
 export * from './lib/utils/string.util';
+
+export * from './lib/config/host.config';
+export * from './lib/config/url.config';
+export * from './lib/config/module.config';
--- a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
+++ b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
@ -8,15 +8,15 @@ import {
 } from '@ucap-webmessenger/native';
 import { HttpClient } from '@angular/common/http';
 import { map, share } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { TranslateLoaderService } from '../translate/browser-loader';
 import { NotificationService } from '../notification/notification.service';
+import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
 })
-export class BrowserNativeService implements NativeService {
+export class BrowserNativeService extends NativeService {
  private notificationService: NotificationService;

  private chatOpenRoomSubject: Subject<string> | null = null;
@ -110,6 +110,7 @@ export class BrowserNativeService implements NativeService {
  }

  constructor(private httpClient: HttpClient) {
+    super();
    this.notificationService = new NotificationService();
  }
 }
--- a/projects/ucap-webmessenger-native-browser/src/lib/ucap-browser-native.module.ts
+++ b/projects/ucap-webmessenger-native-browser/src/lib/ucap-browser-native.module.ts
@ -1,19 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BrowserNativeService } from './services/browser-native.service';
-
-const SERVICES = [BrowserNativeService];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: []
-})
-export class UCapBrowserNativeModule {
-  public static forRoot(): ModuleWithProviders<UCapBrowserNativeModule> {
-    return {
-      ngModule: UCapBrowserNativeModule,
-      providers: [...SERVICES]
-    };
-  }
-}
--- a/projects/ucap-webmessenger-native-browser/src/public-api.ts
+++ b/projects/ucap-webmessenger-native-browser/src/public-api.ts
@ -2,8 +2,8 @@
 * Public API Surface of ucap-webmessenger-native-browser
 */

+export * from './lib/notification/notification.service';
+
 export * from './lib/services/browser-native.service';

 export * from './lib/translate/browser-loader';
-
-export * from './lib/ucap-browser-native.module';
--- a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
@ -1,4 +1,4 @@
-import { ipcRenderer, remote, IpcRendererEvent } from 'electron';
+import { ipcRenderer, remote } from 'electron';

 import { Observable, Subject } from 'rxjs';

@ -6,7 +6,7 @@ import {
  NativeService,
  WindowState,
  NotificationRequest,
-  WindowIdle
+  WindowIdle,
 } from '@ucap-webmessenger/native';
 import { share } from 'rxjs/operators';
 import {
@ -15,16 +15,19 @@ import {
  FileChannel,
  WindowStateChannel,
  IdleStateChannel,
-  ChatChannel
+  ChatChannel,
 } from '../types/channel.type';
 import { Injectable } from '@angular/core';
 import { TranslateLoaderService } from '../translate/electron-loader';
 import { TranslateLoader } from '@ngx-translate/core';

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ElectronNativeService implements NativeService {
+  private ipcRenderer: typeof ipcRenderer;
+  private remote: typeof remote;
+
  private windowStateChangedSubject: Subject<WindowState> | null = null;
  private windowStateChanged$: Observable<WindowState> | null = null;

@ -37,17 +40,17 @@ export class ElectronNativeService implements NativeService {
  postAppInit(): void {}

  notify(noti: NotificationRequest): void {
-    ipcRenderer.send(NotificationChannel.Notify, noti);
+    this.ipcRenderer.send(NotificationChannel.Notify, noti);
  }

  closeAllNotify(): void {
-    ipcRenderer.send(NotificationChannel.CloseAllNotify);
+    this.ipcRenderer.send(NotificationChannel.CloseAllNotify);
  }

  checkForUpdates(): Observable<boolean> {
    return new Observable<boolean>(subscriber => {
      try {
-        subscriber.next(ipcRenderer.sendSync(UpdaterChannel.Check));
+        subscriber.next(this.ipcRenderer.sendSync(UpdaterChannel.Check));
      } catch (error) {
        subscriber.error(error);
      } finally {
@ -57,13 +60,13 @@ export class ElectronNativeService implements NativeService {
  }

  showImageViewer(): void {
-    ipcRenderer.send(FileChannel.ShowImageViewer);
+    this.ipcRenderer.send(FileChannel.ShowImageViewer);
  }

  readFile(path: string): Observable<Buffer> {
    return new Observable<Buffer>(subscriber => {
      try {
-        subscriber.next(ipcRenderer.sendSync(FileChannel.ReadFile, path));
+        subscriber.next(this.ipcRenderer.sendSync(FileChannel.ReadFile, path));
      } catch (error) {
        subscriber.error(error);
      } finally {
@ -80,7 +83,12 @@ export class ElectronNativeService implements NativeService {
    return new Observable<string>(subscriber => {
      try {
        subscriber.next(
-          ipcRenderer.sendSync(FileChannel.SaveFile, buffer, fileName, path)
+          this.ipcRenderer.sendSync(
+            FileChannel.SaveFile,
+            buffer,
+            fileName,
+            path
+          )
        );
      } catch (error) {
        subscriber.error(error);
@ -98,9 +106,9 @@ export class ElectronNativeService implements NativeService {
        .pipe(share());
    }

-    ipcRenderer.on(
+    this.ipcRenderer.on(
      WindowStateChannel.Changed,
-      (event: IpcRendererEvent, windowState: WindowState) => {
+      (event: any, windowState: WindowState) => {
        this.windowStateChangedSubject.next(windowState);
      }
    );
@ -108,7 +116,7 @@ export class ElectronNativeService implements NativeService {
  }

  windowClose(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
    if (!currentWindow) {
      return;
    }
@ -117,7 +125,7 @@ export class ElectronNativeService implements NativeService {
  }

  windowMinimize(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
    if (!currentWindow) {
      return;
    }
@ -126,7 +134,7 @@ export class ElectronNativeService implements NativeService {
  }

  windowMaximize(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
    if (!currentWindow) {
      return;
    }
@ -146,11 +154,11 @@ export class ElectronNativeService implements NativeService {
        .pipe(share());
    }

-    ipcRenderer.send(IdleStateChannel.StartCheck);
+    this.ipcRenderer.send(IdleStateChannel.StartCheck);

-    ipcRenderer.on(
+    this.ipcRenderer.on(
      IdleStateChannel.Changed,
-      (event: IpcRendererEvent, idleState: WindowIdle) => {
+      (event: any, idleState: WindowIdle) => {
        this.idleStateChangedSubject.next(idleState);
      }
    );
@ -165,12 +173,9 @@ export class ElectronNativeService implements NativeService {
        .pipe(share());
    }

-    ipcRenderer.on(
-      ChatChannel.OpenRoom,
-      (event: IpcRendererEvent, roomSeq: string) => {
-        this.chatOpenRoomSubject.next(roomSeq);
-      }
-    );
+    this.ipcRenderer.on(ChatChannel.OpenRoom, (event: any, roomSeq: string) => {
+      this.chatOpenRoomSubject.next(roomSeq);
+    });
    return this.chatOpenRoom$;
  }

@ -178,5 +183,14 @@ export class ElectronNativeService implements NativeService {
    return new TranslateLoaderService(this, prefix, suffix);
  }

-  constructor() {}
+  get isElectron() {
+    return window && (window as any).process && (window as any).process.type;
+  }
+
+  constructor() {
+    if (this.isElectron) {
+      this.ipcRenderer = (window as any).require('electron').ipcRenderer;
+      this.remote = (window as any).require('electron').remote;
+    }
+  }
 }
--- a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
@ -1,27 +1,27 @@
 export enum ChatChannel {
-  OpenRoom = 'UCAP::chat::openRoom'
+  OpenRoom = 'UCAP::chat::openRoom',
 }

 export enum NotificationChannel {
  Notify = 'UCAP::notification::notify',
-  CloseAllNotify = 'UCAP::notification::closeAllNotify'
+  CloseAllNotify = 'UCAP::notification::closeAllNotify',
 }

 export enum UpdaterChannel {
-  Check = 'UCAP::updater::check'
+  Check = 'UCAP::updater::check',
 }

 export enum FileChannel {
  ShowImageViewer = 'UCAP::file::showImageViewer',
  SaveFile = 'UCAP::file::saveFile',
-  ReadFile = 'UCAP::file::readFile'
+  ReadFile = 'UCAP::file::readFile',
 }

 export enum WindowStateChannel {
-  Changed = 'UCAP::windowState::windowStateChanged'
+  Changed = 'UCAP::windowState::windowStateChanged',
 }

 export enum IdleStateChannel {
  Changed = 'UCAP::idleState::changed',
-  StartCheck = 'UCAP::idleState::startCheck'
+  StartCheck = 'UCAP::idleState::startCheck',
 }
--- a/projects/ucap-webmessenger-native-electron/src/lib/ucap-electron-native.module.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/ucap-electron-native.module.ts
@ -1,19 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ElectronNativeService } from './services/electron-native.service';
-
-const SERVICES = [ElectronNativeService];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: []
-})
-export class UCapElectronNativeModule {
-  public static forRoot(): ModuleWithProviders<UCapElectronNativeModule> {
-    return {
-      ngModule: UCapElectronNativeModule,
-      providers: [...SERVICES]
-    };
-  }
-}
--- a/projects/ucap-webmessenger-native-electron/src/public-api.ts
+++ b/projects/ucap-webmessenger-native-electron/src/public-api.ts
@ -7,5 +7,3 @@ export * from './lib/services/electron-native.service';
 export * from './lib/translate/electron-loader';

 export * from './lib/types/channel.type';
-
-export * from './lib/ucap-electron-native.module';
--- a/projects/ucap-webmessenger-native/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-native/src/lib/config/module-config.ts
@ -0,0 +1,4 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+// tslint:disable-next-line: no-empty-interface
+export interface ModuleConfig extends CoreModuleConfig {}
--- a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@ -5,27 +5,34 @@ import { WindowIdle } from '../types/window-idle.type';
 import { NotificationRequest } from '../models/notification';
 import { TranslateLoader } from '@ngx-translate/core';

-export interface NativeService {
-  postAppInit(): void;
+export abstract class NativeService {
+  abstract postAppInit(): void;

-  notify(noti: NotificationRequest): void;
-  closeAllNotify(): void;
+  abstract notify(noti: NotificationRequest): void;
+  abstract closeAllNotify(): void;

-  checkForUpdates(): Observable<boolean>;
+  abstract checkForUpdates(): Observable<boolean>;

-  showImageViewer(): void;
+  abstract showImageViewer(): void;

-  saveFile(buffer: Buffer, fileName: string, path?: string): Observable<string>;
-  readFile(path: string): Observable<Buffer>;
+  abstract saveFile(
+    buffer: Buffer,
+    fileName: string,
+    path?: string
+  ): Observable<string>;
+  abstract readFile(path: string): Observable<Buffer>;

-  windowStateChanged(): Observable<WindowState>;
-  windowClose(): void;
-  windowMinimize(): void;
-  windowMaximize(): void;
+  abstract windowStateChanged(): Observable<WindowState>;
+  abstract windowClose(): void;
+  abstract windowMinimize(): void;
+  abstract windowMaximize(): void;

-  idleStateChanged(): Observable<WindowIdle>;
+  abstract idleStateChanged(): Observable<WindowIdle>;

-  chatOpenRoom(): Observable<string>;
+  abstract chatOpenRoom(): Observable<string>;

-  getTranslateLoader(prefix?: string, suffix?: string): TranslateLoader;
+  abstract getTranslateLoader(
+    prefix?: string,
+    suffix?: string
+  ): TranslateLoader;
 }
--- a/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
+++ b/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-
-@NgModule({
-  imports: [],
-  exports: [],
-  declarations: []
-})
-export class UCapNativeModule {}
--- a/projects/ucap-webmessenger-native/src/public-api.ts
+++ b/projects/ucap-webmessenger-native/src/public-api.ts
@ -2,12 +2,13 @@
 * Public API Surface of ucap-webmessenger-native
 */

+export * from './lib/types/token';
+
 export * from './lib/models/notification';

 export * from './lib/services/native.service';

-export * from './lib/types/token';
 export * from './lib/types/window-state.type';
 export * from './lib/types/window-idle.type';

-export * from './lib/ucap-native.module';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-pi/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/config/module-config.ts
@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
--- a/projects/ucap-webmessenger-pi/src/lib/config/token.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/config/token.ts
@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';

 export const _MODULE_CONFIG = new InjectionToken(
-  '@ucap-webmessenger/api-public config of module'
+  '@ucap-webmessenger/pi config of module'
 );
--- a/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
@ -1,4 +1,4 @@
-export interface PiUrls {
+export interface Urls {
  login2: string;
  userTermsAction: string;
  passwordInitStep1: string;
@ -18,7 +18,3 @@ export interface PiUrls {
  scheduleRetrieveScheduleList: string;
  userScreenCapture: string;
 }
-
-export interface ModuleConfig {
-  urls: PiUrls;
-}
--- a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
@ -4,13 +4,11 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';

-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig, PiUrls } from '../types/module-config';
 import {
  Login2Request,
  Login2Response,
  encodeLogin2,
-  decodeLogin2
+  decodeLogin2,
 } from '../apis/login2';
 import { PrivacyTotalRequest, encodePrivacyTotal } from '../apis/privacy-total';
 import { UrlUtil, Parameter } from '@ucap-webmessenger/api';
@ -18,25 +16,37 @@ import {
  UserTermsActionRequest,
  UserTermsActionResponse,
  encodeUserTermsAction,
-  decodeUserTermsAction
+  decodeUserTermsAction,
 } from '../apis/user-terms-action';

+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PiService {
+  readonly urls: Urls;
+
  constructor(
    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
    private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }

  public login2(req: Login2Request): Observable<Login2Response> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.login2,
+        this.urls.login2,
        {},
        {
-          params: encodeLogin2(req)
+          params: encodeLogin2(req),
        }
      )
      .pipe(map(res => decodeLogin2(res)));
@ -47,10 +57,10 @@ export class PiService {
  ): Observable<UserTermsActionResponse> {
    return this.httpClient
      .post<any>(
-        this.moduleConfig.urls.userTermsAction,
+        this.urls.userTermsAction,
        {},
        {
-          params: encodeUserTermsAction(req)
+          params: encodeUserTermsAction(req),
        }
      )
      .pipe(map(res => decodeUserTermsAction(res)));
@ -61,12 +71,8 @@ export class PiService {
   */
  public privacyTotalUrl(req: PrivacyTotalRequest): string {
    return UrlUtil.format(
-      this.moduleConfig.urls.policyTotal,
+      this.urls.policyTotal,
      encodePrivacyTotal(req) as Parameter
    );
  }
-
-  public get urls(): PiUrls {
-    return this.moduleConfig.urls;
-  }
 }
--- a/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';

 import { PiService } from './services/pi.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';

 const SERVICES = [PiService];

@NgModule({
  declarations: [],
  imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapPiModule {
  public static forRoot(
@ -17,7 +18,7 @@ export class UCapPiModule {
  ): ModuleWithProviders<UCapPiModule> {
    return {
      ngModule: UCapPiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-pi/src/public-api.ts
+++ b/projects/ucap-webmessenger-pi/src/public-api.ts
@ -2,8 +2,6 @@
 * Public API Surface of ucap-webmessenger-pi
 */

-export * from './lib/types/module-config';
-
 export * from './lib/apis/pi';
 export * from './lib/apis/login2';
 export * from './lib/apis/privacy-total';
@ -14,3 +12,6 @@ export * from './lib/types/response-status.type';
 export * from './lib/services/pi.service';

 export * from './lib/ucap-pi.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-protocol/src/lib/config/module-config.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/config/module-config.ts
@ -0,0 +1,13 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {
+  reconnect: {
+    delay: number;
+  };
+  requestId: {
+    min: number;
+    max: number;
+  };
+}
--- a/projects/ucap-webmessenger-protocol/src/lib/config/token.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/config/token.ts
--- a/projects/ucap-webmessenger-protocol/src/lib/config/urls.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/config/urls.ts
@ -0,0 +1,3 @@
+export interface Urls {
+  base: string;
+}
--- a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
@ -5,24 +5,27 @@ import { share, switchMap, retryWhen, delay, finalize } from 'rxjs/operators';

 import { QueueingSubject } from 'queueing-subject';

+import { NGXLogger } from 'ngx-logger';
+
 import {
  makeWebSocketObservable,
  GetWebSocketResponses,
-  NormalClosureMessage
+  NormalClosureMessage,
 } from '@ucap-webmessenger/web-socket';

-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import { PacketBody } from '../protocols/packet';
 import {
  PacketBodyValueDivider,
-  PacketBodyDivider
+  PacketBodyDivider,
 } from '../types/packet-body-divider';
 import { PacketBodyValue } from '../types/packet-body-value.type';
 import { SSVC_TYPE_ERROR_RES, ServerErrorCode } from '../types/service';
 import { ProtocolMessage } from '../protocols/protocol';

-import { NGXLogger } from 'ngx-logger';
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';

 interface RequestState {
  subject: Subject<ProtocolMessage>;
@ -34,9 +37,11 @@ interface RequestState {
 }

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ProtocolService {
+  readonly urls: Urls;
+
  // tslint:disable-next-line: variable-name
  private _requestId: number | null = null;
  private readonly pendingRequests: Map<number, RequestState>;
@ -51,6 +56,10 @@ export class ProtocolService {
    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
    private logger: NGXLogger
  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
    this.pendingRequests = new Map();
    this.input$ = new QueueingSubject<string>();
    this.serverMessageSubject = new Subject();
@ -63,7 +72,7 @@ export class ProtocolService {
    return new Observable<void>(subscriber => {
      try {
        this.socket$ = makeWebSocketObservable(
-          `${this.moduleConfig.urls.base}${serverIp ? serverIp : ''}`
+          `${this.urls.base}${serverIp ? serverIp : ''}`
        );
        this.messages$ = this.socket$.pipe(
          switchMap(getResponses => {
@ -177,7 +186,7 @@ export class ProtocolService {

      packet = this.encodePacket(serviceType, subServiceType, [
        ...bodyList,
-        { type: PacketBodyValue.RequestId, value: requestId }
+        { type: PacketBodyValue.RequestId, value: requestId },
      ]);

      responseSubject = new Subject<ProtocolMessage>().pipe(
@ -194,7 +203,7 @@ export class ProtocolService {

      this.pendingRequests.set(requestId, {
        subject: responseSubject,
-        request: { serviceType, subServiceType, bodyList }
+        request: { serviceType, subServiceType, bodyList },
      });
    } else {
      packet = this.encodePacket(serviceType, subServiceType, bodyList);
@ -287,8 +296,8 @@ export class ProtocolService {
        serviceType,
        subServiceType,
        senderSeq,
-        bodyList
-      }
+        bodyList,
+      },
    };
  }

--- a/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
@ -1,12 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    base: string;
-  };
-  reconnect: {
-    delay: number;
-  };
-  requestId: {
-    min: number;
-    max: number;
-  };
-}
--- a/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
@ -1,15 +1,15 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';

 import { ProtocolService } from './services/protocol.service';
-import { ModuleConfig } from './types/module-config';
-import { _MODULE_CONFIG } from './types/token';
+import { ModuleConfig } from './config/module-config';
+import { _MODULE_CONFIG } from './config/token';

 const SERVICES = [ProtocolService];

@NgModule({
  declarations: [],
  imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapProtocolModule {
  public static forRoot(
@ -17,7 +17,7 @@ export class UCapProtocolModule {
  ): ModuleWithProviders<UCapProtocolModule> {
    return {
      ngModule: UCapProtocolModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
    };
  }
 }
--- a/projects/ucap-webmessenger-protocol/src/public-api.ts
+++ b/projects/ucap-webmessenger-protocol/src/public-api.ts
@ -7,9 +7,11 @@ export * from './lib/protocols/protocol';

 export * from './lib/services/protocol.service';

-export * from './lib/types/module-config';
 export * from './lib/types/packet-body-divider';
 export * from './lib/types/packet-body-value.type';
 export * from './lib/types/service';

 export * from './lib/ucap-protocol.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@ -9,7 +9,7 @@
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickConfirm(false)" class="mat-primary">
+    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
      Confirm
    </button>
  </mat-card-actions>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -15,7 +15,6 @@
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
-      "@app/*": ["projects/ucap-webmessenger-app/src/app/*"],
      "@ucap-webmessenger/core": [
        "projects/ucap-webmessenger-core/src/public-api"
      ],
@ -126,6 +125,8 @@
      "@ucap-webmessenger/util": [
        "projects/ucap-webmessenger-util/src/public-api"
      ],
+      "@app/*": ["projects/ucap-webmessenger-app/src/app/*"],
+
      "@ucap-webmessenger/electron-core": [
        "electron-projects/ucap-webmessenger-electron-core/src/public-api"
      ],