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
– FAISAL, Commented Aug 4, 2017 at 14:29
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
– Alex Florin, Commented Aug 4, 2017 at 14:29

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

1

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 {

     }

answered Aug 4, 2017 at 14:49

Jameel Moideen

8,01913 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FAISAL Over a year ago

I said the same, and his response was "I added here, without them is not working too" :D :D

Raymond Sicard · Accepted Answer · 2017-08-05 02:05:41Z

0

Doubled import of loginModuel.
you have to remove loginModuel in imports: []

answered Aug 5, 2017 at 2:05

Raymond Sicard

1223 bronze badges

Collectives™ on Stack Overflow

Can not load component in Angular?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related