> For the complete documentation index, see [llms.txt](https://devs.gitbook.io/0/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devs.gitbook.io/0/angular6.1-cong-bo-chinh-thuc-thang-7-nam-2018.md).

# Angular6.1 công bố chính thức tháng 7 năm 2018

Nâng cấp dự án từ Angular5 lên Angular6 thì làm thế nào?

Xem giải pháp ở đây: <https://stackoverflow.com/questions/48970553/want-to-upgrade-project-from-angular-v5-to-angular-v6>

## Một giải pháp Upgrade từ angular 5 tới angular 6 sử dụng <https://update.angular.io/>

![Cái này chụp từ site https://update.angular.io/](/files/-LItzYuJ7azARnSsGNQD)

## Angular Update Guide | 5.2 -> 6.0 for Advanced Apps

### Trước khi cập nhật

Thay thế các provinder`downgradeComponent`, `downgradeInjectable`, `UpgradeComponent`, and `UpgradeModule`imported from `@angular/upgrade`. Instead use the new versions in `@angular/upgrade/static`

If you import any **animations services** or tools from @angular/core, you should import them from @angular/animations

Replace **`ngOutletContext`** with **`ngTemplateOutletContext`**.

Replace **`CollectionChangeRecord`** with **`IterableChangeRecord`**

Anywhere you use **Renderer**, now use **Renderer2**

If you use **preserveQueryParams**, instead use **queryParamsHandling**

Switch from **`HttpModule`** and the `Http` service to **`HttpClientModule`** and the `HttpClient`service. **HttpClient** simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on [angular.io](https://angular.io/guide/http)

If you use DOCUMENT from **@angular/platform-browser,** you should start to import this from **@angular/common**

Anywhere you use **ReflectiveInjector**, now use **StaticInjector**

Choose a value of `off` for **`preserveWhitespaces`** in your `tsconfig.json` to gain the benefits of this setting while the default is still to preserve whitespace.

### Trong khi cập nhật

Make sure you are using [Node 8 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)

Update your Angular CLI globally and locally, and migrate the configuration to the [new angular.json format](https://github.com/angular/angular-cli/wiki/angular-workspace) by running the following:\
\
`npm install -g @angular/cli`\
`npm install @angular/cli`\
`ng update @angular/cli`<br>

Update any `scripts` you may have in your `package.json` to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg `ng build --prod --source-map`) to be POSIX compliant.

Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.\
\
`ng update @angular/core`\
\
After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

In Angular Forms, `AbstractControl#statusChanges` now emits an event of `PENDING` when you call `AbstractControl#markAsPending`. Ensure that if you are filtering or checking events from `statusChanges` that you account for the new event when calling `markAsPending`.

If you use totalTime from an `AnimationEvent` within a disabled Zone, it will no longer report a time of 0. To detect if an animation event is reporting a disabled animation then the `event.disabled`property can be used instead.

ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to begin tracking the old value in your component.

Update Angular Material to the latest version.\
\
`ng update @angular/material`\
\
This will also automatically migrate deprecated APIs.

Use `ng update` or your normal package manager tools to identify and update other dependencies.

If you have TypeScript configured to be strict (if you have set `strict` to `true` in your `tsconfig.json` file), update your `tsconfig.json` to disable `strictPropertyInitialization` or move property initialization from `ngOnInit` to your constructor. You can learn more about this flag on the [TypeScript 2.7 release notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization).

### Sau khi cập nhật

Remove deprecated RxJS 6 features using [rxjs-tslint auto update rules](https://github.com/ReactiveX/rxjs-tslint).\
\
For most applications this will mean running the following two commands:\
\
`npm install -g rxjs-tslint`\
`rxjs-5-to-6-migrate -p src/tsconfig.app.json`

Once you and all of your dependencies have updated to RxJS 6, remove `rxjs-compat`.<br>