Add AoT + lazy loading + Angular-CLI support #31
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…l sync) refactor(location) move location code to /location/* refactor(plugins): Switch to plugins API feat(UrlService): Add UrlService injectable Closes #17
…rom GitHub. Fix main: in package.json.
feat(lazyLoad): automatically unwrap default export (`__esModule`) (allows easier default export of NgModule)
fix(lazyLoad): Update lazyLoad for ui-router-core 3.1
Instead of:
```js
import { loadNgModule } from "ui-router-ng2";
var futureState = {
name: 'lazy.state',
url: '/lazy',
lazyLoad: loadNgModule('./lazy/lazy.module')
}
```
Instead of:
```js
import { loadNgModule } from "ui-router-ng2";
var futureState = {
name: 'lazy.state',
url: '/lazy',
lazyLoad: loadNgModule(() =>
System.import('./lazy/lazy.module').then(result => result.LazyModule))
}
```
Switch to:
```js
var futureState = {
name: 'lazy.state.**',
url: '/lazy',
loadChildren: './lazy/lazy.module#LazyModule'
}
```
---
This change is an incremental step towards seamless AoT and lazy load
support within the angular-cli.
Currently the cli only supports lazy loading of angular router routes.
We expect the AoT compiler and cli (@ngtools/webpack) will be updated to
support AoT lazy loading by other routers (such as ui-router) soon.
- Prepping for using ROUTES token from @angular/router for beta.5, enabling angular-cli
- Inject LocationStrategy into uiRouterFactory wire up location services/config
…ad of an injectable class
BREAKING CHANGE: You no longer configure a module using an Injectable `UIRouterConfig` class. Now you use a function that receives the `UIRouter` and the `Injector`
In 1.0.0-beta.3 you might have a config class like this:
```js
export class MyUIRouterConfig {
constructor(@Inject(UIRouter) router: UIRouter, @Inject(SomeService) myService: SomeService) {
// do something with router and injected service
}
}
which was wired into the root module like this:
```js
@NgModule({
imports: [
UIRouterModule.forRoot({ configClass: MyUIRouterConfig })
]
})
export class AppModule {}
```
In 1.0.0-beta.4 you should switch to a simple function.
The function receives the router: `UIRouter` and injector: `Injector`
```js
export function configureModule(router: UIRouter, injector: Injector) {
// do something with router
router.urlService.rules.type('slug', slugParamType);
// inject other services
const myService: SomeService = injector.get(SomeService);
// do something injected service
myService.init();
}
```
which is now wired using `config: configureModule` instead of `configClass: ...`
```js
@NgModule({
imports: [
UIRouterModule.forRoot({ configClass: MyUIRouterConfig })
]
})
export class AppModule {}
```
…ing commonjs. BREAKING CHANGE: We no longer ship commonjs in the npm package. We now ship esm+es5 (individual files) and UMD bundles only. This brings ui-router-ng2 npm package in line with how the core Angular 2 packages are packaged. We compile and distribute esm+es5 + typescript typings in `lib/` (formerly in `lib-esm/`) We *no longer include the commonjs+es5* (formerly in `lib/`) We now point the `main:` entry to the UMD bundle for commonjs users.
…with ui-router-core 4.x
- This stops rollup from double-bundling the `ui-router-core` code. refactor(UISref): change constructor args order
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.
chore(*): Add @angular/router as dev dep and fix peer dep version chore(*): ui-router-rx to 0.2.1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.