forRoot bug ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'AuthModule' was called.

[dongjiyan]

version:

    "@angular/cli": "1.6.5",
    "@angular/*i": "^5.2.0"

ng build --prod model

error:
ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'AuthModule' was called.

    AuthModule.forRoot({
      login_url: `/passport/login`,
      ignores:[
        "passport/login",
        "assets/.*",
        "test.*"
      ]
    })

AuthModule:

@NgModule({
    declarations: [
    ],
    imports: [
    ],
    providers: [

    ],
    exports: [
    ]
})
export class AuthModule {
    public static forRoot(options?:any): ModuleWithProviders {
        if (options && options.ignores && options.ignores.length) {
            /**字符串数组，如果直接写正则会导致angular项目失败，应该是bug */
            options.ignores.map(str => new RegExp(str));
        }
        return {
            ngModule: AuthModule,
            providers: [
                { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
                { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
                { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
                { provide: DA_SERVICE_TOKEN, useClass: TokenService }
            ]
        };
    }
}

[dongjiyan]

have already been solved

[choucry13]

can you share the solution please or the issue url solved ?

[kayvanbree]

Same error here, only on Jenkins. How did you solve it?

[dongjiyan]

Unexplained specific reasons
You can't write anything else before return
before

export class AuthModule {
    public static forRoot(options?:any): ModuleWithProviders {
        **options.ignores.map(str=>new RegExp(str));**
        return {
            ngModule: AuthModule,
            providers: [
                { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
                { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
                { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
                { provide: DA_SERVICE_TOKEN, useClass: TokenService }
            ]
        };
    }
}

after

export class AuthModule {
    public static forRoot(options?:any): ModuleWithProviders {
        return {
            ngModule: AuthModule,
            providers: [
                { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
                { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
                { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
                { provide: DA_SERVICE_TOKEN, useClass: TokenService }
            ]
        };
    }
}
```ts

[kayvanbree]

It's not that you can't write anything before the return. It's the function call you have before your return. I had a new SomethingService(someValue) which gave the error. Seems weird that we can't use a new statement within the forRoot.

[alx-andru]

same issue for me, all I had was a console.log(...)

[kayvanbree]

@dongjiyan Could you re-open the issue please?

[BlairLeduc]

I had a similar problem, and I am posting it here in the hope I can save others time. Originally, I had some code above the return statement, and some lambdas, both of which caused problems for me.

I am creating a feature module, and I need to pass in some data using .forRoot like above that is used in initializing a service. This works with the AOT compiler and ng-packagr.

Below is my code, including the code missing from the previous examples and the addition of the InjectionToken for the case if you are not using a predefined token.

export const Url = new InjectionToken('SettingsUrl');

export function createSettingsService(httpClient: HttpClient, url: string) {
  return new SettingsService(httpClient, url);
}

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule {
  static forRoot(url: string): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        { provide: Url, useValue: url },
        {
          provide: SettingsService,
          useFactory: (createSettingsService),
          deps: [ HttpClient, Url ]
        }
       ]
    };
  }
 }

[kiranjholla]

@BlairLeduc The solution you proposed doesn't seem to work for me with @angular/cli version 6.1.4.

> ng --version
Angular CLI: 6.1.4
Node: 10.4.1
OS: win32 x64
Angular: 6.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.4
@angular-devkit/build-angular      0.7.4
@angular-devkit/build-ng-packagr   0.7.5
@angular-devkit/build-optimizer    0.7.4
@angular-devkit/build-webpack      0.7.4
@angular-devkit/core               0.7.4
@angular-devkit/schematics         0.7.4
@angular/cdk                       6.4.6
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.6
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.1.4
@schematics/angular                0.7.4
@schematics/update                 0.7.4
ng-packagr                         3.0.6
rxjs                               6.2.2
typescript                         2.7.2
webpack                            4.9.2

My Code:

import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppSettingsService } from './services/app-settings.service';

export const AppSettingsObject = new InjectionToken('AppSettingsObject');

export function createAppSettingsService(settings) {
  return new AppSettingsService(settings);
}

@NgModule({
  imports: [
    CommonModule
  ]
})
export class AppSettingsModule {
  static forRoot(config: Object): ModuleWithProviders {
    return {
      ngModule: AppSettingsModule,
      providers: [
        { provide: AppSettingsObject, useValue: config },
        {
          provide: AppSettingsService,
          useFactory: (createAppSettingsService),
          deps: [AppSettingsObject]
        }
      ]
    };
  }
}

Error:

> ng build my-app --prod

Date: 2018-08-29T
Hash: saghsh4ty463f34r4fef
Time: 8585ms
chunk {0} runtime.xxx.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.xxx.css (styles) 102 kB [initial] [rendered]
chunk {2} polyfills.xxx.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.xxx.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'MyAppModule'
  Function calls are not supported in decorators but 'AppSettingsModule' was called.

Any help?

[kiranjholla]

It turns out that the cause of my problem was in a completely different piece of code than what I was focusing on.

But it looks like building it with AOT still causes errors.

Refer angular/angular#23609 (comment), and angular/angular#23609 (comment), for details.

[vaibhavramdasi]

Unexplained specific reasons
You can't write anything else before return
before

export class AuthModule {
    public static forRoot(options?:any): ModuleWithProviders {
        **options.ignores.map(str=>new RegExp(str));**
        return {
            ngModule: AuthModule,
            providers: [
                { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
                { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
                { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
                { provide: DA_SERVICE_TOKEN, useClass: TokenService }
            ]
        };
    }
}

after

export class AuthModule {
    public static forRoot(options?:any): ModuleWithProviders {
        return {
            ngModule: AuthModule,
            providers: [
                { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
                { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
                { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
                { provide: DA_SERVICE_TOKEN, useClass: TokenService }
            ]
        };
    }
}
```ts

This resolved my issue.

[SteveRusin]

Works perfectly with comma operator =)

export class AuthModule {
  public static forRoot(options?:any): ModuleWithProviders {
      
      return (options.ignores.map(str=>new RegExp(str)), {
          ngModule: AuthModule,
          providers: [
              { provide: DA_USER_OPTIONS_TOKEN, useValue: options },
              { provide: DA_OPTIONS_TOKEN, useFactory: optionsFactory, deps: [DA_USER_OPTIONS_TOKEN] },
              { provide: DA_STORE_TOKEN, useClass: LocalStorageStore },
              { provide: DA_SERVICE_TOKEN, useClass: TokenService }
          ]
      });
  }
}

[angular-automatic-lock-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.}