Skip to content

Upgrade from 2.0.0 beta.3 to 2.0.0

Christian Memije edited this page Jan 10, 2019 · 18 revisions

Follow these steps to upgrade to Covalent 2.0.0:

  • Visit the Angular Upgrade Guide to upgrade to Angular 7
    • Select Angular version upgrade from 6.0 (which Covalent 2.0.0-beta.3 is using) to 7.0 (which Covalent 2.0.0 is using)
    • Select other options respective of your projects configuration
    • Complete all the steps indicated
  • Upgrade the Covalent packages applicable to your project to their new versions:
"@covalent/code-editor": "2.0.2", 
"@covalent/core": "2.0.0",
"@covalent/dynamic-forms": "2.0.0",
"@covalent/echarts": "2.0.0",
"@covalent/flavored-markdown": "2.0.0",
"@covalent/highlight": "2.0.0",
"@covalent/http": "2.0.0",
"@covalent/markdown": "2.0.0",
"@covalent/text-editor": "2.0.0",
  • Resolve Covalent specific breaking changes listed below

Breaking change #1: http:

Since @angular/http will soon be deprecated, the implementation of @covalent/http was changed to use @angular/common/http under the covers.

If you still want to keep using the deprecated version of http that uses @angular/http, you can do so by installing @covalent/http-deprec.

Before:

import { HttpInterceptorService, CovalentHttpModule } from '@covalent/http';

After:

import { HttpInterceptorService, CovalentHttpModule } from '@covalent/http-deprec';

Breaking change #2: td-expansion-panel-group:

With the new multi input in td-expansion-panel-group, the expansions will be accordion by default ([multi]="false"). So if you want to keep the same behavior, please add multi as an input.

Before:

<td-expansion-panel-group>

After:

<td-expansion-panel-group multi>

Breaking change #3: Animation directives:

We are favoring our pre-canned animations instead of the directives. This applies to all Covalent animations, not just the examples below.

Before:

<div [tdToggle]="boolean">
<div [tdFade]="boolean">

After:

import { tdCollapseAnimation, tdFadeInOutAnimation } from '@covalent/core/common'
...
  animations: [ tdCollapseAnimation, tdFadeInOutAnimation ],
})
<div [@tdCollapse]="boolean">
<div [@tdFadeInOut]="boolean">

Breaking change #4: Animation functions:

Remove deprecated animation functions. Function animations will no longer be part of covalent, please use the animation constants moving forward. This applies to all Covalent animations, not just the example below.

For example:

Before:

TdCollapseAnimation()

After:

tdCollapseAnimation

Additional Usage info here