角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>