Router: AoT compilation fails when using a function with loadChildren

[brandonroberts]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In order to enable lazy loading with Webpack 1, a custom NgModuleFactoryLoader must be implemented to lazy load routes with loadChildren. I've implemented an example loader here.

https://github.com/brandonroberts/router-cli-aot/blob/master/src/app/shared/async-ng-module-loader.ts

The custom load function is being used here: https://github.com/brandonroberts/router-cli-aot/blob/master/src/app/app.routing.ts#L12-L25

When running ngc over the provided repo, an error occurs:

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 (position 23:24 in the original .ts file), resolving symbol crisisCenterRoutes in /router-cli-aot/src/app/app.routing.ts, resolving symbol appRoutes in /router-cli-aot/src/app/app.routing.ts, resolving symbol routing in /router-cli-aot/src/app/app.routing.ts, resolving symbol AppModule in /router-cli-aot/src/app/app.module.ts, resolving symbol AppModule in /router-cli-aot/src/app/app.module.ts

I can comment out the loadChildren line and ngc completes successfully. If I uncomment the line after running ngc and bundle with webpack, the app works as desired with lazy loading.

While #10705 adds support for using a callback function with loadChildren such as loadChildren: () => System.import('lazy.module#LazyModule'), this will cause AoT compilation to fail also with the same error.

Expected/desired behavior

Providing a callback function to loadChildren does not cause AoT compilation to fail when used
with vanilla webpack or some other bundling tool.

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

What is the expected behavior?

What is the motivation / use case for changing the behavior?

Webpack 1/2 use a callback function to provide lazy loading through returning a promise.

Please tell us about your environment:

• Angular version: 2.0.0-rc.5
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5]

[marcalj]

I have the same error in an ngUpgrade app with RC5. Not sure what is causing the error since the stack trace is not pointing to my code.

./node_modules/.bin/ngc -p tsconfig.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 AppModule in /Users/foo/app/scripts/core/app.module.ts, resolving symbol AppModule in /Users/foo/app/scripts/core/app.module.ts
    at simplifyInContext (/Users/foo/node_modules/@angular/compiler-cli/src/static_reflector.js:463:23)
    at StaticReflector.simplify (/Users/foo/node_modules/@angular/compiler-cli/src/static_reflector.js:466:22)
    at StaticReflector.annotations (/Users/foo/node_modules/@angular/compiler-cli/src/static_reflector.js:52:36)
    at _loop_1 (/Users/foo/node_modules/@angular/compiler-cli/src/codegen.js:50:54)
    at CodeGenerator.readFileMetadata (/Users/foo/node_modules/@angular/compiler-cli/src/codegen.js:63:13)
    at /Users/foo/node_modules/@angular/compiler-cli/src/codegen.js:91:74
    at Array.map (native)
    at CodeGenerator.codegen (/Users/foo/node_modules/@angular/compiler-cli/src/codegen.js:91:35)
    at codegen (/Users/foo/node_modules/@angular/compiler-cli/src/main.js:7:69)
    at Object.main (/Users/foo/node_modules/@angular/tsc-wrapped/src/main.js:25:16)
Compilation failed

[Richard87]

Hi guys, I'm not sure if it's related, but it's I get the same error message:

C:\Users\richa\Prosjekt\phono-frontend>node_modules\.bin\ngc -p .
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 (position 37:24 in the original .ts file), resolving symbol AppModule in C:/Users/richa/Prosjekt/phono-frontend/src/app/app.module.ts
    at simplifyInContext (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\static_reflector.js:463:23)
    at StaticReflector.simplify (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\static_reflector.js:466:22)
    at StaticReflector.annotations (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\static_reflector.js:52:36)
    at _loop_1 (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\codegen.js:50:54)
    at CodeGenerator.readFileMetadata (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\codegen.js:63:13)
    at C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\codegen.js:91:74
    at Array.map (native)
    at CodeGenerator.codegen (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\codegen.js:91:35)
    at codegen (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\compiler-cli\src\main.js:7:69)
    at Object.main (C:\Users\richa\Prosjekt\phono-frontend\node_modules\@angular\tsc-wrapped\src\main.js:25:16)
Compilation failed

It complains about my AuthConfig factory in my AppModule:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {appRoutes} from "./app.routes";
import {LoggedInGuard} from "./Security/logged-in.guard";
import {AUTH_PROVIDERS, AuthHttp, AuthConfig, JwtHelper} from "angular2-jwt/angular2-jwt";
import {HttpModule} from "@angular/http";
import { FormsModule} from "@angular/forms";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {DashboardModule} from "./dashboard/dashboard.module";
import {LandingpageComponent} from "./landingpage/landingpage.component";
import {Routes, RouterModule} from "@angular/router";
import {AuthService} from "./Security/auth.service";
import {NgFor, NgIf} from "@angular/common";

export const routes: Routes = [
    { path: '', component: LandingpageComponent}
];

@NgModule({
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        HttpModule,
        NgbModule,
        FormsModule,
        DashboardModule,
        RouterModule.forRoot(routes)
    ],
    bootstrap:    [AppComponent],
    providers:    [
        LoggedInGuard,
        AUTH_PROVIDERS,
        JwtHelper,
        {
            provide: AuthConfig,
            useFactory: () => {
                return new AuthConfig({
                    tokenName: "auth_token",
                    headerName: 'Authorization',
                    headerPrefix: 'Bearer',
                    globalHeaders: [{'Content-Type':'application/json'}],
                    noJwtError: true,
                    noTokenScheme: true
                })
            }
        },
        AuthHttp,
        AuthService,
    ],
    directives: [NgFor, NgIf]
})
export class AppModule {}

(Running on Win10 Angular2.0.0@RC5)

[lpenet]

Same issue for me. This «Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function» makes it impossible to configure a custom provider such as in the following snippet :

@NgModule({
    declarations: [AppComponent,DelaisSchedule],
    imports:      [BrowserModule,
                   routing,
                   FormsModule,
                   ReactiveFormsModule,
                   HttpModule,
                   ButtonModule, CalendarModule, DataTableModule, DialogModule, GrowlModule, InputTextModule, TabViewModule, MenuModule],
    providers:    [new Provider(AuthenticatedHttp, {
                        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new AuthenticatedHttp(backend, defaultOptions),
                        deps: [XHRBackend, RequestOptions]
                    }),
                    APP_ROUTER_PROVIDERS,
                    DelaisLimitesService,
                    DroitsAccesService,
                    SyncService],
    bootstrap:    [AppComponent]
})

Or please indicate a workaround !

[chuckjaz]

Calling functions or calling new is not supported in metadata when using AoT. This includes things like all the examples of above.

The work-around is to introduce an exported function to call such as changing the first example to,

export function loadCrisisCenter() {
  return require('es6-promise!./crisis-center/crisis-center.module')('CrisisCenterModule'));
}

export const crisisCenterRoutes: Routes = [
  {
    path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  {
    path: 'crisis-center',
    loadChildren: loadCrisisCenter
  }
];

@Richard87's example can be transformed into:

export function jwtHelperFactory() {
  return new AuthConfig({
    tokenName: "auth_token",
    headerName: 'Authorization',
    headerPrefix: 'Bearer',
    globalHeaders: [{'Content-Type':'application/json'}],
    noJwtError: true,
    noTokenScheme: true
  });
}

@NgModule({
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        HttpModule,
        NgbModule,
        FormsModule,
        DashboardModule,
        RouterModule.forRoot(routes)
    ],
    bootstrap:    [AppComponent],
    providers:    [
        LoggedInGuard,
        AUTH_PROVIDERS,
        JwtHelper,
        {
            provide: AuthConfig,
            useFactory: jwtHelperFactory
        },
        AuthHttp,
        AuthService,
    ],
})
export class AppModule {}

@lpenet's example can be transformed into:

export function authenticationFactory(backend: XHRBackend, defaultOptions: RequestOptions) {
 return new AuthenticatedHttp(backend, defaultOptions);
}

@NgModule({
    declarations: [AppComponent,DelaisSchedule],
    imports:      [BrowserModule,
                   routing,
                   FormsModule,
                   ReactiveFormsModule,
                   HttpModule,
                   ButtonModule, CalendarModule, DataTableModule, DialogModule, GrowlModule, InputTextModule, TabViewModule, MenuModule],
    providers:    [{provider: AuthenticatedHttp, 
                        useFactory: authenticationFactor,
                        deps: [XHRBackend, RequestOptions]
                    },
                    APP_ROUTER_PROVIDERS,
                    DelaisLimitesService,
                    DroitsAccesService,
                    SyncService],
    bootstrap:    [AppComponent]
})

The reason for this limitation is that the AoT compiler needs to generate the code that calls the factory and there is no way to import a lambda from a module, you can only import an exported symbol.

[Richard87]

Great! Looking forward to try it out! Tested, and solves that problem, no over to the next on :D

[marcalj]

@chuckjaz What about using forwardRef?

...
export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

@NgModule({...})
class AppModule {}

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 AppModule ...

Thanks!

EDITED: I have problems putting upgradeAdapter.upgradeNg1Component('...') inside decorator.

[marcalj]

Ok, cannot use export const ng1Component = upgradeAdapter.upgradeNg1Component('ng1Component'); with ngc...

Any suggestions? Thanks!

[chuckjaz]

Since it depends on how this is used can you send a more complete example.

[alwayrun]

AoT compilation fails when using a function with loadChildren

import { Routes } from '@angular/router';

import { HomeRoutes } from './+home/home.routes';

declare const System: any;
export const lazyload: Type = (a: Function) => a;

export const routes: Routes = [
  ...HomeRoutes,
  { 
    path: 'about', 
    loadChildren: lazyload( () => System.import('./+about/about.module').then((r: any) => r.AboutModule) ),
  }
];

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 (position 12:28 in the original .ts file), resolving symbol routes in /Users/webioix/workspace/code/angular2-aot/src/app.routes.ts, resolving symbol MainModule in /Users/webioix/workspace/code/angular2-aot/src/main.ts, resolving symbol MainModule in /Users/webioix/workspace/code/angular2-aot/src/main.ts
    at simplifyInContext (/Users/webioix/workspace/code/angular2-aot/node_modules/@angular/compiler-cli/src/static_reflector.js:463:23)
    at StaticReflector.simplify (/Users/webioix/workspace/code/angular2-aot/node_modules/@angular/compiler-cli/src/static_reflector.js:466:22)
    at StaticReflector.annotations (/Users/webioix/workspace/code/angular2-aot/node_modules/@angular/compiler-cli/src/static_reflector.js:52:36)

[marcalj]

tsconfig.json

{
    "compilerOptions": {
        "module": "system",
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "declaration": true,
        "removeComments": false,
        "noImplicitReturns": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
//        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "files": [
        "typings/index.d.ts",
        "app/scripts/app.help.ts"
    ],
    "exclude": [
        "node_modules",
        "node_modules-clipping1",
        "bower_components",
        "typings/main.d.ts",
        "typings/main"
    ],
    "angularCompilerOptions": {
        "genDir": ".tmp/scripts/",
        "debug": true
    }
}

Main file loaded by SystemJS
app.ts

import dashboardMain from './modules/dashboard.main'; // app Ng1 modules

// Angular 2
import { upgradeAdapter } from './core/websays-dashboard.module'; // main Ng2 app module

import { Conversation } from './services/conversation'; // Import Ng1 services and components

angular.module('dashboardApp')
    .factory('Conversation', upgradeAdapter.downgradeNg2Provider(Conversation))
    .directive('dashboardSectionClippings',
       <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(DashboardSectionClippingsComponent));

import './core/upgrade_config'; // Upgrade Ng1 services

angular.element(document).ready(function () {
    upgradeAdapter.bootstrap(document.body, [dashboardMain.name]);
});

upgrade_config.ts

import {upgradeAdapter} from './websays-dashboard.module';

upgradeAdapter.upgradeNg1Provider('$filter');
upgradeAdapter.upgradeNg1Provider('$http');
...

websays-dashboard.module.ts (main Ng2 app module)

import { NgModule, forwardRef, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UpgradeAdapter } from '@angular/upgrade';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TOOLTIP_DIRECTIVES, DROPDOWN_DIRECTIVES } from 'ng2-bootstrap';

import { Conversation } from '../services/conversation';
import { ContextualHelpKeyDirective } from './contextual-help-key.directive';
import { TranslateNG1Pipe } from './translate-ng1.pipe';
import { InfiniteScroll } from 'angular2-infinite-scroll';
import { ChartFacetAuthorComponent } from './chart-facet-author.component';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => WebsaysDashboardModule));

@NgModule({
    imports: [CommonModule/*, MdTooltipModule*/],
    declarations: [TOOLTIP_DIRECTIVES, DROPDOWN_DIRECTIVES],
    exports: [TOOLTIP_DIRECTIVES, DROPDOWN_DIRECTIVES]
})
export class WebsaysDashboardUIThirdPartyModule {
}

// NOTE AoT doesn't like functions executed inside decorators (OK, doesn't like this way neither...)
export const dashboardClippingDateEditable:Type = upgradeAdapter.upgradeNg1Component('dashboardClippingDateEditable');

@NgModule({
    imports: [CommonModule, HttpModule, BrowserModule, FormsModule, ReactiveFormsModule,
        WebsaysDashboardUIThirdPartyModule],
    declarations: [
       ContextualHelpKeyDirective, TranslateNG1Pipe, InfiniteScroll, ChartFacetAuthorComponent

        // upgradeAdapter.upgradeNg1Component('...')
        dashboardClippingDateEditable],
    providers: [Conversation]
})
export class WebsaysDashboardModule {
}

[chuckjaz]

The information recorded in annotations is translated into code by the AoT compiler and any references made in the annotations must be to simple exported symbols so having inline lambda or call is not supported because there is no way to extract the code in a way we can generate it correctly in another context.

The error you received is trying to communicate that you ran into one of the unsupported scenario. The key part of the error is Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 12:28 in the original .ts file).

Consider changing your code to something like:

export function loadAboutModule() {
  return System.import('./+about/about.module').then((r: any) => r.AboutModule);
}

export const routes: Routes = [
  HomeRoutes,
  { 
    path: 'about', 
    loadChildren: loadAboutModule
  }
];

[marcalj]

@chuckjaz I'm not using ng2 router (using old ng1 router) and I'm not executing any function on any annotation (as far as I know), as you can see in code example.

[guojenman]

@chuckjaz I've created a bare bone project that reproduces the problem @marcalj and mysef are having.

All this project contains are, 1 ng2 component, 1 ng1 (ngUpgraded) component, and 1 module. Nothing more.

npm run tsc (works)
npm run ngc (does not work)

ngc throws the error that @marcalj posted above

Attached sample project:
ng2bad-build.zip

The problem is as @marcalj indicated, including the return value from upgradeNg1Component in the module declarations prevents ngc from compiling.

Also, should this bug be re-opened or we need to start a new bug?