How to import a component from a library (in nrwl/nx with Angular)

Question

I would like to import my PageNotFoundComponent from my ui-components library into the router of my app.

When I import the UiComponentsModule into my AppModule and use the components in my template, everything works just fine, but importing a component in es6 notation fails.

/libs/ui-components/src/lib/ui-components.module.ts

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 {}

/apps/myApp/src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotFoundComponent } from 'libs/ui-components/src/lib/not-found/not-found.component';

const routes: Routes = [
  {
    path: '**',
    component: NotFoundComponent,
  },
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)],
})
export class AppRoutingModule {}

With an import like import { NotFoundComponent } from 'libs/ui-components/src/lib/not-found/not-found.component'; I get the linter error:

library imports must start with @frontend/ (nx-enforce-module-boundaries)tslint(1) Submodule import paths from this package are disallowed; import from the root instead (no-submodule-imports)tslint(1) Module 'libs' is not listed as dependency in package.json (no-implicit-dependencies)tslint(1)

When I change the import to import { NotFoundComponent } from '@frontend/ui-components'; then I get the error:

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

So how do I import components directly from a library in Nx?

Answer 1

I have to add the desired component to my barrel file too. Here ist the answer from github repo support directly: https://github.com/nrwl/nx/issues/1533

I do not unterstand, why I need the Angular module for this, but I create it and export also the other components in the barrel file.