Issue: The element p-button (and p-password) is unrecognized

After installing primeng using the command npm install primeng --save,

I have version ^12.0.1 of primeng listed in both dependencies and devDependencies in my package.json file.

In my angular.json file, I have included the necessary styles:

"styles": [
  "node_modules/primeng/resources/themes/saga-blue/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css",
  //...
],

Within my login.module.ts file, I have imported the required modules:

import {PasswordModule} from 'primeng/password';
import {ButtonModule} from 'primeng/button';

@NgModule({
   ...
   imports:[
   ...
   ButtonModule,
   PasswordModule
   ]
  })

I typed out the code snippets for password and button elements as follows:

<p-password></p-password>
<p-button></p-button>

The login module is located within the login folder nested inside the app folder.

Edit: The p-password and p-button components function correctly when used in the app module, but not in the login module.

I have configured the routing within the app routing module to direct to the login module.

Edit: Due to ongoing issues, I ultimately decided to merge the login component with the app module and remove the login module altogether. It has been a frustrating experience.

angulartypescriptprimeng

Answer №1

Although this topic has been discussed before, I recently encountered a similar issue. In my situation, I overlooked adding the LoginModule at the AppModule level within the imports array.

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

Answer №2

It appears that the CommonModule is not being imported in the LoginModule.

import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule, ButtonModule, PasswordModule]});

I faced a similar problem before and importing the CommonModule solved it for me.

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

In TypeScript, what specific term denotes a type of data?

Given the following code snippet: class Foo { } interface TypeProvider() { type(): ?; } class Bar implements TypeProvider { type(): ? { return (Foo); } } class Baz implements TypeProvider { type(): ? { return (Bar); ...

typescript

Creating unique random shapes within a larger shape on a canvas, as shown in the image

I have a parent rectangle and would like to add up to 10 or fewer rectangles on the right-hand side corner of the parent rectangle, as shown in the image below: I attempted to write code to achieve this, but the alignment is off-center from the parent rec ...

javascripttypescriptcanvashtml5-canvas

The creation of a parameterized function that doubles as an object property

interface item { first: string; last: string; } const itemList = Item[]; updateAttribute = (index, attributeToUpdate) => { itemList[index].attributeToUpdate = "New first/last" } The snippet above showcases an interface named item with propertie ...

javascripttypescript

Tips for including new items in an array within a subscribe valueChanges in Angular

What is the process for extracting values from a reactive form and storing them in an array when the form is valid? My application features dynamic forms with various fields that appear dynamically. retrieveFormValues(){ let valuesArray = []; this.fo ...

angularangular-reactive-forms

I can't seem to catch my Zod error, even though 'express-async-errors' is already installed. What could be causing this issue?

I've been working on developing an API, but I'm facing issues with setting up a global error controller using Zod. It seems that the global error handler is not being called even though I'm using express-async-errors. Below is my error mana ...

node.jstypescriptexpresstypeorm

Populate an Angular form using @Input to display data retrieved from a Firebase database through a service injection

I've encountered a challenge while working on an Ionic Angular project involving a form. The issue I'm facing is related to a component that serves as a form filled by an Input (Component). The problem seems to be that the form gets populated be ...

angularionic-frameworkangular-reactive-forms

Can a form be submitted using ViewChild in Angular5?

Can a form be submitted using ViewChild in Angular5? If so, how can it be achieved? I attempted to do this but was unsuccessful My Attempt: <form #form="ngForm" (submit)="submitForm(form)" novalidate> <input required type="text" #codeReques ...

angulartypescript

Challenges arise when attempting to share a theme across different repositories within a Storybook monorepo that utilizes

In my unique project setup, I have a singular repository containing atoms, molecules, and organisms along with storybooks to develop a custom components library. This library is based on MUI framework with a customized theme applied, all built with TypeScr ...

reactjstypescriptmaterial-uistorybook

Maintaining security and privacy with Angular 5: Ensure localStorage is cleared when the browser

In my web application using Angular 5, I have a requirement to clear the localStorage objects whenever the user closes the browser window. @HostListener("window:beforeunload", ["$event"]) clearLocalStorage(event) { localStorage.clear(); console.lo ...

angularangular5

Emphasize the chosen row in Primeng table without needing to select the checkbox

Currently, I am utilizing the primeng library to implement a p-table combined with a p-checkbox. My goal is to enable the highlighting of a clicked row (or its content) without automatically checking the checkbox. The intention is for the Checkbox to only ...

angularprimengp-table

Validating Forms in TypeScript

Currently in the process of learning Angular 10, but encountering a challenge I have an HTML document that validates a form group in my component. When I set a value for a textbox from my component, the value is displayed correctly, but my submit button c ...

angulartypescript

Build a custom Angular2 pipe to convert JSON data into an array through iteration

I am attempting to take the JSON data provided below and convert it into an array for use with *ngFor='let item of items', which will allow me to display data as item.name, etc... This is what I have tried: var out = []; for(var key1 in object) ...

javascriptarraysjsonangularangular-pipe

Utilizing Observable for Navbar concealment in Angular 2

Here's my dilemma: I have a navbar in my app.component that I want to hide before someone logs in by setting a boolean variable to true using ngIf. app.component.html: <navbar *ngIf="_userLoggedIn === true" ></navbar> <router-outlet& ...

typescriptangular

Instructions on utilizing type interfaces for prop drilling in my React Typescript counter

I am currently developing a basic counter app to monitor my progress in a digital card game that I enjoy playing. While attempting to pass props from the parent component to the child component, I encountered an issue where the props were not being success ...

javascriptreactjstypescript

Get rid of the strange border on the material dialog

I am struggling with the Angular material 6 dialog component as it is displaying a strange border. I have attempted to remove it using the code below, without success. Interestingly, when I apply the style inline in the browser, it works fine. Any suggesti ...

cssangulartypescriptangular6angular-material-6

Utilizing server-side caching middleware with tRPC version 10

Currently, I am working on a Next.js project and exploring the possibility of incorporating in-memory caching for tRPC results. Each tRPC procedure should have the option to set a custom TTL for caching purposes. My initial thought is that utilizing tRPC&a ...

javascriptnode.jstypescriptcachingtrpc

The default value retrieved from an HTTP API and stored in a BehaviorSubject within a service

In my service, I am having an issue with getting the default value using a get HTTP request on a BehaviorSubject. Here is part of my code: defaultItems!: ColumnsToFilterWithItems[]; columnsToFilterWithItemsBehaviorSubject: BehaviorSubject<ColumnsToFilte ...

angularbehaviorsubject

The best location for storing Typescript files within an ASP.NET Core project

My Typescript app is built on AngularJS 2 with ASP.NET Core, and currently I store my TS files in the wwwroot directory. While this setup works well during development, I am concerned about how it will function in production. I aim to deploy only minified ...

angulartypescriptgulpasp.net-core

How can we detect if the pressing of an "Enter" key was triggered by an Angular Material autocomplete feature?

Currently, I have incorporated an Angular Material Autocomplete feature into my search bar. When a user types in their query and presses the Enter key, the search is executed as expected. Nevertheless, if the user decides to select one of the autocomplete ...

javascriptangularangular-materialangular-material2

Can the Okta clientId be securely shared in a public repository?

Setting up Okta authentication in an Angular application involves adding a configuration variable with the necessary settings for your OIDC app in the app.module.ts file. You can find more information here. const config = { issuer: 'https://dev-1 ...

angularokta