Can not load component in Angular?

Question

I get an error when page is loaded:

compiler.es5.js:1690 Uncaught Error: Type LoginComponent is part of the declarations of 2 modules: LoginModule and AppModule! Please
consider moving LoginComponent to a higher module that imports LoginModule and AppModule. You can also create a new NgModule that exports and includes LoginComponent then import that NgModule in LoginModule and AppModule.

In @NgModule I have the following declaration:

declarations: [AppComponent, LoginComponent, LanguageComponent]

How to fix this?

In the top of file app.module I have import:

import { LanguageComponent } from './language/language.component';
import  { LoginComponent } from "./login/login.component";

Below in section:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TranslateModule.forRoot(),
    NgbModule.forRoot(),
    CoreModule,
    SharedModule,
    HomeModule,
    AboutModule,
    LoginModule,
    AppRoutingModule,
    InMemoryWebApiModule,
    LocalStorageModule,
    ReactiveFormsModule,
    ReCaptchaModule,
    TextMaskModule,
    MdButtonModule,
    MdCheckboxModule
  ],

  declarations: [AppComponent, LoginComponent, LanguageComponent],
  providers: [
    AuthenticationService,
    HiderPipe,
    TimerService
  ],
  bootstrap: [AppComponent]
})

Seems straightforward, remove LoginComponent from the declarations in AppModule as it is already part of the LoginModule. — Faisal
It clearly states that LoginComponent is declared in 2 modules. I assume that the component will only be used in the LoginModule so it doesn't make sense declaring it in the AppModule. Remove it from there. — Alex Florin

Jameel Moideen Jameel Moideen · Accepted Answer · 2017-08-04T14:49:41

When you want to use a Component to another module you have to do the following things. Let's assume Login component is in LoginModule , In order to use this component outside of the module declare and export the component. If you are not export the component, you couldn't use component outside of the UserModule

@NgModule({
  imports:[RouterModule,BrowserModule,FormsModule],
  declarations:[LoginComponent],
  exports: [LoginComponent],
})
export class LoginModule {

 }

and then you no need to again declare the LoginComponent in to the App module. Just Import the LoginModule where LoginComponent resides.

 @NgModule({
      imports:[RouterModule,BrowserModule,FormsModule,LoginModule],
      declarations:[],
      exports: [],
    })
    export class AppModule {

     }

Can not load component in Angular?

2 Answers