CODEWITHSUNDEEP
angular
handro1104
handro1104

Reputation: 39

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

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.

Upvotes: 2

Views: 5173

Answers (2)

handro1104
handro1104

Reputation: 39

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.

Upvotes: 0

Amit Chigadani
Amit Chigadani

Reputation: 29715

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

  1. Import JokeModule inside your AppModule.

  2. Remove entryComponents: [JokeComponent] from JokeModule, instead add it in AppModule as entryComponents: [AppComponent].

  3. Remove imports:[ AppComponent ] from JokeModule

  4. 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

Upvotes: 2

Related Questions