Skip to content

Files

Latest commit

christopherthielenchristopherthielen
Update branding Angular 1 -> AngularJS and Angular 2 -> Angular
Feb 7, 2017
666fd10 · Feb 7, 2017

History

History
152 lines (113 loc) · 4.79 KB

2017-01-22-ui-router-ng2-1.0.0-beta.4.md

File metadata and controls

152 lines (113 loc) · 4.79 KB
layout excerpt comments permalink
post
ui-router-ng2 1.0.0-beta.4 is released
true
/blog/:title/

{% include toc icon="columns" title="ui-router-ng2 1.0.0-beta.4" %}

Today's 1.0.0-beta.4 release of ui-router-ng2 brings support for Ahead of Time compilation (AoT), support for @ngtools/webpack lazy loading, and much better integration with the Angular CLI.

This release includes more breaking changes than usual. We are making an effort to call out more breaking changes that could potentially break end user applications, even if the prior behavior was unspecified.

Changes in 1.0.0-beta.4

The 1.0.0-beta.4 is a major update, which includes many bug fixes and lots of new features.

Please see the release notes for detailed information, including the BREAKING CHANGES.

Repository split

During the 1.0 alpha phase, we made the UI-Router core agnostic to AngularJS. This enabled us to continue development of angular-ui-router while creating ui-router-ng2 and ui-router-react. The ui-router-ng2 code augments the ui-router-core code adding Angular (2+) specific features and concepts, as well as integrating with the Angular lifecycle and DI system.

During the betas, both ui-router-ng2 and the angular-ui-router for ng1 were built from the same repository. This seemed like a good idea at the time because it allowed PRs to a monolithic repository. However, over time it became apparent that hosting both codebases together was not sustainable. So, we split the repositories into:

This release of ui-router-ng2 is the first one built from the modular UI-Router repositories. Going forward, the release schedules for AngularJS and Angular (2+) will no longer coincide.

For those of you using the ng1-to-ng2 hybrid adapter, stay tuned. We will be changing the approach of the hybrid adapter to accomodate the different release cycles of the AngularJS and 2+ codebases.

Angular CLI

Many users have been asking when we would support the Angular CLI and support Ahead of Time compilation. Finally, ui-router-ng2 has full AoT support, and integrates nicely with the Angular CLI including AoT and Lazy Loading.

To use the Angular CLI and lazy loading, follow this pattern:

Add npm dependency to ui-router

Add ui-router-ng2 (and temporarily also add @angular/router):

npm install --save ui-router-ng2@1.0.0-beta.4 @angular/router

Add UIRouter to the root module

Add UIRouterModule.forRoot to the root NgModule's imports in app.module.ts

export let ROOT_STATES = [];
export function routerConfigFn(router: UIRouter, injector: Injector) {
  // ... do router config
}
imports: [
    UIRouterModule.forRoot({
        states: ROOT_STATES,
        useHash: false,
        otherwise: "/home",
        config: routerConfigFn
    })
...

Generate a child NgModule

Use the CLI to generate a child module. This is a nested NgModule which will be lazy loaded.

ng generate module admin

Create a top-level state as a Future State

A future state is a placeholder for a state that will be defined by a lazy loaded NgModule. Define the future state in the parent module. Append .** to the future state's name, and supply a loadChildren string which points to the lazy NgModule.

In app.module.ts:

export let ROOT_STATES = [
    { 
      name: 'admin.**',
      url: '/admin', 
      loadChildren: './admin/admin.module#AdminModule'
    }
]

Create the final state in the child NgModule

When the child module is lazy loaded, it should fully define the state to replace the Future State placeholder.

In /admin/admin.module.ts:

export const ADMIN_STATES = [
  { name: 'admin', url: '/admin', component: AdminComponent }
]
@NgModule({
  imports: [ 
    UIRouterModule.forChild({ states: ADMIN_STATES });
  ],
  declarations: [ AdminComponent ],
})
export class AdminModule {}

Serve the app

You can now serve or build the app using angular-cli in either AoT mode or JIT mode.

ng serve -aot
ng build -aot --prod --sourcemap

Problems/Feedback?

If you have feedback or problems integrating ui-router-ng2 with angular-cli, please create an issue in the ui-router-ng2 repo.