Как обновить угловые проекты до последней версии

Переключение с HttpModule на HttpClientModule

В Руководстве по обновлению Angular говорится, что мы должны перейти с HttpModule на HttpClientModule .

Если мы проверим примечания к выпуску Angular версии 5.0.0 , мы узнаем, что Angular 4.3 и более поздние версии поставляются с новым HttpClient который автоматически обрабатывает ответы JSON и поддерживает перехватчики HTTP.

В нем говорится, что для обновления нашего кода мы должны заменить HttpModule на HttpClientModule , внедрить службу HttpClient и удалить все вызовы map(res => res.json()) поскольку новый HttpClient автоматически анализирует ответы JSON.

Давайте откроем src/app/app.module.ts и заменим HttpModule :

 // ... import { HttpModule } from '@angular/http'; @NgModule({ declarations: [ // ... ], imports: [ // ... HttpModule, ], providers: [ // ... ], bootstrap: [AppComponent] }) export class AppModule { } 

с HttpClientModule :

 // ... import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ // ... ], imports: [ // ... HttpClientModule, ], providers: [ // ... ], bootstrap: [AppComponent] }) export class AppModule { } 

Далее, мы должны использовать сервис HttpClient вместо сервиса Http и удалить все вызовы map(res => res.json()) в нашем коде, потому что новый HttpClient автоматически анализирует ответы для нас.

В третьей части мы централизовали весь код, связанный с HTTP, в сервисе под названием ApiService , и теперь мы ApiService преимущества этого подхода.

В результате нам нужно обновить только один файл, поэтому давайте откроем src/app/api.service.ts и заменим:

 import { Http, Headers, RequestOptions, Response } from '@angular/http'; // ... @Injectable() export class ApiService { constructor( private http: Http, private session: SessionService ) { } public signIn(username: string, password: string) { return this.http .post(API_URL + '/sign-in', { username, password }) .map(response => response.json()) .catch(this.handleError); } public getAllTodos(): Observable<Todo[]> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos', options) .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } public createTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .post(API_URL + '/todos', todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public getTodoById(todoId: number): Observable<Todo> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos/' + todoId, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public updateTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .put(API_URL + '/todos/' + todo.id, todo, options) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public deleteTodoById(todoId: number): Observable<null> { const options = this.getRequestOptions(); return this.http .delete(API_URL + '/todos/' + todoId, options) .map(response => null) .catch(this.handleError); } private handleError(error: Response | any) { console.error('ApiService::handleError', error); return Observable.throw(error); } private getRequestOptions() { const headers = new Headers({ 'Authorization': 'Bearer ' + this.session.accessToken }); return new RequestOptions({ headers }); } } 

с

 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http'; // ... @Injectable() export class ApiService { constructor( private http: HttpClient, private session: SessionService ) { } public signIn(username: string, password: string) { return this.http .post(API_URL + '/sign-in', { username, password }) .catch(this.handleError); } public getAllTodos(): Observable<Todo[]> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos', options) .map(response => { const todos = <any[]> response; return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } public createTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .post(API_URL + '/todos', todo, options) .map(response => { return new Todo(response); }) .catch(this.handleError); } public getTodoById(todoId: number): Observable<Todo> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos/' + todoId, options) .map(response => { return new Todo(response); }) .catch(this.handleError); } public updateTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .put(API_URL + '/todos/' + todo.id, todo, options) .map(response => { return new Todo(response); }) .catch(this.handleError); } public deleteTodoById(todoId: number): Observable<null> { const options = this.getRequestOptions(); return this.http .delete(API_URL + '/todos/' + todoId, options) .map(response => null) .catch(this.handleError); } // ... } 

Мы заменяем старые классы из HttpModule на их новые аналоги из HttpClientModule .

Более конкретно, мы заменим:

• import { Http, Headers, RequestOptions, Response } from '@angular/http'; с import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
• строка 81: Response с помощью HttpErrorResponse
• строка 90: Headers с HttpHeaders
• строка 93: return new RequestOptions({ headers }); с return { headers };

Если мы бежим:

 $ ng serve 

и перейдите в наш браузер по http://localhost:4200 , мы увидим, что наше приложение все еще работает, как и ожидалось, но теперь использует HttpClientModule за кулисами.

 source$ .operatorOne() .operatorTwo() .subscribe() 

 source$ .pipe( operatorOne(), operatorTwo() ) .subscribe() 

 // import operators from rxjs/operators import { map } from 'rxjs/operators'; // ... @Injectable() export class ApiService { constructor( private http: HttpClient, private session: SessionService ) { } // ... // update .map() to .pipe(map()) public getAllTodos(): Observable<Todo[]> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos', options) .pipe( map(response => { const todos = <any[]> response; return todos.map((todo) => new Todo(todo)); }) ) .catch(this.handleError); } // update .map() to .pipe(map()) public createTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .post(API_URL + '/todos', todo, options) .pipe( map(response => { return new Todo(response); }) ) .catch(this.handleError); } // update .map() to .pipe(map()) public getTodoById(todoId: number): Observable<Todo> { const options = this.getRequestOptions(); return this.http .get(API_URL + '/todos/' + todoId, options) .pipe( map(response => { return new Todo(response); }) ) .catch(this.handleError); } // update .map() to .pipe(map()) public updateTodo(todo: Todo): Observable<Todo> { const options = this.getRequestOptions(); return this.http .put(API_URL + '/todos/' + todo.id, todo, options) .pipe( map(response => { return new Todo(response); }) ) .catch(this.handleError); } } 

 // import operators from rxjs/operators import { map } from 'rxjs/operators'; // ... @Component({ selector: 'app-todos', templateUrl: './todos.component.html', styleUrls: ['./todos.component.css'] }) export class TodosComponent implements OnInit { // ... // update .map() to .pipe(map()) public ngOnInit() { this.route.data .pipe( map((data) => data['todos']) ) .subscribe( (todos) => { this.todos = todos; } ); } // ... }