shwashbuckle shwashbuckle - 2 months ago 141
TypeScript Question

Angular 2 - zone.js:355 Unhandled Promise rejection: Template parse errors: 'stocks' is not a known element:

Working my way through the Udemy course "Ultimate Angular 2 Developer with Bootstrap 4 & TypeScript" (https://www.udemy.com/ultimate-angular-2/learn/v4/overview) and have an issue with the app where it gets stuck at "Loading" and produces a console error, see details below...

At Section 4, Lecture 16 "Using Components" it gives instructions on how to create a "Stocks" component. however after completing the lesson and then starting the app it gets stuck at "Loading" and gives the following error in the browser console.

Unhandled Promise rejection: Template parse errors:
'stocks' is not a known element:
1. If 'stocks' is an Angular component, then verify that it is part of this module.
2. If 'stocks' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
</h1>

[ERROR ->]<stocks>
</stocks>
"): AppComponent@4:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'stocks' is not a known element:
1. If 'stocks' is an Angular component, then verify that it is part of this module.
2. If 'stocks' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
</h1>

[ERROR ->]<stocks>
</stocks>
"): AppComponent@4:0
at TemplateParser.parse (http://localhost:4200/main.bundle.js:15261:19)
at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:33578:51)
at http://localhost:4200/main.bundle.js:33501:83
at Set.forEach (native)
at compile (http://localhost:4200/main.bundle.js:33501:47)
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:64835:28)
at Zone.run (http://localhost:4200/main.bundle.js:64728:43)
at http://localhost:4200/main.bundle.js:65094:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:64868:37)
at Zone.runTask (http://localhost:4200/main.bundle.js:64768:47)
Error: Uncaught (in promise): Error: Template parse errors:(…)


Since I am still learning Angular I'm not completely familiar with the error and not sure where to look, Google searches don't show much. I'm wondering if the course might not be compatible with the newer versions of node & npm perhaps?

The files related to the app are:

stocks.component.ts

import {Component} from '@angular/core'

@Component({
selector: 'stock',
template: '<h1>Stocks</h1>'
})

export class StocksComponent{

}


app.component.ts

import { Component } from '@angular/core';
import { StocksComponent } from './stocks.component';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Woo Hoo';
}


app.component.html

<h1>
{{title}}
</h1>

<stocks>
</stocks>


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MutualfundsComponent } from './mutualfunds/mutualfunds.component';
import { StocksComponent } from './stocks.component';

@NgModule({
declarations: [
AppComponent,
MutualfundsComponent,
StocksComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


The app is extremely basic so it's surprising to see this error at this stage. Any help or pointers appreciated.

Answer

Problem is with selector.

stocks.component.ts

import {Component} from '@angular/core'

@Component({
    selector: 'stock',                         //<<<===stock selector is used in AppComponent
    template: '<h1>Stocks</h1>'
})

export class StocksComponent{}

app.component.html

<h1>
  {{title}}
</h1>

<stock>                                        //<<<=== stock(not stocks)
</stock>