Import a component from an Angular library fails.

[FlorianLeitgeb]

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

I would like to import a component/file from my library in the libs folder into my app. So I expect the behaviour like shown in the get started tutorial here: https://nx.dev/tutorial/07-share-code

Current Behavior

I create an Angular component library called ui-components with the nrwl/nx schematics in my libs folder. Then I define a footer component in this library and add it to my module declarations and exports. Then I can use the component in my templates and everything works as expected.

Back in my app, I import the module in my app.module.ts and use the component in my routing or my Angular testBed, but that is where the problems start. When I want to import the component somwhere in my code, I can only do this by using an absolute path, which is forbidden.
But when I use my defined path "@frontend/ui-components" I get the error:

Module '"../../../../../../../../../Projects/frontend/libs/ui-components/src"' has no exported member 'WhiteLabelHeaderComponent'.ts(2305)

But it has the exported member. Here my module:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ContactCardComponent } from './contact-card/contact-card.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { WhiteLabelFooterComponent } from './white-label-footer/white-label-footer.component';
import { WhiteLabelHeaderComponent } from './white-label-header/white-label-header.component';

@NgModule({
  declarations: [
    ContactCardComponent,
    WhiteLabelFooterComponent,
    WhiteLabelHeaderComponent,
    NotFoundComponent
  ],
  exports: [
    ContactCardComponent,
    WhiteLabelFooterComponent,
    WhiteLabelHeaderComponent,
    NotFoundComponent
  ],
  imports: [CommonModule],
})
export class UiComponentsModule {}

Here my TestBed where I want to use it:

import { async, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { WhiteLabelHeaderComponent } from '@frontend/ui-components';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [RouterTestingModule, WhiteLabelHeaderComponent],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

I am absolutely confused. Because I export it from my module and the barrel file also exports everything from the module:

export * from './lib/ui-components.module';

Is this a bug or expected behaviour? If it is intended, how should I change my architecture? I can not find anything related in the internet and after reading the documentation, it seems that this should work.

[FrozenPandaz]

Sorry that this is a bit confusing.

You are importing the component the correct way but you are not exporting it properly.

The NgModule in Angular and ES2015 modules are 2 different things.

You must to export the component from your barrel file as well as from the @NgModule.

export * from './lib/white-label-header/white-label-header.component`;
// ...

Here's a video to elaborate on the difference: https://www.youtube.com/watch?v=ntJ-P-Cvo7o

[FlorianLeitgeb]

Thank you very much. Now I know that this is not an issue for github, but may I ask one more question: Does it make sense to create an Angular library/module for this use case? This seems like a bit of a double work to add everything to a module and also to the barell file. I could achieve the same results without an angular module.

What is the intended usage of creating libraries for angular components or services and using the barrel files? I could not find any examples in the example Nx project too.

Because the tutorial says to create an Angular library within the libs folder and this creates an ngModule, but to me it seems a bit pointless now. Cause I can just export my components and services and import it where I need them without an ngModule.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.