angular 升级后的新功能

angular的版本目前更新到 ^7.0.2
之前我用的是angular 4,然后升级到了6,怕升级到最新版之后有什么不兼容,所以我直接搭了一个简单的最新版本的demo

升级 How to upgrade?

推荐一个网站,亲测好用 angular升级网站

1. 这里可以告诉你应该怎么做?你要从哪个版本升到哪个版本

   
   image.png

2. 然后点击 show me how to update! 下面会详情地告诉你怎么做的

3. 我的从6.1 更新到7.0

   
   image.png
   

   主要运行这两个命令

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

新功能 What are the new functions?

试了下这个

ng add @angular/material // 安装并设置 Angular Material 和主题，注册新的初始组件 到ng generate中

然后再运行

ng g @angular/material:material-dashboard  --name="my-dashboard" // 生成一个dashboard的组件
ng g @angular/material:material-table  --name="my-table" // 生成一个table的组件
ng g @angular/material:material-nav  --name="my-nav"  // 生成一个nav的组件

nav.png
更多Material请点击

支持创建和构建库

github地址

 ng g library 名字 // 在你项目中创建一个库
 ng build 名字 // 构建一个库
 cd/dist 名字 
 npm publish // 发布之前要去注册
 npm adduser // 第一次发布注册一个用户,之后还要去验证

npm验证网站 一般是发封邮件验证就可以了,之后就可以通过npm publish 发布了
最后发布成功 可以通过npm i 名字安装,和一般使用库的方法一样

服务

之间的服务都需要这么写的

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";
import { Res } from '../interfaces/res.interface';

@Injectable()
export class LoginService {
  constructor(private http: HttpClient) { }
  // 登录
  public login(loginData: LoginData): Observable<Res<string>> {
    return this.http.post<Res<string>>('/api/login/auth', loginData)
  }
// 在模块中注入服务
@NgModule({
   ...
   providers: [ MyService ]
})
export class AppModule {}

现在不需要再模块中注入

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root' // 关键在这里
})
export class MyServiceService {
  constructor() { }
}

附加

修改默认的接口,在package.json的script里面,可以用npm start启动

 "start": "ng serve --port 4203",

官方文档没事多逛逛