未捕获错误：模板解析错误exportAs

Question

我已经使用这个link来制作平均堆栈聊天应用程序我已经复制了此链接中的代码，当我尝试构建我的angular 4应用程序时出现此错误。我的节点服务器工作正常。有一种解析错误我谷歌它但无法解决问题

这是我的chat.component.html文件，就像链接

一样

<div class="container">
 <div class="row">
  <div class="col-md-5">
      <div class="panel panel-primary" *ngIf="joinned; else joinroom">
          <div class="panel-heading">
              <span class="glyphicon glyphicon-comment"></span> {{ msgData.room }}
              <div class="btn-group pull-right">
                  <button type="button" class="btn btn-default btn-xs" (click)="logout()">
                      Logout
                  </button>
              </div>
          </div>
          <div #scrollMe class="panel-body">
              <ul class="chat">
                  <li *ngFor="let c of chats">
                    <div class="left clearfix" *ngIf="c.nickname===msgData.nickname; else rightchat">
                      <span class="chat-img pull-left">
                        <img src="http://placehold.it/50/55C1E7/fff&text=ME" alt="User Avatar" class="img-circle" />
                      </span>
                      <div class="chat-body clearfix">
                          <div class="header">
                              <strong class="primary-font">{{ c.nickname }}</strong> <small class="pull-right text-muted">
                                  <span class="glyphicon glyphicon-time"></span>{{ c.updated_at | date: 'medium' }}</small>
                          </div>
                          <p>{{ c.message }}</p>
                      </div>
                    </div>
                    <ng-template #rightchat>
                      <div class="right clearfix">
                        <span class="chat-img pull-right">
                          <img src="http://placehold.it/50/FA6F57/fff&text=U" alt="User Avatar" class="img-circle" />
                        </span>
                        <div class="chat-body clearfix">
                            <div class="header">
                                <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>{{ c.updated_at | date: 'medium' }}</small>
                                <strong class="pull-right primary-font">{{ c.nickname }}</strong>
                            </div>
                            <p>{{ c.message }}</p>
                        </div>
                      </div>
                    </ng-template>
                  </li>
              </ul>
          </div>
          <div class="panel-footer">
            <form (ngSubmit)="sendMessage()" #msgForm="ngForm">
              <div class="input-group">
                  <input type="hidden" [(ngModel)]="msgData.room" name="room" />
                  <input type="hidden" [(ngModel)]="msgData.nickname" name="nickname" />
                  <input id="btn-input" type="text" [(ngModel)]="msgData.message" name="message" class="form-control input-sm" placeholder="Type your message here..." required="" />
                  <span class="input-group-btn">
                      <button class="btn btn-warning btn-sm" id="btn-chat" [disabled]="!msgForm.form.valid">
                          Send</button>
                  </span>
              </div>
            </form>
          </div>
      </div>
      <ng-template #joinroom>
        <div class="panel panel-primary">
          <div class="panel-body">
            <h1>Select Chat Room</h1>
            <form (ngSubmit)="joinRoom()" #joinForm="ngForm">
              <div class="form-group">
                <input type="text" class="form-control" [(ngModel)]="newUser.nickname" name="nickname" placeholder="Nickname" required="" />
              </div>
              <div class="form-group">
                <select class="form-control" [(ngModel)]="newUser.room" name="room" required="">
                  <option>Select Room</option>
                  <option value="Javascript">Javascript</option>
                  <option value="Java">Java</option>
                  <option value="Python">Python</option>
                </select>
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-success" [disabled]="!joinForm.form.valid">Join</button>
              </div>
            </form>
          </div>
        </div>
      </ng-template>
  </div>
</div>
</div>

这是我的app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChatService } from './chat.service';
import { HttpModule , JsonpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { ChatComponent } from './chat/chat.component';

@NgModule({
declarations: [
AppComponent,
ChatComponent
],
imports: [
BrowserModule,
HttpClientModule,
HttpModule
 ],
 providers: [ChatService],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

可能是这个错误的解决方法

Answer 1

在module.ts中导入表格模块，如下所示

import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule
    ]

})
export class Module { }