Compilation issue after updating the angular2 to angular4

Question

After updated version of angular4 from 2, getting the below error on compile.

Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

provideAuth({
    tokenName: 'token',
    tokenGetter: () => localStorage.getItem('token') 
})

Answer 1

Try storing the token fetch on a variable before assigning it, like so:

public function(): void {
    let token: string = localStorage.getItem('token');
    provideAuth({
        tokenName: 'token',
        tokenGetter: token
    });
}

Answer 2

This is because you're compiling with AOT compilation (which is a good thing, but has some limitations).

In this case, its because AOT does not support lambda functions in provider setup. See the AOT documentation. To fix it, just replace your lambda with a named and exported function:

export function getToken() { localStorage.getItem('token'); }

and then reference that instead:

provideAuth({
    tokenName: 'token',
    tokenGetter: getToken
})

There are quite a few other gotchas with AOT compilation, many of which are listed here: https://medium.com/spektrakel-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f

You can of course alternatively opt to compile without AOT by omitting the --aot argument from your ng build command. But that will result in a larger, slower application.