Error: Type LoginComponent is part of the declarations of 2 modules: LoginModule and AppModule

Question

I'm using NativeScript to build an app. When I try to run the app preview on my device I get the following error:

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.

I have checked both the files mentioned in the error message and 'LoginComponent only appears in the 'login.module.ts' file.

I am including the code for the files below as I cannot find the source of the problem.

login.module.ts

import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

//import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

//import { LoginRoutingModule } from "./login-routing.module";
import { loginRouting } from "./login.routing"
import { LoginComponent } from "./login.component";

@NgModule({
    imports: [
        //NativeScriptModule,
        //LoginRoutingModule
        NativeScriptFormsModule,
        NativeScriptCommonModule,
        loginRouting
    ],
    declarations: [
        LoginComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class LoginModule { }

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

import { AppRoutingModule, routes, navigatableComponents, authProviders } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { LoginModule } from "../login/login.module";
import { setStatusBarColors, BackendService, LoginService } from "../shared"
import { DatabaseService } from "../database/sqlite.service";

setStatusBarColors();

@NgModule({
    providers: [
        authProviders,
        BackendService,
        LoginService,
        DatabaseService
    ],
    bootstrap: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        NativeScriptModule,
        NativeScriptUISideDrawerModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes),
        NativeScriptUIListViewModule,
        LoginModule
    ],
    declarations: [
        AppComponent,
        ...navigatableComponents
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

EDIT As requested app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { LoginComponent } from "../login/login.component";
import { HomeComponent } from "./home/home.component";
import { CreateNewComponent } from "./create/create.component";
import { UpdateDeleteComponent } from "./update/update.component";
import { ReportComponent } from "./report/report.component";
import { SettingsComponent } from "./settings/settings.component";
import { SearchComponent } from "./search/search.component";

import { AuthGuard } from "./auth-guard.service";

export const routes: Routes = [
    { path: "", component: LoginComponent },
    { path: "login", component: LoginComponent },
    { path: "home", component: HomeComponent },
    { path: "create", component: CreateNewComponent },
    { path: "update", component: UpdateDeleteComponent },
    { path: "report", component: ReportComponent },
    { path: "settings", component: SettingsComponent },
    { path: "search", component: SearchComponent }
    /*{ path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
    { path: "browse", loadChildren: "~/app/browse/browse.module#BrowseModule" },
    { path: "search", loadChildren: "~/app/search/search.module#SearchModule" },
    { path: "featured", loadChildren: "~/app/featured/featured.module#FeaturedModule" },
    { path: "settings", loadChildren: "~/app/settings/settings.module#SettingsModule" }*/
];

export const navigatableComponents = [
    LoginComponent,
    HomeComponent,
    CreateNewComponent,
    UpdateDeleteComponent,
    ReportComponent,
    SettingsComponent,
    SearchComponent
];

 export const authProviders = [
    AuthGuard
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Soo, since it’s in navigatable components, kind of seems like you’re declaring it in 2 modules — bryan60
@TonyNgo, unfortunately I don't have enough reputation to be able to do that yet — Rakoc001

Tony Ngo Tony Ngo · Accepted Answer · 2019-08-16T14:46:09

Seem like you are decleare LoginComponent in both loginRouting and routes so you can consider remove one in either of those 2 route

Error: Type LoginComponent is part of the declarations of 2 modules: LoginModule and AppModule

1 Answers