Is ui-router AoT compatible?

[christopherthielen]

From @kolkov on September 18, 2016 0:38

Compiler errors:

D:\Go\src\inframe\static2>node_modules/.bin/ngc -p tsconfig-aot.json
Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol PublicModule in
 D:/Go/src/inframe/static2/app/public/public.module.ts, resolving symbol PublicModule in D:/Go/src/inframe/static2/app/public/public.module.ts
    at simplifyInContext (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\static_reflector.js:469:23)
    at StaticReflector.simplify (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\static_reflector.js:472:22)
    at StaticReflector.annotations (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\static_reflector.js:61:36)
    at _loop_1 (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\codegen.js:53:54)
    at CodeGenerator.readFileMetadata (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\codegen.js:66:13)
    at D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\codegen.js:100:74
    at Array.map (native)
    at CodeGenerator.codegen (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\codegen.js:100:35)
    at codegen (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\src\main.js:7:81)
    at Object.main (D:\Go\src\inframe\static2\node_modules\@angular\compiler-cli\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
Compilation failed

PublicModule:

var publicState = { name: 'public', url: '/public', component: PublicComponent };
var homeState = { name: 'public.home', url: '/home', component: PublicHomeComponent };
var aboutState = { name: 'public.about', url: '/about', component: PublicAboutComponent };
var userState = { name: 'public.user', url: '/user', component: PublicUserComponent };
var signupState = { name: 'public.user.signup', url: '/signup', component: PublicSignupComponent };
var loginState = { name: 'public.user.login', url: '/login', component: PublicLoginComponent };

@NgModule({
  imports: [
    CommonModule,
    NgbModule,
    FormsModule,
    UIRouterModule.forChild({
      states: [homeState, publicState, aboutState, userState, signupState, loginState]
    }),
  ],
  declarations: [
    PublicComponent,
    PublicAboutComponent,
    PublicHomeComponent,
    NgbdCarouselBasic,
    PublicLoginComponent,
    PublicUserComponent,
    PublicSignupComponent
  ],
  providers:[]
})
export class PublicModule { }

Copied from original issue: angular-ui/ui-router#3012

[christopherthielen]

No, not today. I hope to be AoT ready by 1.0 final.

[christopherthielen]

From @kolkov on September 23, 2016 6:39

OK, thanks!

[christopherthielen]

From @tonimoeckel on December 11, 2016 22:32

Are there any updates on this? The angular-cli version beta.22 forces us to use AOT compatible libs. So this issue is more important for many developers.

[christopherthielen]

From @kolkov on December 12, 2016 2:46

I think beta.4 that will compatible.

[christopherthielen]

From @aitboudad on December 12, 2016 11:55

see #13

[christopherthielen]

AoT compatible in beta.4 release

[miton18]

I'm on "ui-router-ng2": "^1.0.0-beta.4"
and "@angular/cli": "1.0.0-rc.2",
not working yet

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a referen
ce to an exported function (position 22:35 in the original .ts file), resolving symbol States in SOMETHING/src/app/router-states.ts, re
solving symbol AppModule in SOMETHING/src/app/app.module.ts, resolving symbol AppModule in SOMETHING/src/app/app.modu
le.ts, resolving symbol AppModule in SOMETHING/src/app/app.module.ts

[marshall007]

@miton18 it sounds like you're using an anonymous resolve function in one or more of your states. Try exporting those as named functions and referencing them as such in router-states.ts.

[Andras-Csanyi]

@miton18 Check the sample app here, you can find example how to deal with the error you get.

[miton18]

My State :

{
    name: 'localDashboard',
    url: '/:dashboardName/:dashboardVersion',
    component: ViewDashboardComponent,
    resolve: [
      new Resolvable('dashboard', (trans, dStore) => {
        return new Promise((resolve, reject) => {
          let p = trans.params();
          console.log('Search ', p.dashboardName, p.dashboardVersion);
          let d = dStore.search(decodeURIComponent(p.dashboardName), parseInt(p.dashboardVersion, 10));
          if (!d) {
            reject();
          }
          resolve(d.content);
        });
      }, [Transition, LocalDashboardStorageService])
    ]
  }

No anonymous function but an anonymous Resolvable, what's wrong with that ?

[Andras-Csanyi]

@miton18 Honestly, I don't know. I know very little about AoT stuff. I assume anonymity is not favorable.

[miton18]

I tried with exported resolver functions

export const localDashboardResolvable = (trans, dStore) => {
...
name: 'localDashboard',
    url: '/dashboard/local/:dashboardName/:dashboardVersion',
    component: ViewDashboardComponent,
    resolve: [
      { token: 'dashboard', 
        deps: [Transition, LocalDashboardStorageService], 
        resolveFn: localDashboardResolvable 
      }
    ]

same error:

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to
 an exported function (position 31:39 in the original .ts file), resolving symbol urlDashboardResolvable in PATH/router-states.
ts, resolving symbol States in PATH/src/app/router-states.ts, resolving symbol AppModule in PATH/src/app/app.mod
ule.ts, resolving symbol AppModule in PATH/src/app/app.module.ts, resolving symbol AppModule in PATH/src/app/app
.module.ts

[aitboudad]

@miton18 try with

export function localDashboardResolvable(trans, dStore) {

[miton18]

Thx @aitboudad it works...... Why ?

[aitboudad]

lambda can't be statically analyzed, for more details check:

• https://gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60
• https://github.com/rangle/angular-2-aot-sandbox#current-status