input绑定：
要先在app.Module中导入FormModule，否则会Console会报错：Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
import { FormsModule } from '@angular/forms'; @NgModule({ imports: [... FormsModule,....- 绑定input，两种方法：直接使用ngModel或用input的事件辅助。
参考
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputNickName">NickName</label>
<div class="input-group">
<div class="input-group-addon">昵称:</div>
<input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" placeholder="NickName">
<!--<input [(ngModel)]="nickName"> <input [value]="nickName" (input)="nickName = $event.target.value">-->
</div>
</div>
<button type="button" class="btn btn-primary" (click)="Login()">进入聊天室</button>
</form>
运行后显示正常，但F12 Console会报错：
If ngModel is used within a form tag,either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions.
链接
在一个form标签中使用f ngModel，必须设置name属性，或者在ngModelOptions中必须将表单控件定义为“standalone”。[ngModelOptions]=”{standalone: true}”
<input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" name="NickName placeholder="NickName">
<!--或-->
<input type="text" class="form-control" id="inputNickName" [(ngModel)]="nickName" [ngModelOptions]="{standalone: true}" placeholder="NickName">
Angular使用toastr，消息提示插件。
'ngx-toastr': 'npm:_ngx-toastr@8.1.0@ngx-toastr/toastr.umd.js'
Angular版本升级
httpService
- 对Http请求配置，链接1，链接2，
- 资料
- 完后报错(index):30 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:1113/traceur。查阅资料 (1 2) ，可能是systemjs方面的问题。==》Angular已从4升级到5，下一步，用angular_cli取代systemjs。
angular_cli取代systemjs
- Angular CLI 安装和使用
- .angular-cli.json配置文件参数详解，详解2
- systemjs加载方式换成angular_cli加载方式，就不能像使用systemjs.config.js 直接在index.html中添加js、css了。
systemjs的配置文件是system.config.js，angular_cli的配置文件是 .angular-cli.json，app的index要添加什么都在.angular-cli.json中配置了。angular-cli的web开发前后端的分离开发，刚用起来有点别扭，不知道怎么弄？查看 从MVC到前后端分离。 - 理解前后单分离后，下一步，用Visual Studio Code写前段，Microsoft Visual Studio写后端。
- Web前段开发好了要怎么发布？
ng build
6. iis上新建网站，并浏览。
7. **如果是部署在现有IIS网站下的虚拟目录，必须删除index.html中的下面一段，否则js基本、图等资料会找不到。
<base href="/">
8. Hehe，眼睛一下就亮了，总算有头绪了。
—–====2018/1/11
重写以上
- Angular-cli 使用Bootstrap，引入bootstrap的css可以在.angular-cli.json中添加。
- ng build报错：BrowserslistError，可能是引入的bootstrap@4.0.0-beta.3的问题，Angular官方检测结果。angular-cli要升级到1.6.4才能解决此问题。
- 升级全局Angular-cli
- 先卸载：
npm uninstall -g angular-cli - 清理：
npm cache clean （--forced） - 安装最新版本：
npm install -g @angular/cli@latest - 检测版本：
`ng -v
- 先卸载：
- 升级项目中的Angular-cli 版本(问题多，嫌麻烦，项目不大 干脆另外新建一遍)
npm uninstall --save-dev angular-clinpm install --save-dev @angular/cli@latestnpm install
按2 重新安装bootstrap，安装提示ootstrap@next有依赖没安装。
cnpm install ngx-bootstrap bootstrap@next --save
安装依赖。
cnpm install popper.jscnpm install jquery@1.9.1ng serve 运行后总是不显示boostrap的样式，是因为用的cnpm安装的，使用cnpm安装的在.angular.cli.json 的Styles配置要带版本。参考。原因是：简单来说，npminstall 下的 node_modules 目录采用和 npm 官方 client 不一样的布局，主要是为了最大限度提高安装速度。参见1，2。
- 使用cnpm uninstall卸载前面用cnpm安装的，再用npm安装。如果npm安装报错： npm ERR! Maximum call stack size exceeded ，尝试升级npm再试。
- npm 安装也真太慢，，还是用cnpm吧。
cnpm安装第三方插件 .angular-cli.json引用
Angular 5 +Angualr-CLI + bootstrap + toastr完成
文件
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,BsDropdownModule.forRoot(),BrowserAnimationsModule,// required animations module
ToastrModule.forRoot(),// ToastrModule added
],providers: [],bootstrap: [AppComponent]
})
export @H_479_404@class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export @H_479_404@class AppComponent {
title = 'app';
constructor(private toastr: ToastrService) { }
showSuccess() {
this.toastr.success('Hello world!','Toastr fun!');
}
}
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<button type="button" class="btn btn-dark" (click)="showSuccess()">
Button
</button>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>
packages.json
{
"name": "my-cliapp","version": "0.0.0","license": "MIT","scripts": { "ng": "ng","start": "ng serve","build": "ng build --prod","test": "ng test","lint": "ng lint","e2e": "ng e2e" },"private": true,"dependencies": { "@angular/animations": "^5.2.0","@angular/common": "^5.1.0","@angular/compiler": "^5.1.0","@angular/core": "^5.1.0","@angular/forms": "^5.1.0","@angular/http": "^5.1.0","@angular/platform-browser": "^5.1.0","@angular/platform-browser-dynamic": "^5.1.0","@angular/router": "^5.1.0","bootstrap": "^4.0.0-beta.3","core-js": "^2.4.1","ngx-bootstrap": "^2.0.0-rc.0","ngx-toastr": "^8.1.0","rxjs": "^5.5.2","zone.js": "^0.8.19" },"devDependencies": { "@angular/cli": "1.6.4","@angular/compiler-cli": "^5.1.0","@angular/language-service": "^5.1.0","@types/jasmine": "~2.8.3","@types/jasminewd2": "~2.0.2","@types/node": "~6.0.60","codelyzer": "^4.0.1","jasmine-core": "~2.8.0","jasmine-spec-reporter": "~4.2.1","karma": "~2.0.0","karma-chrome-launcher": "~2.2.0","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.2","ts-node": "~3.2.0","tslint": "~5.9.1","typescript": "~2.5.3" } }