0

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]
})
12
  • 1
    some more code will definitely help
    – FAISAL
    Commented Aug 4, 2017 at 14:22
  • Components need to also be in the exports of a ngModule.
    – Reactgular
    Commented Aug 4, 2017 at 14:23
  • 1
    and paste entire NgModule
    – wesside
    Commented Aug 4, 2017 at 14:25
  • 2
    Seems straightforward, remove LoginComponent from the declarations in AppModule as it is already part of the LoginModule.
    – FAISAL
    Commented Aug 4, 2017 at 14:29
  • 2
    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. Commented Aug 4, 2017 at 14:29

2 Answers 2

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 {

     }
1
  • I said the same, and his response was "I added here, without them is not working too" :D :D
    – FAISAL
    Commented Aug 5, 2017 at 6:11
0

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.