1
我已经使用这个link做当我试图建立我的角4应用程序,我得到这个错误我已经复制此链接中的代码堆栈平均聊天应用。我的节点服务器工作正常。有某种解析错误的我谷歌,但未能解决问题未捕获的错误:模板语法错误没有这样的指令与EXPORTAS
这里是我的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 { }
这可能是这个错误的soltion像下面
哪里是你的模块中'FormsModule'? – yurzui
我怎么能导入表单模块@yurzui – Asad
添加FormsModule ......从'进口{} FormsModule“@角/ forms' – Faisal