The problem is that I'm calling a function inside forRoot method like this:
app.module.ts
import {environment} from '../environments/environment';
...
@NgModule({
imports: [
BrowserModule,
MyModule.forRoot({
config: {
sentryURL: environment.SENTRY_URL <-- This, calls the function
}
}),
HttpClientModule,
...
]})
environemnt.ts
export function loadJSON(filePath) {
const json = loadTextFileAjaxSync(filePath, 'application/json');
return JSON.parse(json);
}
export function loadTextFileAjaxSync(filePath, mimeType) {
const xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', filePath, false);
if (mimeType != null) {
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType(mimeType);
}
}
xmlhttp.send();
if (xmlhttp.status === 200) {
return xmlhttp.responseText;
} else {
return null;
}
}
export const environment = loadJSON('/assets/config.json');
And the config looks like this:
{
"production": "false",
"SENTRY_URL": "https://...@sentry.com/whatever/1"
}
When I do the build with aot, it says:
ERROR in src/app/app.module.ts(41,20): Error during template compile of 'AppModule' Function calls are not supported in decorators but 'loadJSON' was called in 'environment' 'environment' calls 'loadJSON'.
Any ideas??
:)
UPDATED SOLUTION:
My final solution is, in the app, use function getters as Suren Srapyan said. In the library, the forRoot method should look like this:
export const OPTIONS = new InjectionToken<string>('OPTIONS');
export interface MyModuleOptions {
config: {
sentryURLGetter: () => string | Promise<string>;
}
}
export function initialize(options: any) {
console.log('sentryURL', options.config.sentryURLGetter());
return function () {
};
}
@NgModule({
imports: [
CommonModule
]
})
export class MyModule {
static forRoot(options: MyModuleOptions): ModuleWithProviders {
return {
ngModule: MyModule,
providers: [
{provide: OPTIONS, useValue: options},
{
provide: APP_INITIALIZER,
useFactory: initialize,
deps: [OPTIONS],
multi: true
}
]
};
}
}
:D