[Update] 删掉没用的组件

src/app/elements/elements.component.ts

@@ -10,8 +10,6 @@ import {ElementPopupComponent} from './popup/popup.component';
 import {ElementRdpComponent} from './rdp/rdp.component';
 import {ElementServerMenuComponent} from './server-menu/server-menu.component';
 import {ElementIframeComponent} from './iframe/iframe.component';
-import {ElementElfinderComponent} from './elfinder/elfinder.component';
-import {ElementSettingsComponent} from './settings/settings.component';
 import {ElementDialogAlertComponent} from './dialog/dialog.service';
 import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
 import {AssetTreeDialogComponent, ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
@@ -28,8 +26,6 @@ export const ElementComponents = [
   ElementRdpComponent,
   ElementServerMenuComponent,
   ElementIframeComponent,
-  ElementElfinderComponent,
-  ElementSettingsComponent,
   ElementDialogAlertComponent,
   ElementGuacamoleComponent,
   ElementAssetTreeComponent,

src/app/elements/elfinder/elfinder.component.html

-<div id="elfinder"></div>

src/app/elements/elfinder/elfinder.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ElementElfinderComponent } from './elfinder.component';
-
-describe('ElementElfinderComponent', () => {
-  let component: ElementElfinderComponent;
-  let fixture: ComponentFixture<ElementElfinderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ElementElfinderComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ElementElfinderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/elements/elfinder/elfinder.component.ts

-import {Component, OnInit} from '@angular/core';
-// import * as elfinder from 'elfinder/js/elfinder.min.js';
-
-@Component({
-  selector: 'elements-elfinder',
-  templateUrl: './elfinder.component.html',
-  styleUrls: ['./elfinder.component.scss']
-})
-export class ElementElfinderComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit() {
-    // elfinder(document.getElementById('elfinder'), {});
-  }
-
-}

src/app/elements/settings/settings.component.html

-<p>
-  settings works!
-</p>

src/app/elements/settings/settings.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ElementSettingsComponent } from './settings.component';
-
-describe('ElementSettingsComponent', () => {
-  let component: ElementSettingsComponent;
-  let fixture: ComponentFixture<ElementSettingsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ElementSettingsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ElementSettingsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/elements/settings/settings.component.ts

-import {Component, Input, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'elements-settings',
-  templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss']
-})
-export class ElementSettingsComponent implements OnInit {
-  @Input() index: number;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/elements/term/term.component.ts

 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ElementRef} from '@angular/core';
-import {term, TermWS} from '../../globals';
-import * as Terminal from 'xterm/dist/xterm';
+import {term, Terminal, TermWS} from '../../globals';
 // import { Terminal } from 'xterm';
 import {NavList} from '../../pages/control/control/control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
@@ -32,7 +31,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {
     this.secret = this._uuid.gen();
-    this.term = new Terminal({
+    this.term = Terminal({
       cols: 80,
       rows: 24,
       useStyle: true,

src/app/globals.ts

 'use strict';
-import * as Terminal from 'xterm/dist/xterm';
+import * as terminal from 'xterm/dist/xterm';
 import * as io from 'socket.io-client';
 
-// export function Terminal(xargs: any) {
-//   return terminal(xargs);
-// }
+export function Terminal(xargs: any) {
+  return terminal(xargs);
+}
 
 export const TermWS = io.connect('/ssh');
 export let term: {

src/app/pages/replay/json/json.component.ts

 import {Component, Input, OnInit} from '@angular/core';
-import {Video, term} from '../../../globals';
+import {term} from '../../../globals';
 import {HttpService, LogService} from '../../../app.service';
+import {Video} from '../replay.model';
 
 @Component({
   selector: 'app-replay-json',
@@ -18,21 +19,23 @@ export class JsonComponent implements OnInit {
   pos = 0;
   scrubber: number;
 
+  @Input() video: Video;
+
   constructor(private _http: HttpService,
               private _logger: LogService) {
   }
 
   ngOnInit() {
-    if (Video.src !== 'READY') {
-      this._http.get_replay_data(Video.src)
+    if (this.video.src !== 'READY') {
+      this._http.get_replay_data(this.video.src)
         .subscribe(
           data => {
-            Video.json = data;
-            Video.timelist = Object.keys(Video.json).map(Number);
-            Video.timelist = Video.timelist.sort(function (a, b) {
+            this.video.json = data;
+            this.video.timelist = Object.keys(this.video.json).map(Number);
+            this.video.timelist = this.video.timelist.sort(function (a, b) {
               return a - b;
             });
-            Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
+            this.video.totalTime = this.video.timelist[this.video.timelist.length - 1] * 1000;
           },
           err => {
             alert('无法下载');
@@ -85,26 +88,26 @@ export class JsonComponent implements OnInit {
   }
 
   advance(that) {
-    that.scrubber = Math.ceil((that.time / Video.totalTime) * 100);
+    that.scrubber = Math.ceil((that.time / this.video.totalTime) * 100);
     // document.getElementById('beforeScrubberText').innerHTML = this.buildTimeString(this.time);
-    for (; that.pos < Video.timelist.length; that.pos++) {
-      if (Video.timelist[that.pos] * 1000 <= that.time) {
-        term.term.write(Video.json[Video.timelist[that.pos].toString()]);
+    for (; that.pos < this.video.timelist.length; that.pos++) {
+      if (this.video.timelist[that.pos] * 1000 <= that.time) {
+        term.term.write(this.video.json[this.video.timelist[that.pos].toString()]);
       } else {
         break;
       }
     }
 
-    if (that.pos >= Video.timelist.length) {
+    if (that.pos >= this.video.timelist.length) {
       this.toggle = !this.toggle;
       clearInterval(that.timer);
     }
-    if (Video.timelist[that.pos] - Video.timelist[that.pos - 1] > 5) {
+    if (this.video.timelist[that.pos] - this.video.timelist[that.pos - 1] > 5) {
       that.time += 5000;
     }
 
     that.time += that.TIMESTEP;
-    that.setPercent = that.time / Video.totalTime * 100;
+    that.setPercent = that.time / this.video.totalTime * 100;
   }
 
   stop() {
@@ -116,14 +119,14 @@ export class JsonComponent implements OnInit {
     this.pos = 0;
     term.term.reset();
     this.toggle = false;
-    for (; this.pos < Video.timelist.length; this.pos++) {
-      if (Video.timelist[this.pos] * 1000 <= this.setPercent / 100 * Video.totalTime) {
-        term.term.write(Video.json[Video.timelist[this.pos].toString()]);
+    for (; this.pos < this.video.timelist.length; this.pos++) {
+      if (this.video.timelist[this.pos] * 1000 <= this.setPercent / 100 * this.video.totalTime) {
+        term.term.write(this.video.json[this.video.timelist[this.pos].toString()]);
       } else {
         break;
       }
     }
-    this.time = Video.totalTime * this.setPercent / 100;
+    this.time = this.video.totalTime * this.setPercent / 100;
   }
 
 }

src/app/pages/replay/mp4/mp4.component.html

-<div [ngStyle]="{'width.px': Video.width,'height.px':Video.height}">
+<div [ngStyle]="{'width.px': video.width,'height.px':video.height}">
   <video controls>
-    <source [src]="Video.src" type="video/mp4">
+    <source [src]="video.src" type="video/mp4">
     Your browser does not support the video tag.
     <br>
     您的浏览器不支持，请升级

src/app/pages/replay/mp4/mp4.component.ts

 import {Component, Input, OnInit} from '@angular/core';
-import {Video} from '../../../globals';
+import {Video} from '../replay.model';
 
 @Component({
   selector: 'app-replay-mp4',
@@ -7,17 +7,16 @@ import {Video} from '../../../globals';
   styleUrls: ['./mp4.component.css']
 })
 export class Mp4Component implements OnInit {
-  Video = Video;
-
+  @Input() video: Video;
   constructor() {
   }
 
   ngOnInit() {
-    if (this.Video.height === 0) {
-      this.Video.height = 600;
+    if (this.video.height === 0) {
+      this.video.height = 600;
     }
-    if (this.Video.width === 0) {
-      this.Video.width = 800;
+    if (this.video.width === 0) {
+      this.video.width = 800;
     }
 
   }

src/app/pages/replay/replay.component.html

-<app-replay-json *ngIf="Video.type=='json'"></app-replay-json>
-<app-replay-mp4 *ngIf="Video.type=='mp4'"></app-replay-mp4>
+<app-replay-json [video]="video" *ngIf="video.type=='json'"></app-replay-json>
+<app-replay-mp4 [video]="video" *ngIf="video.type=='mp4'"></app-replay-mp4>

src/app/pages/replay/replay.component.ts

 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
 import {HttpService, LogService} from '../../app.service';
-import {Video, DataStore} from '../../globals';
+import {DataStore} from '../../globals';
+import {Video} from './replay.model';
 
 @Component({
   selector: 'pages-replay',
@@ -9,13 +10,13 @@ import {Video, DataStore} from '../../globals';
   styleUrls: ['./replay.component.css']
 })
 export class PagesReplayComponent implements OnInit {
+  video: Video;
 
   constructor(private activatedRoute: ActivatedRoute,
               private _http: HttpService,
               private _logger: LogService) {
     // this.video = {'type': 'none'};
     DataStore.NavShow = false;
-
   }
 
   ngOnInit() {
@@ -23,36 +24,36 @@ export class PagesReplayComponent implements OnInit {
     this.activatedRoute.params.subscribe((params: Params) => {
       token = params['token'];
     });
-    this._http.get_replay_json(token)
-      .subscribe(
-        data => {
-          Video.type = data['type'];
-          Video.src = data['src'];
-          Video.id = data['id'];
-          // Video.width = data['width'];
-          // Video.height = data['height'];
-        },
-        err => {
-          this._http.get_replay(token)
-            .subscribe(
-              data => {
-                Video.type = 'json';
-                Video.json = data;
-                Video.src = 'READY';
-                Video.timelist = Object.keys(Video.json).map(Number);
-                Video.timelist = Video.timelist.sort(function (a, b) {
-                  return a - b;
-                });
-                Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
-
-              }, err2 => {
-                alert('无法下载');
-                this._logger.error(err2);
-              },
-            );
-
-        }
-      );
+    // this._http.get_replay_json(token)
+    //   .subscribe(
+    //     data => {
+    //       Video.type = data['type'];
+    //       Video.src = data['src'];
+    //       Video.id = data['id'];
+    //       // Video.width = data['width'];
+    //       // Video.height = data['height'];
+    //     },
+    //     err => {
+    //       this._http.get_replay(token)
+    //         .subscribe(
+    //           data => {
+    //             Video.type = 'json';
+    //             Video.json = data;
+    //             Video.src = 'READY';
+    //             Video.timelist = Object.keys(Video.json).map(Number);
+    //             Video.timelist = Video.timelist.sort(function (a, b) {
+    //               return a - b;
+    //             });
+    //             Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
+    //
+    //           }, err2 => {
+    //             alert('无法下载');
+    //             this._logger.error(err2);
+    //           },
+    //         );
+    //
+    //     }
+    //   );
 
   }
 }

src/app/pages/replay/replay.model.ts

+
+export class Video {
+  id: string;
+  src: string;
+  type: string;
+  height: number;
+  width: number;
+  json: object;
+  timelist: Array<number>;
+  totalTime: number;
+}

src/app/pages/setting/basic/basic.component.html

-<div class="basic-form">
-  <br/>
-  <mat-form-field hintLabel="http://jumpserver.abc.com:8080">
-    <input matInput #input maxlength="10" placeholder="{{'Current SITE URL'|trans}}">
-  </mat-form-field>
-  <br/>
-  <mat-form-field hintLabel="{{'User first login update profile done redirect to it'|trans}}">
-    <input matInput #input maxlength="10" placeholder="{{'User Guide URL'|trans}}">
-  </mat-form-field>
-  <br/>
-  <mat-form-field hintLabel="">
-    <input matInput #input maxlength="10" placeholder="{{'Email Subject Prefix'|trans}}">
-  </mat-form-field>
-  <br/>
-  <div class="button-row">
-    <button mat-raised-button>{{ 'Reset' | trans }}</button>
-    <button mat-raised-button color="primary">{{ 'Submit' | trans }}</button>
-  </div>
-  <br/>
-</div>

src/app/pages/setting/basic/basic.component.scss

-.basic-form {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  max-width: 400px;
-  margin: auto;
-  font-size: 14pt;
-}
-
-.basic-form > * {
-  width: 100%;
-}

src/app/pages/setting/basic/basic.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingPageBasicComponent } from './basic.component';
-
-describe('SettingPageBasicComponent', () => {
-  let component: SettingPageBasicComponent;
-  let fixture: ComponentFixture<SettingPageBasicComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingPageBasicComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageBasicComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/basic/basic.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-sp-basic',
-  templateUrl: './basic.component.html',
-  styleUrls: ['./basic.component.scss']
-})
-export class SettingPageBasicComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/setting/email/email.component.html

-<div class="email-form">
-  <mat-form-field hintLabel="">
-    <input matInput #input maxlength="10" placeholder="{{'SMTP host'|trans}}">
-  </mat-form-field>
-  <mat-form-field hintLabel="">
-    <input matInput #input maxlength="10" placeholder="{{'SMTP port'|trans}}">
-  </mat-form-field>
-  <mat-form-field hintLabel="">
-    <input matInput #input maxlength="10"
-           [formControl]="emailFormControl"
-           [errorStateMatcher]="matcher"
-           placeholder="{{'SMTP user'|trans}}">
-    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
-      {{'Please enter a valid email address'|trans}}
-    </mat-error>
-    <mat-error *ngIf="emailFormControl.hasError('required')">
-      <strong>{{'Email is required'|trans}}</strong>
-    </mat-error>
-  </mat-form-field>
-  <mat-form-field hintLabel="{{'Some provider use token except password'|trans}}">
-    <input matInput #input maxlength="10"
-           [type]="hide ? 'password' : 'text'"
-           placeholder="{{'SMTP password'|trans}}">
-    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
-
-  </mat-form-field>
-  <mat-form-field
-    [hideRequiredMarker]="options.value.hideRequired"
-    [floatLabel]="options.value.floatLabel">
-    <mat-select required>
-      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
-      <mat-option value="no">{{'No'|trans}}</mat-option>
-    </mat-select>
-    <mat-placeholder>
-      <b>{{'Use SSL'|trans}}</b>
-    </mat-placeholder>
-    <mat-hint>{{'If SMTP port is 465, may be select'|trans}}</mat-hint>
-  </mat-form-field>
-  <mat-form-field
-    [hideRequiredMarker]="options.value.hideRequired"
-    [floatLabel]="options.value.floatLabel">
-    <mat-select required>
-      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
-      <mat-option value="no">{{'No'|trans}}</mat-option>
-    </mat-select>
-    <mat-placeholder>
-      <b>{{'Use TLS'|trans}}</b>
-    </mat-placeholder>
-    <mat-hint>{{'If SMTP port is 587, may be select'|trans}}</mat-hint>
-  </mat-form-field>
-  <br>
-  <div class="button-row">
-    <button mat-raised-button>{{ 'Test connection' | trans }}</button>
-    <button mat-raised-button>{{ 'Reset' | trans }}</button>
-    <button mat-raised-button color="primary">{{ 'Submit' | trans }}</button>
-  </div>
-  <br/>
-</div>

src/app/pages/setting/email/email.component.scss

-.email-form {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  max-width: 400px;
-  margin: auto;
-  font-size: 14pt;
-}
-
-.email-form > * {
-  width: 100%;
-}

src/app/pages/setting/email/email.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingPageEmailComponent } from './email.component';
-
-describe('SettingPageEmailComponent', () => {
-  let component: SettingPageEmailComponent;
-  let fixture: ComponentFixture<SettingPageEmailComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingPageEmailComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageEmailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/email/email.component.ts

-import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
-import {ErrorStateMatcher} from '@angular/material/core';
-
-/** Error when invalid control is dirty, touched, or submitted. */
-export class MyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const isSubmitted = form && form.submitted;
-    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
-  }
-}
-
-@Component({
-  selector: 'app-sp-email',
-  templateUrl: './email.component.html',
-  styleUrls: ['./email.component.scss']
-})
-export class SettingPageEmailComponent implements OnInit {
-
-  emailFormControl = new FormControl('', [
-    Validators.required,
-    Validators.email,
-  ]);
-
-  matcher = new MyErrorStateMatcher();
-  hide = true;
-  options: FormGroup;
-
-  constructor(fb: FormBuilder) {
-    this.options = fb.group({
-      hideRequired: false,
-      floatLabel: 'auto',
-    });
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/setting/ldap/ldap.component.html

-<p>
-  ldap works!
-</p>

src/app/pages/setting/ldap/ldap.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingPageLdapComponent } from './ldap.component';
-
-describe('SettingPageLdapComponent', () => {
-  let component: SettingPageLdapComponent;
-  let fixture: ComponentFixture<SettingPageLdapComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingPageLdapComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageLdapComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/ldap/ldap.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-sp-ldap',
-  templateUrl: './ldap.component.html',
-  styleUrls: ['./ldap.component.scss']
-})
-export class SettingPageLdapComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/setting/s3/s3.component.html

-<p>
-  s3 works!
-</p>

src/app/pages/setting/s3/s3.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingPageS3Component } from './s3.component';
-
-describe('SettingPageS3Component', () => {
-  let component: SettingPageS3Component;
-  let fixture: ComponentFixture<SettingPageS3Component>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingPageS3Component ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageS3Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/s3/s3.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-sp-s3',
-  templateUrl: './s3.component.html',
-  styleUrls: ['./s3.component.scss']
-})
-export class SettingPageS3Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/setting/setting.component.html

-<div class="pace-done">
-  <elements-leftbar></elements-leftbar>
-  <mat-card class="content">
-    <mat-tab-group>
-      <mat-tab label="{{'Basic setting'|trans}}">
-        <app-sp-basic></app-sp-basic>
-      </mat-tab>
-      <mat-tab label="{{'Email setting'|trans}}">
-        <app-sp-email></app-sp-email>
-      </mat-tab>
-      <mat-tab label="{{'LDAP setting'|trans}}">
-        <app-sp-ldap></app-sp-ldap>
-      </mat-tab>
-      <mat-tab label="{{'Terminal setting'|trans}}">
-        <app-sp-terminal></app-sp-terminal>
-      </mat-tab>
-    </mat-tab-group>
-  </mat-card>
-  <elements-ofooter></elements-ofooter>
-</div>

src/app/pages/setting/setting.component.scss

-.pace-done {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-}
-
-.content {
-  margin-left: 220px;
-  height: 100%;
-}

src/app/pages/setting/setting.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PagesSettingComponent } from './setting.component';
-
-describe('SettingPageComponent', () => {
-  let component: PagesSettingComponent;
-  let fixture: ComponentFixture<PagesSettingComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PagesSettingComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PagesSettingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/setting.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'pages-setting',
-  templateUrl: './setting.component.html',
-  styleUrls: ['./setting.component.scss']
-})
-export class PagesSettingComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/setting/settings.module.ts

-import { NgModule } from '@angular/core';
-import { SettingPageS3Component } from './s3/s3.component';
-import { SettingPageTerminalComponent} from './terminal/terminal.component';
-import { SettingPageLdapComponent } from './ldap/ldap.component';
-import { SettingPageEmailComponent } from './email/email.component';
-import { SettingPageBasicComponent } from './basic/basic.component';
-import { PagesSettingComponent } from './setting.component';
-
-@NgModule({
-  imports: [
-  ],
-  declarations: [
-    SettingPageS3Component,
-    SettingPageTerminalComponent,
-    SettingPageLdapComponent,
-    SettingPageEmailComponent,
-    SettingPageBasicComponent,
-    PagesSettingComponent
-  ]
-})
-export class SettingsModule {
-}

src/app/pages/setting/terminal/terminal.component.html

-<p>
-  terminal works!
-</p>

src/app/pages/setting/terminal/terminal.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingPageTerminalComponent } from './terminal.component';
-
-describe('SettingPageTerminalComponent', () => {
-  let component: SettingPageTerminalComponent;
-  let fixture: ComponentFixture<SettingPageTerminalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SettingPageTerminalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageTerminalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/setting/terminal/terminal.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-sp-terminal',
-  templateUrl: './terminal.component.html',
-  styleUrls: ['./terminal.component.scss']
-})
-export class SettingPageTerminalComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}