PatternFly Angular 3.0 Migration Guide

Angular-PatternFly 3.0 Migration Guide

This guide details how to upgrade from PatternFly Angular 2.x to our latest version, PatternFly Angular 3.0. Using base PatternFly? Use the PatternFly 3.0 upgrade instead.

Release Notes:

• Updated devDependency to PatternFly for 3.0.0

Enhancements:

** These changes are not backwards compatible! **

• Several directive name changes have been made to be more inline with base PatternFly terminology.
• The CSS selectors have also been changed from pf- to -pf to be more inline with PatternFly conventions.

Angular-PatternFly 3.0 is (almost) backwards compatible with v2.x.

There are three major changes that you should know about:

• The PatternFly dependencies (bower_components/patternfly/components) are no longer committed to the PatternFly repo. That means you must update any Angular-PatternFly <script> tags to refer to the new locations. For complete documentation please refer to PatternFly 3.0 Migration Guide
• Several Angular-PatternFly directives have been renamed to be more in-sync with base PatternFly terminology.

Get Angular-PatternFly 3.0

The first step is to upgrade the Angular-PatternFly codebase. This process will be different depending on how your project manages its dependencies.

Upgrade using Bower:

  $ bower install angular-patternfly --save

Accessing PatternFly Dependencies:

Prior to v3.0 PatternFly dependencies were checked into the PatternFly repo under ‘/components’ and applications would access them via:

  <script src="bower_components/patternfly/components/c3/c3.min.js"></script>

As of v3.0 the ‘patternfly/components’ directory is no longer committed to the repo. That means you must update any Angular-PatternFly <script> tags to point the the new location.

For example, after executing:

  $ bower install angular-patternfly --save

The dependencies for Angular-PatternFly and PatternFly are installed directly into the “bower_components”. This simply means that the PatternFly c3 dependency will no longer be available under ‘bower_components/patternfly/components/c3’, but rather it will be directly accessible under ‘bower_components/c3’.

The updated script tag would be:

<script src="bower_components/c3/c3.min.js"></script>

For complete documentation please refer to PatternFly 3.0 Migration Guide.

Renamed Angular-PatternFly Directives

The following Angular-PatternFly directives have been renamed to be more in-sync with base PatternFly terminology. You must change these directive names in your HTML files:

• CSS selectors have also been changed from ‘pf-’ to ‘-pf’ to be more inline with PatternFly conventions.

For more information on upgrading to v3.0

Send an email to the mailing list or reach out on Gitter or Freenode at #patternfly.