角2 - zone.js：355未处理的承诺拒绝：模板解析错误：“股票”不是一个已知的元素：

Question

工作我的方式通过Udemy课程“终极角2开发与引导4 &打字稿”（https://www.udemy.com/ultimate-angular-2/learn/v4/overview）和有一个应用程序的问题，它被卡在“加载”，并产生一个控制台错误，请参阅下面的详细信息...

在第4节讲座16“使用组件”，它给出了如何创建一个“股票“ 零件。然而，在完成课程，然后启动应用程序后，它会停留在“加载”状态，并在浏览器控制台中出现以下错误。

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:(…) 

因为我仍然在学习角我不完全熟悉的错误和不知道在哪里看，谷歌搜索没有太多表现。我想知道该课程是否可能与新版本的节点& npm不兼容？

与应用相关的文件包括：

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

应用程序是非常基本的所以这是令人惊讶地看到这个错误在这个阶段。任何帮助或指针赞赏。

Answer 1

问题与选择器。

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>