Angular 5, using a component in a sub-module

Question

I am getting an error I cannot seem to remedy, when I sub-divided my app for lazy loading efficiencies and and using a sub-router for "child",
I need to use a component that is used in the main app.

But I am getting This below error message

Type AccountInfoComponent is part of the declarations of 2 modules

My app structure looks like this

app
|--components
    |--accountInfo
        |--accountInfo.component.ts
    |--user
        |--user.component.ts
|--modules
    |--child
        |--child.component.ts
        |--child.module.ts
        |--child.routing.module.ts
|--app.module.ts
|--app.routing.module.ts

Where AccountInfoComponent is declaired in the main module (it is not imported to the main router, it is called via it's selector...)

So I moved my "child" component into its own module, complete with a router (for children) and lazy loading

My "Child.router" looks like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ChildComponent } from './child.component';
import { ChildProfileComponent } from './child.profile.component';

import { AccountInfoComponent } from '../../components/accountinfo/accountinfo.component';

const childRoutes: Routes = [
    {
        path: '', 
        component: ChildComponent,
        children: [
            {
                path: '',
                component: ChildProfileComponent
            },
            {
                path: 'account',
                component: AccountInfoComponent 
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild( childRoutes )
    ],
    exports: [
        RouterModule
    ]
})
export class ChildRoutingModule {}

The main app.module declairs AccountInfoComponent because it is used in user.component.

I have tried importing AccountInfoComponent into the child router, I have tried exporting it from the main module.

QUESTION: How do I use a component in more than one module? the main app and a nested module?

Answer 1

Indeed you cannot declare a component in more than one module

You can create a shared module that will contain the components that you want to reuse in more than one module.

This shared module in your example could declare and export the AccountInfoComponent, and other components that you'll need to reuse in different modules.

https://angular.io/guide/ngmodule-faq#sharedmodule

You can declare multiple components in your shared module, or you can create one module per component and import them selectively, which is what angular material does (MatButtonModule, MatCheckboxModule, ...)