CODEWITHSUNDEEP
angular
Ritika Srivastava Misra
Ritika Srivastava Misra

Reputation: 966

Using Angular Library component in local project - not working

I have created a angular workspace that contains my project and library. Below is the project structure:

FOLDER STRUCTURE

I have build my library -(This uses form module)

ng build demo-lib

and it compiles successfully and creates a folder inside dist folder.

Now I have imported the module inside app.module.ts and added under import:

import { DemoFormComponent, DemoLibModule } from 'demo-lib'
.
.
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DemoLibModule,
    DemoFormComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But when I serve my application I get below error, I am not sure what I am doing wrong :-

Error: dist/demo-lib/lib/demo-form/demo-form.component.d.ts:4:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the dependency (demo-lib) which declares DemoFormComponent has not been processed correctly by ngcc.

4 export declare class DemoFormComponent implements OnInit {
                       ~~~~~~~~~~~~~~~~~

Can anyone please help me with this issue?

Upvotes: 1

Views: 2659

Answers (1)

rveerd
rveerd

Reputation: 4006

You can only import modules into you module. You cannot (and don't need to) import components.

Your library module exports the component. That is enough for Angular to find the component when you use it in your application.

import { DemoLibModule } from 'demo-lib'
.
.
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DemoLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 1

Related Questions