initial work for Aot support #13

aitboudad · 2016-12-12T11:53:28Z

No description provided.

aitboudad · 2016-12-12T12:40:51Z

src/ng2/uiRouterNgModule.ts

-function makeProviders(module: StatesModule, forRoot: boolean): Provider[] {
-  let providers: Provider[] = [module.configClass]
-      .filter(identity)
-      .map(configClass => ({ provide: configClass, useClass: configClass }));


There is no way to provide conditional service in AOT, users must define configClass manually

Before:

@NgModule({ imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }), ], }) export class AppModule {}

After:

@NgModule({ imports: [ UIRouterModule.forRoot({ configClass: MyUIRouterConfig }), ], providers: [ { provide: MyUIRouterConfig, useClass: MyUIRouterConfig } ], }) export class AppModule {}

kolkov · 2016-12-12T14:24:57Z

I try to build this...

aitboudad · 2016-12-12T14:36:40Z

@kolkov make sure you are using ui-router-core v1.0

kolkov · 2016-12-12T15:01:18Z

Thanks @aitboudad, but where can I find v1.0?
I use this instructions:
https://github.com/ui-router/ng2/blob/master/CONTRIBUTING.md

aitboudad · 2016-12-12T15:07:27Z

cd ui-router-core
git checkout 1.0.1 -b 1.0

kolkov · 2016-12-12T15:11:04Z

Thanks! Done!

kolkov · 2016-12-12T15:18:09Z

I try to build my test app with this builded version:

// Imports for loading & configuring the in-memory web api
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

import {Ng2StateDeclaration, UIRouterModule, UIView, Category, trace} from "ui-router-ng2";
import {NgModule, SystemJsNgModuleLoader, NgModuleFactoryLoader} from "@angular/core";
import {BrowserModule} from '@angular/platform-browser';

//import {MyRootUIRouterConfig} from "./router.config";
import {AppComponent} from "./app.component";
//import {PublicModule} from "./public/public.module";
//import {PrivateModule} from "./private/private.module";
import {MyUIRouterConfig} from "./core/router.config";
import {CoreModule} from "./core/core.module";

export let MAIN_STATES: Ng2StateDeclaration[] = [
  // The top-level app state.
  // This state fills the root <ui-view></ui-view> (defined in index.html) with the AppComponent
  { name: 'app', component: AppComponent }
];

// Enables tracing (check the console) of:
// - TRANSITION transition start, redirect, success, error, ignored
// - VIEWCONFIG ui-view component creation/destruction and viewconfig de/activation
//trace.enable(Category.TRANSITION, Category.VIEWCONFIG);

@NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({
      //states: MAIN_STATES,
      otherwise: { state: 'public.home', params: {} },
      useHash: false,
      configClass: MyUIRouterConfig
    }),
    CoreModule,
    //PublicModule,
    //PrivateModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    // Provide a NgModule lazy loading strategy
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
    { provide: MyUIRouterConfig, useClass: MyUIRouterConfig }
  ],
  bootstrap: [ UIView ]
})
export class AppModule {}

Is it ui-router error or not?

aitboudad · 2016-12-12T15:24:50Z

not sure if it's related, currently I'm using the typescript version not the build one and it's work as expected.

kolkov · 2016-12-12T15:32:52Z

No, I reinstall ui-router-ng2-quickstart and error disappeared.
All work fine! Thanks!
Now I want to try ng build wit AoT...

kolkov · 2016-12-12T22:00:40Z

I can not check the compatibility ((
My angular-cli not working today. Yesterday all is ok, but today nothing helped (
I tried all combination of versions, deinstalling all local and global node_modules etc., but nothing good happened (((

kolkov · 2016-12-13T13:48:54Z

I have found what causes this problem in my case:
If I understand correctly, they filter out the character ! from path, but ! is legal character in Windows path.
angular/angular-cli#3529 (comment)

kolkov · 2016-12-13T14:15:53Z

I try to build simple app from angular-cli starter.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { UIRouterModule } from 'ui-router-ng2';
import {MyRootUIRouterConfig} from "./router.config";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    UIRouterModule.forRoot({
      otherwise: { state: 'app', params: {} },
      useHash: false,
      configClass: MyRootUIRouterConfig
    }),
  ],
  providers: [
    { provide: MyRootUIRouterConfig, useClass: MyRootUIRouterConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {UIRouter} from "ui-router-ng2";
import {Injectable} from "@angular/core";
declare var SystemJS;

/**
 * Create your own configuration class (if necessary) for any root/feature/lazy module.
 *
 * Pass it to the UIRouterModule.forRoot/forChild factory methods as `configClass`.
 *
 * The class will be added to the Injector and instantiate when the module loads.
 */
@Injectable()
export class MyRootUIRouterConfig {
  /** You may inject dependencies into the constructor */
  constructor(uiRouter: UIRouter) {
    // Show the ui-router visualizer
    let vis = window['ui-router-visualizer'];
    vis.visualizer(uiRouter);
  }
}

Only this code I add to starter.

UIRouterModule.forRoot({
      otherwise: { state: 'app', params: {} },
      useHash: false,
      configClass: MyRootUIRouterConfig
    }),
  ],
  providers: [
    { provide: MyRootUIRouterConfig, useClass: MyRootUIRouterConfig }
  ],

tonimoeckel · 2016-12-13T14:19:39Z

@kolkov did you try to use a export function call? Like this: angular/angular#11262

kolkov · 2016-12-13T14:41:53Z

Is it correct? C:\Users\Andy\AppData\Roaming\npm\node_modules\ui-router-core ->

D:\!Projects\TypeScript\ui-router\ui-router-ng2>npm link ui-router-core
D:\!Projects\TypeScript\ui-router\ui-router-ng2\node_modules\ui-router-core -> C:\Users\Andy\AppData\Roaming\npm\node_modules\ui-router-core -> D:\!Projects\TypeScript\ui-router\ui-router-core

D:\!Projects\TypeScript\ui-router\ui-router-ng2>

kolkov · 2016-12-13T14:47:16Z

@tonimoeckel If I comment UIRouterModule.forRoot my app builds correctly

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    /*UIRouterModule.forRoot({
      otherwise: { state: 'app', params: {} },
      useHash: false,
      configClass: MyRootUIRouterConfig
    }),*/
  ],
  providers: [
    { provide: MyRootUIRouterConfig, useClass: MyRootUIRouterConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

aitboudad · 2016-12-13T14:56:27Z

@kolkov you should build using ngc or try importing typescript files from node_modules/
something like

import {UIRouterModule} from ' ../node_modules/ui-router-ng2/src/ng2';

kolkov · 2016-12-13T15:06:45Z

@aitboudad I use ng from angular-cli. It it correct?
If I try `import { UIRouterModule } from '../node_modules/ui-router-ng2/src/ng2';
I have the same error.

`

kolkov · 2016-12-13T15:10:54Z

The same:

aitboudad · 2016-12-13T15:32:29Z

see https://github.com/aitboudad/ui-router-aot-demo

kolkov · 2016-12-13T17:36:36Z

Is this ok? I see some warnings...

aitboudad · 2016-12-13T17:38:44Z

yep, I'll try to fix those warning in the next few days but it should work!

kolkov · 2016-12-13T17:41:27Z

@aitboudad Thanks! Very good news for us! It's work!

kolkov · 2016-12-13T20:17:41Z

How can we rewrite resolve in Starter?

{
      name: 'app.bar.details', url: '/?barId', component: BarDetailsComponent,
       resolve: [
        // Inject the barList (from the parent) and find the correct
        {
          token: 'barDetail',
          deps: ['barList', Transition],
          resolveFn: (barList, trans) =>
            barList.find(item => item.id == trans.params().barId)
        }
      ]
    },

kolkov · 2016-12-14T07:22:39Z

I rewrote my great app using beta.4 and AoT.
Everything works perfectly!
Thanks for all very much!

qvantor · 2016-12-15T11:55:54Z

How soon we could use ui-router without aot problems? Cause now it still a problem

christopherthielen · 2016-12-15T17:55:17Z

Wow, great work everyone.

I'm trying to get angular-ui-router release candidate out the door. After that I'll give this PR the attention it deserves!

hghammoud · 2016-12-26T06:48:27Z

I can't get it to work. I tried all the proposed solutions in this thread. Nada...

Can you pls rehost the working demo?

mackelito · 2016-12-28T22:15:14Z

Also looking for the solution to this... :/
import { UIRouterModule } from "../../node_modules/ui-router-ng2/ng2";
Is not working for me

kolkov · 2016-12-29T00:40:07Z

@mackelito this worked for me

lexigren · 2016-12-29T06:57:45Z

@kolkov can you create some kind of demo, of how you made ui-router work with AOT? Thanks.

mackelito · 2016-12-30T21:29:28Z

@kolkov so you added the index.d.ts file in "/node_modules/ui-router-ng2/"? or is that in your project dir?

tonimoeckel · 2017-01-05T16:34:20Z

@lexigren I've just created a demo with a working version of ui-router-ng2 with AoT enabled. It is based on the latest "dev" branch of @aitboudad fork (see commit: b649735 )
see: https://github.com/tonimoeckel/ui-router-ng2-aot-demo

christopherthielen · 2017-01-11T23:28:25Z

src/ng2/lazyLoadNgModule.ts

@@ -41,7 +41,7 @@ export type NgModuleToLoad = string | ModuleTypeCallback;
 * - Returns the new states array
 */
 export function loadNgModule(moduleToLoad: NgModuleToLoad): (transition: Transition) => Promise<LazyLoadResult> {
-  return function(transition: Transition) {
+  return (transition: Transition) => {


can you explain why this was necessary? I don't see any this

To use function it should be exported, it will not work with AoT when it is passed to an NgModule

amcdnl · 2017-01-12T13:15:30Z

This is epic!

longbowww · 2017-01-12T22:27:05Z

what is the winning config for all of us angular-cli users now? unfortunately the config of @tonimoeckel wont let cli start, just giving the old error msg Calling function 'UIRouterModule', function calls are not supported.

(not using the aot flag)

marshall007 · 2017-01-12T23:43:16Z

@christopherthielen can we tag a -beta.4 release with this patch soon? As others have mentioned, this is preventing usage with ng-cli.

marshall007 · 2017-01-13T00:11:22Z

@christopherthielen @aitboudad I tried compiling under ng-cli using 45c7341 and it was initially complaining that all my resolveFn needed to be exported statically. Once I did that, I'm still getting:

ERROR in Error encountered resolving symbol values statically. Calling function 'OpaqueToken', function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function,
  resolving symbol UIROUTER_ROOT_MODULE in ./node_modules/ui-router-ng2/lib/ng2/uiRouterNgModule.d.ts,
  resolving symbol makeRootProviders in ./node_modules/ui-router-ng2/lib/ng2/uiRouterNgModule.d.ts,
  resolving symbol UIRouterModule.forRoot in ./node_modules/ui-router-ng2/lib/ng2/uiRouterNgModule.d.ts,
  resolving symbol AppModule in ./src/app/app.module.ts,
  resolving symbol AppModule in ./src/app/app.module.ts

Does this mean going forward, we won't be able to use anonymous functions as our resolveFn?
Should AoT be working on master now? Am I missing something or is this still WIP?

[edit]: note, I am not using the --aot flag.

marshall007 · 2017-01-13T20:34:19Z

See angular/angular-cli#3854 (comment)

Apparently the CLI has issues resolving dependencies when nested node_modules directories are present in the project. In this case, I was using npm link ui-router-ng2 to test the most recent changes. Everything worked as expected once I removed ./node_modules/ui-router-ng2/node_modules.

This was referenced Dec 12, 2016

AoT compatible with Angular CLI ui-router/core#11

Closed

Is ui-router AoT compatible? angular-ui/ui-router#3012

Closed

aitboudad commented Dec 12, 2016

View reviewed changes

christopherthielen added the enhancement label Dec 15, 2016

christopherthielen added this to the 1.0.0-beta.4 milestone Dec 15, 2016

aitboudad added 2 commits December 16, 2016 20:14

Aot support

8088ef9

Added ngc.

6dfc226

aitboudad force-pushed the aot branch from 2fb0a79 to 6dfc226 Compare December 16, 2016 20:15

kolkov mentioned this pull request Dec 23, 2016

Relative child-routing #16

Closed

hansl mentioned this pull request Dec 28, 2016

Build / typescript type registration issue with Angular CLI #15

Closed

christopherthielen mentioned this pull request Dec 30, 2016

ERROR in UIRouterModule is not an NgModule angular-ui/ui-router#3232

Closed

[AOT] fixed loadNgModule

271ded8

christopherthielen reviewed Jan 11, 2017

View reviewed changes

Merge branch 'master' into aot

75cc29b

christopherthielen merged commit 45c7341 into ui-router:master Jan 11, 2017

aitboudad deleted the aot branch January 11, 2017 23:49

christopherthielen mentioned this pull request Jan 21, 2017

Is ui-router AoT compatible? #29

Closed

initial work for Aot support #13

initial work for Aot support #13

Conversation

aitboudad commented Dec 12, 2016

aitboudad Dec 12, 2016

Choose a reason for hiding this comment

kolkov commented Dec 12, 2016

aitboudad commented Dec 12, 2016

kolkov commented Dec 12, 2016

aitboudad commented Dec 12, 2016

kolkov commented Dec 12, 2016

kolkov commented Dec 12, 2016

aitboudad commented Dec 12, 2016

kolkov commented Dec 12, 2016

kolkov commented Dec 12, 2016

kolkov commented Dec 13, 2016

kolkov commented Dec 13, 2016

tonimoeckel commented Dec 13, 2016

kolkov commented Dec 13, 2016

kolkov commented Dec 13, 2016

aitboudad commented Dec 13, 2016

kolkov commented Dec 13, 2016

kolkov commented Dec 13, 2016

aitboudad commented Dec 13, 2016

kolkov commented Dec 13, 2016

aitboudad commented Dec 13, 2016

kolkov commented Dec 13, 2016

kolkov commented Dec 13, 2016

kolkov commented Dec 14, 2016

qvantor commented Dec 15, 2016

christopherthielen commented Dec 15, 2016

hghammoud commented Dec 26, 2016

mackelito commented Dec 28, 2016 • edited Loading

kolkov commented Dec 29, 2016

lexigren commented Dec 29, 2016

mackelito commented Dec 30, 2016

tonimoeckel commented Jan 5, 2017 • edited Loading

christopherthielen Jan 11, 2017

Choose a reason for hiding this comment

aitboudad Jan 12, 2017

Choose a reason for hiding this comment

amcdnl commented Jan 12, 2017

longbowww commented Jan 12, 2017

marshall007 commented Jan 12, 2017

marshall007 commented Jan 13, 2017 • edited Loading

marshall007 commented Jan 13, 2017

mackelito commented Dec 28, 2016 •

edited

Loading

tonimoeckel commented Jan 5, 2017 •

edited

Loading

marshall007 commented Jan 13, 2017 •

edited

Loading