CODEWITHSUNDEEP
angularangular-library
thevpc
thevpc

Reputation: 73

Problem with Angular Library integration with existing Application

I created an Angular (17.0.5) Library @myns/mylib , and added some component MyComponent to it.

@Component({
  selector: 'lib-my-component',
  template: `
    <p>
      core-ng works!
    </p>
  `,
  styles: [
  ]
})
export class MyComponent {

}

I Exported MyComponent in a Module

@NgModule({
  declarations: [
    MyComponent,
  ],
  imports: [
    FormsModule,
    InputTextModule,
    InputTextareaModule,
    PasswordModule,
  ],
  exports: [
    MyComponent
  ]
})
export class MyLibModule { }

I also exported MyComponent in public-api.ts

export * from './lib/my-component.component';

Then I built the library (no issues), and linked it to another repo angular application (no issues so far) using npm link

The library is well added to node_modules

I then imported my module

import {MyLibModule} from "@myns/mylib";
@NgModule({
    declarations: [AppComponent, NotfoundComponent],
    imports: [AppRoutingModule, AppLayoutModule, MyLibModule],
    providers: [
        {provide: LocationStrategy, useClass: PathLocationStrategy},
        CountryService, CustomerService, EventService, IconService, NodeService,
        PhotoService, ProductService
    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

and added a simple usage of the component in main app.component.html

<lib-my-component></lib-my-component>

When I try to build (ng build) I get this error ` Error: src/app/..../app.component.html:66:17 - error NG8001: 'lib-my-component' is not a known element:

  1. If 'lib-my-component' is an Angular component, then verify that it is part of this module.
  2. If 'lib-my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ` Le library seems to be understood by the compiler and the IDE (Idea) show no errors regarding the imports and the imported Module

Wasn't expecting making a simple library in angular so challenging. Any clue ?

Tried to canonize the problem by trying the simplest form of it. Followed the existing tutorials. At best i got that error. I suppose the problem is related to linking the library to the app, but I do not see it. Tried all what I have found: Checked names are well exported/imported Changed linking through module name instead of path Changed to prod mode with ("enableIvy": false)

but none got me closer than what I have reached so far.

I remarked as well that each time I do an

npm install

I need to redo my

npm link "path-to-lib-dist"

Upvotes: 0

Views: 105

Answers (1)

Menelaos
Menelaos

Reputation: 26549

Intro

The main issue is lib-my-component isn't recognized in your application.

Try to use CommonModule in the imports:

imports: [
  CommonModule,
  FormsModule,
  InputTextModule,
  InputTextareaModule,
  PasswordModule,
],

In public-api.ts, make sure that you are exporting module and component:

export * from './lib/mylib.module';
export * from './lib/my-component.component';

Do link the Library:

cd dist/@myns/mylib
npm link
cd /path/to/your/application
npm link @myns/mylib

Add CUSTOM_ELEMENTS_SCHEMA in order to avoid schema errors:

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

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Give these a try and tell me how it goes!

References/Possible Extra Help

CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

Upvotes: 0

Related Questions