How to use a module to specify multiple components in Angular 6

Question

I want to use module joke.module.ts to specify multiple components; in this case I start with JokeComponent in joke/joke.module.ts in src/app

import { Component } from '@angular/core';/
@Component({
  selector: 'joke',
  template: `
  <h1>What did the cheese say when it looked in the mirror?</h1>
  <p>Halloumi (hello me)</p>  `
})

export class JokeComponent {
}

In app.component.ts I want to use joke/joke.module.ts and use the tag 'joke'

import { Component } from '@angular/core';
import { JokeModule } from './joke/joke.module';
@Component({
  selector: 'app-root',
  template: `
  <joke></joke>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

I have create module joke.module.ts in src/app/joke

import { NgModule } from '@angular/core';
import { JokeComponent } from './joke.component';
import { AppComponent } from '../app.component';

@NgModule({
  imports:      [ AppComponent ],
  declarations: [
    JokeComponent
  ],
  entryComponents: [JokeComponent]
})
export class JokeModule { }

However, when I run the application I am getting the error Uncaught Error: Template parse errors: 'joke' is not a known element: 1. If 'joke' is an Angular component, then verify that it is part of this module.

you'll need to import the JokeModule into your AppModule

A.Winnen
– A.Winnen

2018-06-01 16:30:06 +00:00
Commented Jun 1, 2018 at 16:30 — A.Winnen
– A.Winnen, Commented Jun 1, 2018 at 16:30
angular.io/guide/feature-modules

Michael Doye
– Michael Doye

2018-06-01 16:41:54 +00:00
Commented Jun 1, 2018 at 16:41 — Michael Doye
– Michael Doye, Commented Jun 1, 2018 at 16:41

Amit Chigadani · Accepted Answer · 2018-06-01 18:11:12Z

2

Your imports and declarations seems to be wrong. Correct them like this :

Import JokeModule inside your AppModule.
Remove entryComponents: [JokeComponent] from JokeModule, instead add it in AppModule as entryComponents: [AppComponent].
Remove imports:[ AppComponent ] from JokeModule
export JokeComponent in JokeModuleas exports : [JokeComponent]

Your bootsrtap component should be AppComponent, rest of the components will be a child components to your app-root component.

Working DEMO

edited Jun 1, 2018 at 18:11

answered Jun 1, 2018 at 18:03

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

Comments

handro1104 · Accepted Answer · 2018-06-02 22:01:29Z

Thank you for your answer. The main problem is that the code I presented was wrong. Initially I have a simple application created with Angular/cli. joke.component.ts in src/app/jokes (I want a separate folder for the functionality)

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

@Component({
  selector: 'joke',
  template: `
  <h1>What did the cheese say when it looked in the mirror?</h1>
  <p>Halloumi (hello me)</p>  `
})

export class JokeComponent {

I use tag 'joke' in app.component.ts as follows

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

@Component({
  selector: 'app-root',
  template: `
  <joke></joke>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

I am not importing joke.component.ts because I have imported and declared it in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
//import { JokeModule } from './jokes/joke.module';
import { JokeComponent } from './jokes/joke.component';
@NgModule({
  declarations: [
    AppComponent, JokeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

What I am seeing is that anything imported and declared in app.module.ts is available to other components (In this case app.component). For a large program with multiple functionality, I want to create components for different functionalities in separate folders. What I don't want is to import every component in app.module.ts; For every functionality I want to create a module like joke.module.ts

import { NgModule } from '@angular/core';
import { JokeComponent } from './joke.component';
@NgModule({
  declarations: [
    JokeComponent
  ],
  exports: [JokeComponent]
})

export class JokeModule { }

In this module I import and declare the components for the functionality and I was hoping that importing and declaring these modules in app.module.ts would work, but It didn't.

If you check the code properly, which I have presented in my DEMO, it does not import JokeComponent inside AppModule. It is simply importing JokeModule. The main problem behind the JokeComponent not accessible inside your AppModule is that you have not exported JokeComponent inside JokeModule. Check step no 4.

Collectives™ on Stack Overflow

How to use a module to specify multiple components in Angular 6

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related