Error during Creating a New Person : Creating a Modal #2306

I got following error while using asp.net core Developing-Step-By-Step-Angular 2 tutorial Error is following

There is no directive with "exportAs" set to "bs-modal" ("<div bsModal [ERROR ->]#modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledb"): CreatePersonModalComponent@0:13 Can't bind to 'config' since it isn't a known property of 'div'. ("nShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [ERROR ->][config]="{backdrop: 'static'}"> <div class="modal-dialog"> <div class="modal-content">"): CreatePersonModalComponent@0:143 There is no directive with "exportAs" set to "ngForm" (" <div class="modal-dialog"> <div class="modal-content"> <form ngIf="active" [ERROR ->]#personForm="ngForm" novalidate (ngSubmit)="save()"> <div class="modal-header"> "): CreatePersonModalComponent@3:33 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l no-hint"> <input #nameInput class="form-control" type="text" name="name" [ERROR ->][(ngModel)]="person.name" required maxlength="32"> <label>{{l("Name")}}</lab"): CreatePersonModalComponent@15:87 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ng-label no-hint"> <input class="form-control" type="email" name="surname" [ERROR ->][(ngModel)]="person.surname" required maxlength="32"> <label>{{l("Surname")}"): CreatePersonModalComponent@20:80 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("bel no-hint"> <input class="form-control" type="email" name="emailAddress" [ERROR ->][(ngModel)]="person.emailAddress" required maxlength="255" pattern="^\w+([.-]?\w+)@\w+([.-]?\w+)("): CreatePersonModalComponent@25:85 Can't bind to 'buttonBusy' since it isn't a known property of 'button'. (" <button type="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [ERROR ->][buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save"): CreatePersonModalComponent@31:107 Can't bind to 'busyText' since it isn't a known property of 'button'. ("ype="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [buttonBusy]="saving" [ERROR ->][busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button> "): CreatePersonModalComponent@31:129 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal" ("<div bsModal [ERROR ->]#modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledb"): CreatePersonModalComponent@0:13 Can't bind to 'config' since it isn't a known property of 'div'. ("nShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [ERROR ->][config]="{backdrop: 'static'}"> <div class="modal-dialog"> <div class="modal-content">"): CreatePersonModalComponent@0:143 There is no directive with "exportAs" set to "ngForm" (" <div class="modal-dialog"> <div class="modal-content"> <form ngIf="active" [ERROR ->]#personForm="ngForm" novalidate (ngSubmit)="save()"> <div class="modal-header"> "): CreatePersonModalComponent@3:33 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l no-hint"> <input #nameInput class="form-control" type="text" name="name" [ERROR ->][(ngModel)]="person.name" required maxlength="32"> <label>{{l("Name")}}</lab"): CreatePersonModalComponent@15:87 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ng-label no-hint"> <input class="form-control" type="email" name="surname" [ERROR ->][(ngModel)]="person.surname" required maxlength="32"> <label>{{l("Surname")}"): CreatePersonModalComponent@20:80 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("bel no-hint"> <input class="form-control" type="email" name="emailAddress" [ERROR ->][(ngModel)]="person.emailAddress" required maxlength="255" pattern="^\w+([.-]?\w+)@\w+([.-]?\w+)("): CreatePersonModalComponent@25:85 Can't bind to 'buttonBusy' since it isn't a known property of 'button'. (" <button type="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [ERROR ->][buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save"): CreatePersonModalComponent@31:107 Can't bind to 'busyText' since it isn't a known property of 'button'. ("ype="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [buttonBusy]="saving" [ERROR ->][busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button> "): CreatePersonModalComponent@31:129 at SyntaxError.BaseError [as constructor] (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:104588:27">http://localhost:4200/vendor.bundle.js:104588:27</a>) [<root>] at new SyntaxError (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:28711:16">http://localhost:4200/vendor.bundle.js:28711:16</a>) [<root>] at TemplateParser.parse (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:43256:19">http://localhost:4200/vendor.bundle.js:43256:19</a>) [<root>] at JitCompiler._compileTemplate (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79515:68">http://localhost:4200/vendor.bundle.js:79515:68</a>) [<root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:62">http://localhost:4200/vendor.bundle.js:79398:62</a> [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:19">http://localhost:4200/vendor.bundle.js:79398:19</a>) [<root>] at createResult (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79281:19">http://localhost:4200/vendor.bundle.js:79281:19</a>) [<root>] at Zone.run (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145502:43">http://localhost:4200/vendor.bundle.js:145502:43</a>) [<root> => <root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:145909:57">http://localhost:4200/vendor.bundle.js:145909:57</a> [<root>] at Zone.runTask (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145540:47">http://localhost:4200/vendor.bundle.js:145540:47</a>) [<root> => <root>] at drainMicroTaskQueue (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145807:35">http://localhost:4200/vendor.bundle.js:145807:35</a>) [<root>] consoleError @ vendor.bundle.js:145794 _loop_1 @ vendor.bundle.js:145823 drainMicroTaskQueue @ vendor.bundle.js:145827 ZoneTask.invoke @ vendor.bundle.js:145738 vendor.bundle.js:145796 Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal" ("<div bsModal [ERROR ->]#modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledb"): CreatePersonModalComponent@0:13 Can't bind to 'config' since it isn't a known property of 'div'. ("nShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [ERROR ->][config]="{backdrop: 'static'}"> <div class="modal-dialog"> <div class="modal-content">"): CreatePersonModalComponent@0:143 There is no directive with "exportAs" set to "ngForm" (" <div class="modal-dialog"> <div class="modal-content"> <form ngIf="active" [ERROR ->]#personForm="ngForm" novalidate (ngSubmit)="save()"> <div class="modal-header"> "): CreatePersonModalComponent@3:33 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l no-hint"> <input #nameInput class="form-control" type="text" name="name" [ERROR ->][(ngModel)]="person.name" required maxlength="32"> <label>{{l("Name")}}</lab"): CreatePersonModalComponent@15:87 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ng-label no-hint"> <input class="form-control" type="email" name="surname" [ERROR ->][(ngModel)]="person.surname" required maxlength="32"> <label>{{l("Surname")}"): CreatePersonModalComponent@20:80 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("bel no-hint"> <input class="form-control" type="email" name="emailAddress" [ERROR ->][(ngModel)]="person.emailAddress" required maxlength="255" pattern="^\w+([.-]?\w+)@\w+([.-]?\w+)("): CreatePersonModalComponent@25:85 Can't bind to 'buttonBusy' since it isn't a known property of 'button'. (" <button type="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [ERROR ->][buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save"): CreatePersonModalComponent@31:107 Can't bind to 'busyText' since it isn't a known property of 'button'. ("ype="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [buttonBusy]="saving" [ERROR ->][busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button> "): CreatePersonModalComponent@31:129 Error: Template parse errors: There is no directive with "exportAs" set to "bs-modal" ("<div bsModal [ERROR ->]#modal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledb"): CreatePersonModalComponent@0:13 Can't bind to 'config' since it isn't a known property of 'div'. ("nShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true" [ERROR ->][config]="{backdrop: 'static'}"> <div class="modal-dialog"> <div class="modal-content">"): CreatePersonModalComponent@0:143 There is no directive with "exportAs" set to "ngForm" (" <div class="modal-dialog"> <div class="modal-content"> <form ngIf="active" [ERROR ->]#personForm="ngForm" novalidate (ngSubmit)="save()"> <div class="modal-header"> "): CreatePersonModalComponent@3:33 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l no-hint"> <input #nameInput class="form-control" type="text" name="name" [ERROR ->][(ngModel)]="person.name" required maxlength="32"> <label>{{l("Name")}}</lab"): CreatePersonModalComponent@15:87 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("ng-label no-hint"> <input class="form-control" type="email" name="surname" [ERROR ->][(ngModel)]="person.surname" required maxlength="32"> <label>{{l("Surname")}"): CreatePersonModalComponent@20:80 Can't bind to 'ngModel' since it isn't a known property of 'input'. ("bel no-hint"> <input class="form-control" type="email" name="emailAddress" [ERROR ->][(ngModel)]="person.emailAddress" required maxlength="255" pattern="^\w+([.-]?\w+)@\w+([.-]?\w+)("): CreatePersonModalComponent@25:85 Can't bind to 'buttonBusy' since it isn't a known property of 'button'. (" <button type="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [ERROR ->][buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save"): CreatePersonModalComponent@31:107 Can't bind to 'busyText' since it isn't a known property of 'button'. ("ype="submit" class="btn btn-primary blue" [disabled]="!personForm.form.valid" [buttonBusy]="saving" [ERROR ->][busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button> "): CreatePersonModalComponent@31:129 at SyntaxError.BaseError [as constructor] (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:104588:27">http://localhost:4200/vendor.bundle.js:104588:27</a>) [<root>] at new SyntaxError (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:28711:16">http://localhost:4200/vendor.bundle.js:28711:16</a>) [<root>] at TemplateParser.parse (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:43256:19">http://localhost:4200/vendor.bundle.js:43256:19</a>) [<root>] at JitCompiler._compileTemplate (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79515:68">http://localhost:4200/vendor.bundle.js:79515:68</a>) [<root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:62">http://localhost:4200/vendor.bundle.js:79398:62</a> [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:19">http://localhost:4200/vendor.bundle.js:79398:19</a>) [<root>] at createResult (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79281:19">http://localhost:4200/vendor.bundle.js:79281:19</a>) [<root>] at Zone.run (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145502:43">http://localhost:4200/vendor.bundle.js:145502:43</a>) [<root> => <root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:145909:57">http://localhost:4200/vendor.bundle.js:145909:57</a> [<root>] at Zone.runTask (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145540:47">http://localhost:4200/vendor.bundle.js:145540:47</a>) [<root> => <root>] at drainMicroTaskQueue (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145807:35">http://localhost:4200/vendor.bundle.js:145807:35</a>) [<root>] at SyntaxError.BaseError [as constructor] (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:104588:27">http://localhost:4200/vendor.bundle.js:104588:27</a>) [<root>] at new SyntaxError (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:28711:16">http://localhost:4200/vendor.bundle.js:28711:16</a>) [<root>] at TemplateParser.parse (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:43256:19">http://localhost:4200/vendor.bundle.js:43256:19</a>) [<root>] at JitCompiler._compileTemplate (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79515:68">http://localhost:4200/vendor.bundle.js:79515:68</a>) [<root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:62">http://localhost:4200/vendor.bundle.js:79398:62</a> [<root>] at Set.forEach (native) [<root>] at JitCompiler._compileComponents (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79398:19">http://localhost:4200/vendor.bundle.js:79398:19</a>) [<root>] at createResult (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:79281:19">http://localhost:4200/vendor.bundle.js:79281:19</a>) [<root>] at Zone.run (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145502:43">http://localhost:4200/vendor.bundle.js:145502:43</a>) [<root> => <root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:145909:57">http://localhost:4200/vendor.bundle.js:145909:57</a> [<root>] at Zone.runTask (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145540:47">http://localhost:4200/vendor.bundle.js:145540:47</a>) [<root> => <root>] at drainMicroTaskQueue (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145807:35">http://localhost:4200/vendor.bundle.js:145807:35</a>) [<root>] at resolvePromise (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145875:31">http://localhost:4200/vendor.bundle.js:145875:31</a>) [<root>] at resolvePromise (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145860:17">http://localhost:4200/vendor.bundle.js:145860:17</a>) [<root>] at <a class="postlink" href="http://localhost:4200/vendor.bundle.js:145909:17">http://localhost:4200/vendor.bundle.js:145909:17</a> [<root>] at Zone.runTask (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145540:47">http://localhost:4200/vendor.bundle.js:145540:47</a>) [<root> => <root>] at drainMicroTaskQueue (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145807:35">http://localhost:4200/vendor.bundle.js:145807:35</a>) [<root>] at XMLHttpRequest.ZoneTask.invoke (<a class="postlink" href="http://localhost:4200/vendor.bundle.js:145738:25">http://localhost:4200/vendor.bundle.js:145738:25</a>) [<root>]