Error shown when I inspected the page:

```
Uncaught Error: Template parse errors:
'registration' is not a known element:
1. If 'registration' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

```

At first, I generated 'name' component using angular cli:

```
ng g c name

```

It was successfully generated and registered to `app-module.ts`:

```
PS C:\Users\prtkh\Desktop\hello-world> ng g c name
CREATE src/app/name/name.component.html (31 bytes)
CREATE src/app/name/name.component.spec.ts (670 bytes)
CREATE src/app/name/name.component.ts (293 bytes)
CREATE src/app/name/name.component.css (0 bytes)
UPDATE src/app/name.module.ts (654 bytes)

```

I checked name.component.ts:

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

@Component({
  selector: 'app-registration',
  templateUrl: './name.component.html',
  styleUrls: ['./name.component.css']
})
export class NameComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

```

And name.component.spec.ts:

```
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NameComponent } from './name.component';

describe('NameComponent', () => {
  let component: NameComponent;
  let fixture: ComponentFixture<NameComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NameComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NameComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

```

Noticed that my **angular's version** is **6.0.7** and **angular-cli's** is **6.0.8**.

In my **app-component.html**

```
     <h1>Angular</h1>
   <name></name>

```

In my **app-module.ts**, the `name` component is in `declaration` and `export`:

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NameComponent } from './name/name.component';

@NgModule({
  declarations: [
    AppComponent,
    NameComponent
  ],
  exports: [
    NameComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 

}

```

I am beginner to Angular, so I thought problem would not happen because I used shorthand command in `Angular-CLI` to generate all boilerplate code for a component.