title: Type "LocationComponent" is part of the declarations of 2 modules:Angular 6?
body: <p>I am completely new to angular, so I cant able to resolve my error using other stack flow answers. Kindly help.</p>
  
  <p>I am using an angular 6. I already have a basic format,so I am trying to add child page. But I got this error <strong>'Type LocationComponent is part of the declarations of 2 modules'</strong> and stuck in this for about 2 days.</p>
  
  <p>Here is the picture of format of My src folder: <a href="https://i.stack.imgur.com/9GYgC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9GYgC.png" alt="My src folder:"></a></p>
  
  <p>My app.module.ts codings as follows:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
  import { NgModule, NgModuleFactory } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { Routes, RouterModule } from '@angular/router';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { LocationComponent } from './masterpage/location/location.component';
  import { StorageComponent } from './masterpage/storage/storage.component';
  @NgModule({
    declarations: [
      AppComponent,
      SpinnerComponent,         
      LocationComponent,
      StorageComponent
    ],
    imports: [
      CommonModule,
      BrowserModule,
      BrowserAnimationsModule,   
      FormsModule,
      HttpClientModule,
      NgbModule.forRoot(),      
      AppRoutingModule,        
    ],
    providers: [
        {
        provide: PERFECT_SCROLLBAR_CONFIG,
        useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
      },{
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My app-routing.module.ts as follows:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  export const routes: Routes = [
  {
      path: '',
      component: FullComponent,
      children: [
          { path: '', redirectTo: '/masterpage/location', pathMatch: 'full' },
          { path: 'masterpage', loadChildren: './masterpage/masterpage.module#MasterPageModule' }, 
      ]
  }];
  @NgModule({
      imports: [RouterModule.forRoot(routes), NgbModule.forRoot()],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>My masterpage.module.ts codes as follows:</p>
  
  <pre><code>import { NgModule,Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Routes, RouterModule } from '@angular/router';
  import { LocationComponent } from './location/location.component';
  import { StorageComponent } from './storage/storage.component';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { MasterPageRoutes } from './masterpage.routing';
  
  @NgModule({
      imports: [
          FormsModule,
          CommonModule,
          NgbModule,
          RouterModule.forChild(MasterPageRoutes)
      ],
      declarations: [
          LocationComponent,
          StorageComponent,
      ]
  })
  export class MasterPageModule { }
  </code></pre>
  
  <p>My masterpage.routing.ts codes are below:</p>
  
  <pre><code>import { Routes } from '@angular/router';
  import { LocationComponent } from './location/location.component';
  import { StorageComponent } from './storage/storage.component';
  
  export const MasterPageRoutes: Routes = [
    {
      path: '',
      children: [
      {
        path: 'location',
        component: LocationComponent,
        data: {
          title: 'Location',
          urls: [{title: 'Location',url: '/location'},{title: 'Location'}]
        }
      }, {
        path: 'storage',
        component: StorageComponent,
        data: {
          title: 'Storage',
          urls: [{title: 'Storage',url: '/storage'},{title: 'Storage'}]
        }
      }
  ]
    }
  ];
  </code></pre>
  
  <p>My Sample previously running with the url <strong>'/localhost:4200/#/dashboard/dashboard1'</strong>-this was the sample. I changed the dashboard as per my request as 'masterpage' and its children 'dashboard1' and 'dashboard2' to 'location' and 'storage' respectively. I want the children pages location and storage must load with the url <strong>'/localhost:4200/#/masterpage/location'</strong>
   But its not working for me. No error in code page. Error I found out in console under inspect elements only.</p>
  
  <p>Kindly help me what is wrong in it.. 
  Thanks in Advance.</p>