Working my way through the Udemy course "Ultimate Angular 2 Developer with Bootstrap 4 & TypeScript" () 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" ponent. however after pleting 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 ponent, 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 ponent 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 ponent, 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 ponent to suppress this message. ("
</h1>

[ERROR ->]<stocks>
</stocks>
"): AppComponent@4:0
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:15261:19)
    at RuntimeCompiler._pileTemplate (http://localhost:4200/main.bundle.js:33578:51)
    at http://localhost:4200/main.bundle.js:33501:83
    at Set.forEach (native)
    at pile (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 pletely 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 patible with the newer versions of node & npm perhaps?

The files related to the app are:

stocksponent.ts

import {Component} from '@angular/core'

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

export class StocksComponent{

}

appponent.ts

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

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

appponent.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 './appponent';
import { MutualfundsComponent } from './mutualfunds/mutualfundsponent';
import { StocksComponent } from './stocksponent';

@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.

Working my way through the Udemy course "Ultimate Angular 2 Developer with Bootstrap 4 & TypeScript" (https://www.udemy./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" ponent. however after pleting 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 ponent, 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 ponent 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 ponent, 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 ponent to suppress this message. ("
</h1>

[ERROR ->]<stocks>
</stocks>
"): AppComponent@4:0
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:15261:19)
    at RuntimeCompiler._pileTemplate (http://localhost:4200/main.bundle.js:33578:51)
    at http://localhost:4200/main.bundle.js:33501:83
    at Set.forEach (native)
    at pile (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 pletely 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 patible with the newer versions of node & npm perhaps?

The files related to the app are:

stocks.ponent.ts

import {Component} from '@angular/core'

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

export class StocksComponent{

}

app.ponent.ts

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

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

app.ponent.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.ponent';
import { MutualfundsComponent } from './mutualfunds/mutualfunds.ponent';
import { StocksComponent } from './stocks.ponent';

@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.

• javascript
• node.js
• angular
• typescript

1 Answer 1

Problem is with selector.

stocks.ponent.ts

import {Component} from '@angular/core'

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

export class StocksComponent{}

app.ponent.html

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

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