Wrong error about non exported function for decorators

I’m researching a lot but all I found is “do this and it will work” but it does not. Also the error message can not be correct and it is working when I save the file again.

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request

Current behavior When I start ng serve and everything is compiled already I get the following 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 17:12 in the original .ts file), resolving symbol TranslateLogHandler in /home/iras/work/angular2-cli-t
est/node_modules/angular2-translator/src/TranslateService.ts, resolving symbol TranslateLogHandler in /home/iras/work/angular2-cli-test/node_modules/angular2-translator/index.d.ts, resolving symbol AppModule in /home/iras/work/angular2-cli-test/src/app/app.module.ts, resolving symbol AppModul
e in /home/iras/work/angular2-cli-test/src/app/app.module.ts

Yes, of course you will write use an exported function - please have a look in Minimal reproduction of the problem with instructions.

When I save/touch the file (update mtime from file) while ng-serve is running. It gets recompiled without error: webpack: Compiled successfully..

Expected behavior It should always work not just sometimes.

Minimal reproduction of the problem with instructions Create a new project ng new justAnotherBug. And a file src/app/Logger.ts with the following content:

export const Logger = {
  debug: () => {},
  error: (message) => console && console.error && console.error(message),
  info: () => {},
}

Write this in your app.module.ts:

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 { Logger } from './Logger';

export function getLogger() {
  return {
      debug: () => {},
      error: (message) => console && console.error && console.error(message),
      info: (message) => console && console.log && console.log(message),
  };
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    { provide: Logger, useFactory: getLogger, deps: [] }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finally run ng serve. When it works: restart ng serve without modifying the file again (first time it will work usually).

What is the motivation / use case for changing the behavior? The use case is to overwrite the Logger for this application (the Logger could be from any third party module).

Please tell us about your environment:

$ uname -sr
Linux 4.9.13-1-MANJARO
$ npm --version
4.4.1
$ node --version
v7.7.2
node: 7.7.2
$ npm list |egrep '(\@angular|typescript)'
├─┬ @angular/cli@1.0.0-rc.2
│ ├─┬ @angular/tsc-wrapped@0.5.2
│ ├── typescript@2.1.6
├── @angular/common@2.4.10
├── @angular/compiler@2.4.10
├─┬ @angular/compiler-cli@2.4.10
├── @angular/core@2.4.10
├── @angular/forms@2.4.10
├── @angular/http@2.4.10
├── @angular/platform-browser@2.4.10
├── @angular/platform-browser-dynamic@2.4.10
├── @angular/router@3.4.10
├── typescript@2.0.10

[DzmitryShylovich]

The problem here is that Logger is an object. You can’t use arbitrary objects as provider tokens. Use:

1. string
2. InjectionToken
3. class/abstract class

and it will work

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}