Angular2 Refusal from a raw promise: template parsing errors:

Question

I am new to Angular2 and am creating one basic application. But when I run the application, it gives some error.

Here is the plunker link I'm working on: https://plnkr.co/edit/vnnVJtA7HJS740tvslEI?p=preview

Please provide me a solution so that I can start with Angular2. The appearance of the error:

VM654 zone.js:388 Unhandled Promise rejection: Template parse errors:
'courses' is not a known element:
1. If 'courses' is an Angular component, then verify that it is part     
of this module.
2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" 
to the '@NgModule.schemas' of this component to suppress this  
message. ("
<div>
  <h2>Hello {{name}}</h2>
  [ERROR ->]<courses></courses>
   </div>"): App@3:6 ; Zone: <root> ; Task: Promise.then ; Value:   
Error: Template parse errors:(…) Error: Template parse errors:
'courses' is not a known element:
1. If 'courses' is an Angular component, then verify that it is part   
of this module.
2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA"   
to the '@NgModule.schemas' of this component to suppress this 
message. ("
<div>
  <h2>Hello {{name}}</h2>
  [ERROR ->]<courses></courses>
   </div>"): App@3:6
at TemplateParser.parse     
(https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:8446:21)
at RuntimeCompiler._compileTemplate    
(https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16824:53  
)
at eval  
(https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16746:85 
)
at Set.forEach (native)
at compile  


(https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:16746:49   
 )
at ZoneDelegate.invoke 
(https://unpkg.com/zone.js@0.6.26/dist/zone.js:232:26)
 at Zone.run (https://unpkg.com/zone.js@0.6.26/dist/zone.js:114:43)
 at https://unpkg.com/zone.js@0.6.26/dist/zone.js:502:57
 at ZoneDelegate.invokeTask 
 (https://unpkg.com/zone.js@0.6.26/dist/zone.js:265:35)
 at Zone.runTask 
(https://unpkg.com/zone.js@0.6.26/dist/zone.js:154:47)consoleError @ 
VM654 zone.js:388_loop_1 @ VM654 zone.js:417drainMicroTaskQueue @ 
VM654 zone.js:421ZoneTask.invoke @ VM654 zone.js:339
VM654 zone.js:390 Error: Uncaught (in promise): Error: Template parse   
errors:(…)

Answer 1

You had to make two changes,

1). deleted and directives:[CourseComponent]

declarations: [ App,CourseComponent ]   //#### added CourseComponent here

2) changed to keywork # let

<li *ngFor="let course  of courses"> 

DEMO: https://plnkr.co/edit/U42S7joZT7wMCr1oBF9h?p=preview