angular: Router: AoT compilation fails when using a function with loadChildren

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.

@samiheikki you cannot call functions in metadata. your code should be statically analizable

@arandehkharghani The statement was intended to imply that there is a large set of code that works in both without modification. It was not intended to imply that all code the works with JIT will work with AoT without modification. Once you have code that works in AoT you can use that same code in JIT without modification; the inverse is not true.

Please start another issue as this is the same error arrived at in a different scenario.

It is confusing to have an issue whose title and initial description is about using the router with AoT turn into an issue discussing using the UpgradeAdapter with AoT. If this gets resolved, which issue was resolved?

re chuckjaz’s suggestion I can say that the solution shouldn’t be updating the source code to get it to work with AOT, because this defeats the statement made by Angular team in link One of the benefits of the introduction of NgModules is that your code does not have to change based on whether you’re running in AoT or just in time (JiT) mode

do this: npm install typescript@next --save typescript@next===typescript 2.1.0 and then change your gulp file to this: let tsProject = ts.createProject(‘tsconfig.json’, { typescript: require(‘typescript’)}); and then update/create your tsconfig.json: { “compilerOptions”: { “target”: “es5”, “module”: “es2015”, “moduleResolution”: “node”, “sourceMap”: true, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “removeComments”: false, “noImplicitAny”: true, “suppressImplicitAnyIndexErrors”: true }, “files”: [ “app/app.module.ts”, “app/main.ts”, “./typings/index.d.ts” ], “angularCompilerOptions”: { “genDir”: “aot”, “skipMetadataEmit”: false } } and try running your ngc -p “path to the tsconfig”

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
  }
];

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)

Hi,

I’m very new to Angular 2 development and I have been working through the Angular 2 Tour of Heroes tutorial replacing the angular2-in-memory-web-api with the Angular 2 MockBackend working in Visual Studio Code.

Once completed I found that running “ng serve” in the VS Code terminal resulted in the error noted above, i.e. “Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function…” webpack: failed to compile.

After reviewing your comments above I realised the problem was a lambda function used in the useFactory metadata for MocBackend. I was able to export the function and the error disappeared.

The odd thing was that when the problem first appeared, before I fixed it by exporting the function, I noticed something odd that I don’t understand. Once I ran “ng serve” in the VS code terminal and it failed, if I then opened and saved any .ts file, it kicked off an automatic build which then ran without error. Each successive automatic build after that ran without error. I understand that the typescript file watcher probably kicked off the build but why would those automatic builds succeed and a manual “ng serve” fail?

Cheers,

Rob C.

@chuckjaz export a function then reference this function name is ok in providers, routes, and decarations but not ok in @Component metadata, Do you have any good solution? thanks

My code as follow: … import { CustomAnimationsService } from ‘…/shared/services/custom-animations.service’; … export function customAnimations() { let animations = new CustomAnimationsService(); return animations.getAnimations(); } @Component({ selector: ‘app-test’, templateUrl: ‘./test.component.html’, styleUrls: [‘./test.component.css’], animations: customAnimations() }) export class TestComponent implements OnInit { … }

@sosnet you need the latest version of the angular-in-memory-web-api (the name has changed) that supports AoT.

https://github.com/angular/in-memory-web-api

@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?

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

Any suggestions? Thanks!

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

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 !

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