Angular 2 call child selector from one child module into child module

Question

I have a directory structure of:

|-resources
   |-views
      |-Typescript
         |-App
            |-app.module.ts
            |-app.component.ts
|-Modules
   |-Core
      |-Assets
         |-Typescript
            |-core.module.ts
            |-core.component.ts
   |-Category
      |-Assets
         |-Typescript
            |-category.module.ts
            |-category.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from '../../../../Modules/Core/Assets/Typescript/core.module';
import { CategoryModule } from '../../../../Modules/Category/Assets/Typescript/category.module ';

@NgModule({
    imports: [
        BrowserModule,
        CoreModule,
        CategoryModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `<app-main></app-main>`
})

export class AppComponent {
}

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './core.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}

core.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-main',
    template: `<category></category>`
})

export class CoreComponent {}

category.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CategoryComponent } from './category.component';

@NgModule({
    imports: [ CommonModule ],
    declarations: [ CategoryComponent ],
    exports: [ CategoryComponent ]
})

export class CategoryModule {}

category.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'category',
    template: `This is a category.`
})

export class CategoryComponent {
}

I want to call the category selector on category.component.ts from core.component.ts which is on same level as category i.e. child module of main app.module.

Is it possible to call a component that is not defined in another module by only adding the module to the parent module list?

Edit: I am getting this error:

Unhandled Promise rejection: Template parse errors:
'category' is not a known element:
1. If 'category' is an Angular component, then verify that it is part of this module.

@ranakrunal9 yeah getting the error that `'category' is not a known element` — PaladiN, Nov 29 '16 at 04:56

Pankaj Parkar · Accepted Answer · 2016-11-29T05:06:53.797

As CategoryComponent has been used by CoreModule(which is independant module), it should be included in imports of CoreComponent. Otherwise CoreModule components would not be aware of CategoryModule components.

Code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './core.component';
import { CategoryModule } from 
              '../../../../Modules/Category/Assets/Typescript/category.module ';

@NgModule({
    imports: [
        CommonModule,
        CategoryModule //<-- add here
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}

And CategoryModule isn't going to be used by AppModule then remove it from AppModule imports.

score 1 · Answer 2 · answered Nov 29 '16 at 05:02

1

Update your core.module.ts file to import CategoryModule :

@NgModule({
    imports: [
        CommonModule,
        CategoryModule
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}

answered Nov 29 '16 at 05:02

ranakrunal9

12,159
1
35
42

is there any other method than letting the core know about category ??? Like if it could be known from `app`?? – PaladiN Nov 29 '16 at 05:04
no, there is no other method. you have to import `CategoryModule` inside `CoreModule` or you have to add `CategoryComponent` to declarations of `CoreModule` – ranakrunal9 Nov 29 '16 at 05:09

Angular 2 call child selector from one child module into child module

2 Answers2