Angular5

app.component.ts #angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/form';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ServerComponent } from './server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent // put any new components you made here
  ],
  imports: [
    BrowserModule,
    FormModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

new_component

// add a new component: server
// create a server folder
// add a server.component.ts
// add a server.component.html
// add a server.component.css
// add the component to the app.module file
// then add the component to the app.component.html file

// server.component.ts

import { Component } from '@angular/core';

// add component decorator to enhance element in our code
@Component({
  selector: 'app-server', //needs to be an unique identifier
  templateUrl: './server.component.html',
  
})
export class ServerComponent {
  
}

// or new component onInit

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-servers',
  template: `<app-server></app-server>
             <app-server></app-server>
  `,
  styleUrls: ['./servers.component.css']
})

export class ServersComponent implements OnInit {
  constructor() {
  
  }
  
  ngOnInit() {
  }
}

// app.component.html
<h3>I'm in the component</h3>
<hr>
<app-server></app-server>