Skip to content

Commit

Permalink
feat(AoT): Enable AoT with Lazy Loading. Enable Angular CLI support.
Browse files Browse the repository at this point in the history
Enables AoT compilation support and better Lazy Loading support.
When `@ngtools/webpack` is being used, this also enables automatic code
splitting + lazy loading.  Because `angular-cli` uses `@ngtools/webpack`,
this change also enables `angular-cli` support.

To use the new feature, define a `Future State` (by appending `.**` to
the state name).  Give the state a `loadChildren` property which points
to a nested NgModule that will be lazy loaded.  Use the same syntax that
`@ngtools/webpack` expects: `<pathToModule>#<name of export>`.

```js
export var futureFooState = {
  name: 'foo.**',
  url: '/foo',
  loadChildren: './foo/foo.module#FooModule'
};

...

  imports: [
    UIRouterModule.forRoot({ states: [ futureFooState  ] }),
...
```

In your nested module, add a state named `foo` (without the `.**`). This
nested module's `foo` state will replace the `foo.**` Future State (placeholder).

```js
export var fooState = {
  name: 'foo',
  url: '/foo',
  resolve: {
    fooData: fooResolveFn
  },
  onEnter: onEnterFooFn,
  data: {
    requiresAuth: true
  }
};

...

  imports: [
    UIRouterModule.forChild({ states: [ fooState ] }),
...
```

This change works by providing the same DI token as the `@angular/router`
which is then analyzed for lazy loading by `@ngtools/webpack`.
The `ROUTES` token is deep imported from `@angular/router/src/router_config_loader`.
The module's states are provided on the ROUTES token, which enables the
webpack tooling to analyze the states, looking for `loadChildren`.

When the UMD bundle is built, the ROUTES token is pulled in from
`@angular/router` (and duplicated), but should not be used by anything.

Because we pull in the token from the `@angular/router` package, we have
a temporary dependency on the angular router.  This is a temporary hack
until the `@ngtools/webpack` project makes itself router-agnostic.
  • Loading branch information
christopherthielen committed Jan 22, 2017
1 parent c2bd3ca commit eb5d599
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/uiRouterNgModule.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import { UIView } from "./directives/uiView";
import { UrlRuleHandlerFn, TargetState, TargetStateDef, UIRouter } from "ui-router-core";
import { _UIROUTER_INSTANCE_PROVIDERS, _UIROUTER_SERVICE_PROVIDERS } from "./providers";

// import { ROUTES } from "@angular/router/src/router_config_loader";
import { ROUTES } from "@angular/router/src/router_config_loader";
/** @hidden */ export const UIROUTER_ROOT_MODULE = new OpaqueToken("UIRouter Root Module");
/** @hidden */ export const UIROUTER_MODULE_TOKEN = new OpaqueToken("UIRouter Module");
/** @hidden */ export const UIROUTER_STATES = new OpaqueToken("UIRouter States");
/** @hidden */ export const ROUTES = UIROUTER_STATES;
// /** @hidden */ export const ROUTES = UIROUTER_STATES;

export function makeRootProviders(module: StatesModule): Provider[] {
return [
Expand Down

0 comments on commit eb5d599

Please sign in to comment.