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

Created on 24 Jan 2018 · 13Comments · Source: angular/angular-cli

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

Source

dongjiyan

Most helpful comment

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
ts 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

dongjiyan on 31 Jan 2018

👍12 🎉1

All 13 comments

have already been solved

dongjiyan on 24 Jan 2018

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

choucry13 on 26 Jan 2018

👍8

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

kayvanbree on 31 Jan 2018

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

dongjiyan on 31 Jan 2018

👍12 🎉1

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.

kayvanbree on 31 Jan 2018

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

alx-andru on 6 Feb 2018

👍1

@dongjiyan Could you re-open the issue please?

kayvanbree on 9 Feb 2018

👍11

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

BlairLeduc on 14 Mar 2018

👍3

@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 on 29 Aug 2018

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 https://github.com/angular/angular/issues/23609#issuecomment-417142142, and https://github.com/angular/angular/issues/23609#issuecomment-417178804, for details.

kiranjholla on 30 Aug 2018

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.

vaibhavramdasi on 2 Nov 2018

👍2

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