CODEWITHSUNDEEP
angularng-packagr
Paflow
Paflow

Reputation: 2347

ng-packagr packaged lib: only minified component names work

I made a angular (7.2) library, bundled with ng-packagr, published on npm. Now I want to use it in another project. I can import the module, but not the containing components:

The module in my library project which I bundle looks like

import { ConfirmDialogComponent } from './dialogs/confirm/confirm-dialog.component';

@NgModule({
  imports: [...],
  entryComponents: [
    ConfirmDialogComponent
  ],
  declarations: [
    ConfirmDialogComponent
  ],
  exports: [
    ConfirmDialogComponent
  ]
})
export class MyComponents { }

In target project I install the published bundle with npm and import the module in `app.modules.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyComponents } from 'my-components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyComponents
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

No error so far, but when I use it in app.component.ts

import { Component } from '@angular/core';
import { ConfirmDialogComponent } from 'my-components';

the statement leads to the compilation error of

ERROR in src/app/app.component.ts(2,10): error TS2305: Module '"../../node_modules/my-components/my-components"' has no exported member 'MessageDialogComponent'.

If I look at node_modules/my-components/my-components.d.ts

/**
 * Generated bundle index. Do not edit.
 */
export * from './my-components.module';
export { ConfirmDialogComponent as ɵa } from './dialogs/confirm/confirm-dialog.component';

and this app.component.ts to

import { Component } from '@angular/core';
import { ɵa } from 'my-components';

it works!

So why does the minified (?) alias work but not the real name of the component?

--

edit: If I remove as ɵa from declaration file I can Use the comonent's real name as expected. Whats going wrong here?

Upvotes: 1

Views: 569

Answers (1)

Paflow
Paflow

Reputation: 2347

The solution was to use barrel file as entry file for ng-packagr public_api.ts instead of the (angular) module file.

export * from './my-components.module'; // don't forget to export the module itself
export * from './dialogs/confirm/confirm-dialog.component';

Upvotes: 1

Related Questions