Surprising end tag found in Angular2

I am currently delving into Angular2 with TypeScript and have hit a roadblock after making some initial changes. Here is the issue I am facing. My code snippet is as follows:

import { Component } from '@angular/core';

@Component({
    selector: 'pm-app',
    template: `
        <div><h1>{{pageTitle}}</h1>
            <pm-prudcts></pm-products>
        </div>
    `
})
export class AppComponent {
    pageTitle: string = 'Acme Product Manager';
}

Unfortunately, I am encountering an error related to the Component Products and div tag:

Template parse errors:
Unexpected closing tag "pm-products" ("
        <div><h1>{{pageTitle}}</h1>
            <pm-prudcts>[ERROR ->]</pm-products>
        </div>
    "): AppComponent@2:24
Unexpected closing tag "div" ("
        <div><h1>{{pageTitle}}</h1>
            <pm-prudcts></pm-products>
        [ERROR ->]</div>
    "): AppComponent@3:8

Answer №1

Your component template contains a small mistake. Please correct <pm-prudcts> to <pm-products>:

@Component({
    selector: 'pm-app',
    template: `
        <div><h1>{{pageTitle}}</h1>
            <pm-products></pm-products> 
        </div>
    `
})

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 parameter type 'never[]' cannot be assigned to the type 'T | (() => T)' in the argument

Is it possible for the useFetch hook to allow any type of array to be used as the data type? hooks/useFetch.ts: const useFetch = <T extends any[]>(dataUrl: string) => { const [data, setData] = useState<T>([]); const [error, setError] = ...

Creating a dual-element display in React within a single frame

My code looks like this: <Box> <SomeIcon/> <HightlightSearch query={query}> {text} </HightlightSearch> </Box> The HighlightSearch function uses innerHTML to highlight query results in the child (text). It's a simpl ...

Issue encountered when attempting to assign `fontWeight` within `makeStyles` using `theme` in Typescript: Error message states that the property is not

Currently, within my NextJS project and utilizing MUI, I am attempting to define a fontWeight property using the theme settings in the makeStyles function. Oddly enough, this issue only arises when building inside a docker container, as building locally po ...

Attempting to simulate the behavior of nfcManager by utilizing the nfcManager.start() function in react native testing library

In the process of developing my Android app, I encountered a need to read NFC tags. To accomplish this task, I decided to utilize the react-native-nfc-manager library. However, during my implementation, I faced two perplexing issues that have left me stump ...

Asynchronous and nested onSnapshot function in Firestore with await and async functionality

I'm facing an issue with the onSnapshot method. It seems to not await for the second onsnapshot call, resulting in an incorrect returned value. The users fetched in the second onsnapshot call are displayed later in the console log after the value has ...

How do I design a reactive form in Angular 8 that dynamically selects another dropdown option based on the selection of one dropdown?

I am a beginner in Angular and currently working on creating a reactive form. I want to have a functionality where selecting one value in a dropdown menu will automatically populate another dropdown menu with relevant data. Here is the object structure tha ...

Changing an Angular template.html into a PDF document within an Angular 2 application can be achieved by utilizing

Exploring Angular 2 and looking for a way to export my HTML component in Angular 2 to PDF using jspdf. I want to convert dynamically generated tabular HTML into a PDF using jspdf. Below is a snippet of sample code along with a Plunker link: import {Comp ...

Explain the TypeScript type where the keys of an object not found in an array should correspond to the type of another object

Currently, I am developing a utility function called copyKnownProperties that is responsible for copying properties from one class or object to another only if the key exists on both objects. In the example provided, you can observe an attempt to copy prop ...

App-Root in Angular 2 not loading properly in ExpressJS route

As a newcomer to NodeJS and Express, I am trying to create a simple '/' route that points to Angular's default index.html file located at client/src/index.html. This file contains the app-root tag. While the '/' route successfully ...

Error encountered when implementing Angular Model Class within an array structure

In the current project, I have developed a class and am attempting to utilize the constructor format for certain content within the project. Here is my Angular class - import { Languages } from './temp-languages.enum'; export class Snippet { ...

I encountered a permission denied error while attempting to execute the command npm install -g tsc

My main objective is to convert TypeScript code to JavaScript. However, when I attempted to install the TypeScript compiler globally using 'npm install -g tsc', I encountered the following error: npm ERR! Error: EACCES: permission denied, rename ...

prolonging inner interface created by supabase

Below is the Typescript interface that has been generated by Supabase export interface definitions { Users: { /** Format: uuid */ id: string; /** * Format: timestamp with time zone * @default now() */ created_at?: string; ...

Error: The 'Store' property is not found in the '{}' type but is needed in the 'Readonly<Istore>' type. TS2741

Can you assist me in resolving this issue? I am attempting to pass my store as props to the component, but I keep encountering the following error: Type error: Property 'Store' is missing in type '{}' but required in type 'Readon ...

Tips for including a set width on Y-Axis labels

How can I set a fixed width for y-axis labels? Is there a way to do this? like shown here yAxis: { labels: { style: { width: '30px', fontSize: '10px', textOverflow: 'none' } } }, ...

Show details when clicked with various elements

I have a dilemma with my Angular version 7 project. In a div, I have placed 6 buttons in 2 columns and I want to show a description of one button only when it is clicked. Currently, the description for all buttons displays at once upon clicking any button. ...

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

Issue with Nodemon and Typescript causing errors with Worker Threads

Currently, I am in the process of integrating a worker thread into my Typescript and node.js application. Let's take a look at my thread.ts file: import { Worker, isMainThread, parentPort, workerData } from "worker_threads"; let thread ...

The handler for the ActionSheet is unable to retrieve the class variable

Exploring the capabilities of the Ionic Framework, I delved into using ActionSheet and ActionSheetController for a Proof of Concept. Everything was functioning smoothly until I came across an unexpected error. When assigning a function as a handler that I ...

What is the best approach for unit testing canActivate in Angular?

Is there a way to properly test the canActivate function in Angular that returns a function which ultimately provides a boolean value? I attempted to create instances of ActivatedRouteSnapshot and RouterStateSnapshot, and then pass them into the canActiva ...

Having trouble importing SVG as a React component in Next.js

I initially developed a project using create-react-app with Typescript, but later I was tasked with integrating next.js into it. Unfortunately, this caused some SVGs throughout the application to break. To resolve this issue, I implemented the following pa ...