Uncaught Error: Template parse error There is not such directive with exportAs

Question

我已经使用这个 link 制作了 mean stack 聊天应用程序我已经从这个 link 复制了代码，当我试图构建我的 angular 4 应用程序时我遇到了这个错误。我的节点服务器工作正常。我有某种解析错误 google 但无法解决问题

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

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

Uncaught Error: Template parse error There is not such directive with exportAs

Uncaught Error: Template parse error There is not such directive with exportAs

socket.io

mean-stack

angular