CODEWITHSUNDEEP
htmlangulartypescript
physicsboy
physicsboy

Reputation: 6316

How to import a group of components for use as HTML tags - Angular

I am redesigning my app as to be more modular with the UI side of things, separating things out to have:

I have managed to work out how to import a single component into the Angular way of things, importing the component into the app.module.ts and setting it in the declarations area. This way I can simply call from the HTML and have my app header appear!

However I am having difficulty when trying to do a batch of these at once...

I am seeing an error message such as:

Error: Unexpected module 'ComponentExportModule' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

app.module.ts

//More imports are above...
import {ComponentExportModule} from '../UI-Components/component-export.module';
@NgModule({
  imports:      [
    //Imports are here
  ],
  declarations: [
    AppComponent,
    ComponentExportModule
  ],
  providers:[
    //Stuff is here
  ],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

component-export.module.ts

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

import {AppHeaderComponent} from './app-header.component';
import {PageContentComponent} from './page-content.component';
import {SideNavComponent} from './side-nav.component';

@NgModule({
  imports: [
    AppHeaderComponent,
    PageContentComponent,
    SideNavLinkListComponent
  ],
  exports: [
    AppHeaderComponent,
    PageContentComponent,
    SideNavComponent
  ]
})
export class ComponentExportModule {}

I am then wanting to utilise my components in the usual way within the app.module.html file such as:

<app-header/>
<nav-bar/>
<page-content/>

Upvotes: 1

Views: 3576

Answers (2)

Thomas
Thomas

Reputation: 1

Also when you add the shared components to your apps template (app.component.html) you will want to use the standard element notation such as: instead of as only void and foreign elements can be self closed ->correct solution

Upvotes: 0

Narm
Narm

Reputation: 10834

Your app.module.ts is wrong. ComponentExportModule needs to be added to the imports array in your app.module.ts, not declared. Modules are always imported. Components, directives, and pipes are declared.

Also when you add the shared components to your apps template (app.component.html) you will want to use the standard element notation such as: <app-header></app-header> instead of </app-header> as only void and foreign elements can be self closed

Upvotes: 1

Related Questions