Steps for bringing a component from a library into your project (using nrwl/nx alongside Angular)

I need to bring in the PageNotFoundComponent from my ui-components library into my app's router.

While importing the UiComponentsModule into my AppModule and using the components in my template works fine, attempting to import a component in es6 format leads to failure.

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

When trying to import with

import { NotFoundComponent } from 'libs/ui-components/src/lib/not-found/not-found.component';
, I receive the following 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)

Changing the import to

import { NotFoundComponent } from '@frontend/ui-components';
results in the error:

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

How can I correctly import components directly from a library in Nx?

Answer №1

In order to successfully integrate the desired component, it is necessary to include it in my barrel file as well. The solution provided directly from the GitHub repository support can be found here: https://github.com/nrwl/nx/issues/1533

Although I am unsure of the reasons behind needing an Angular module for this task, I have gone ahead and created it, while also ensuring that all other components are properly exported in the barrel file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The quirk of Angular 2 routing when refreshing the page

Being completely new to Angular 2, I find myself facing a routing dilemma that I can't seem to wrap my head around. @Component({ selector: 'app', templateUrl: 'app/app.template.html', directives: [ROUTER_DIRECTIVES] }) ...

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

What is the alternative method for enabling cross-origin authentication if CORS wildcard is not permitted for authentication?

I encountered a CORS error while making an AJAX request using HttpClient. The error arises when trying to receive res.cookie in the response. Here is some background information on my CORS policy: app.use(cors()); app.options('*',cors()); var al ...

Easiest method for securing a web page with a password using Angular Material

Seeking guidance on how to implement password protection for a web page. I used angular material to develop a webpage that communicates with a back-end service to retrieve information. Additionally, I've included an admin sub-page for website configur ...

Issue encountered in Typescript: callback functions are returning undefined value when called from a superclass

As a newcomer to TypeScript and Node.js, I decided to dive into something new by exploring Angular, Node, and Express. While attempting to practice good project structure practices in Express by breaking it down into smaller parts, I encountered an issue. ...

Having trouble retrieving a specific key from the state object in Redux using TypeScript

I have incorporated TypeScript into my Ionic project, using React hooks. I recently added an errorReducer to handle any errors that may arise from the server. Below is a snippet of my code: Action import { ERROR_OCCURRED } from "./types"; ...

Guide to displaying specific employee information by utilizing routing and parameters

My task involves presenting an array of employee details in a table format. By employing routing with a parameter, I aim to display the information of a specific employee upon selection. Upon clicking on an employee's details, the system successfully ...

What is the reason why the [active] attribute does not function properly in <a mat-tab-link> in Angular?

<div class="d-flex d-column themed-tab-nav"> <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start"> <a mat-tab-l ...

What is the best way to create an ESM / CJS module without needing to include '.default' in the imports?

Is it possible to configure my package.json to support different imports for CJS and ESM formats? "main": "dist/cjs/index.js", "module": "dist/esm/index.js", In addition, can I set up my TypeScript compiler to g ...

When utilizing the Turf.nearPoint() function, it is important to consider the type of point being used. The documentation for Turf.nearestPoint() appears to be inaccurate

I have some code that needs to be transcribed from another system, so unfortunately I can't easily share it here. If I could, I would just post the entire project. Recently, I attempted to integrate into our project but encountered error messages. T ...

Having trouble getting Angular 2 QuickStart to run with npm start?

When attempting to start my project with npm start, I encountered the following error: C:\angular2-quickstart>npm start > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47262920322b2635756a36322e242c343326353307766 ...

Issues with Angular 9 routerLinkActive functionality causing unexpected behavior

Whenever I navigate to a different router link, the previous link remains active, resulting in multiple active links with the same class. <div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboar ...

Binding data in Angular 2 to an element other than an input

Angular 2 Version:rc.1 I have a table displaying names and places using *ngFor, and I need to bind the clicked cell's data to a variable in my component. component.html <tr *ngFor="let result of Results$"> <td #foo (click)="passValue(foo ...

Angular 6 - Outdated Functions

I'm having trouble updating the request options as they are now deprecated. I can't seem to locate the alternative option for this. Can anyone offer some assistance? import { Injectable } from '@angular/core'; import { HttpClient } fr ...

What's the best way to provide route access to the same menu for two distinct user roles using AuthGuard within Angular?

I developed an application that includes three different user roles: ROLE_USER, ROLE_MODERATOR, and ROLE_ADMIN as shown below: export enum Role { User = 'ROLE_USER', Moderator = 'ROLE_MODERATOR', Admin = 'ROLE_ADMIN&apo ...

Unable to locate the 'socket.io' module in a TypeScript project on Visual Studio using node.js

Currently working on a node.js project within Visual Studio. Everything was running smoothly until I attempted to import 'socket.io' and encountered the error message – Cannot find module 'socket.io'. Despite having it installed in th ...

Issue with Angular2 not able to call POST method in CodeIgniter RESTful API resulting in 404 error

I am encountering an issue with my codeigniter restful API. While the GET method is working fine, I am unable to get the POST method to work from Angular2. this.api.post('quality/addeditquality', this.formdata).subscribe(data => { c ...

Unable to transfer an object into a component due to a subscribe restriction

I have encountered an issue: I am making a post request to save an object in the database. The request takes JSON input with the values of the object to be saved. After saving the object in the database, I need my servlet to return the saved object so that ...

Unexpected error in React TypeScript: '=' symbol missing. Code error TS1005

Encountering an issue: '=' expected. TS1005 5 | * LICENSE file in the root directory of this source tree. 6 | */ > 7 | import type { NewPlugin, Optionsz, OptionsReceived } from './types'; | ^ ...

Issue with CORS when starting SAM local API

I have encountered a CORS issue while using AWS CDK (Typescript) and running SAM local start-api to launch an API connected to lambda resolvers. The problem arises when attempting to access the API from a web browser. Below is the code snippet causing the ...