How can I use a class that use conditional export in Angular's app.module?


This question is the beggining of the story if you want to understand it deeper.

I'm trying to use this class in app.module:

import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angular'; import { environment } from '../../../environments/environment'; @Injectable({ providedIn: 'root' }) export class MockKeycloakService { init(ign: any) { console.log('[KEYCLOAK] Mocked Keycloak call'); return Promise.resolve(true); } getKeycloakInstance() { return { loadUserInfo: () => { let callback; Promise.resolve().then(() => { callback({ username: '111111111-11', name: 'Whatever Something de Paula', email: 'whatever@gmail.com', }); }); return { success: (fn) => callback = fn }; } } as any; } login() {} logout() {} } const exportKeycloak = environment.production ? KeycloakService : MockKeycloakService; export default exportKeycloak;

This conditional export fakes keycloak call to use in local development and returns the real class in production.

This is the app.module I used:

<...> import { KeycloakAngularModule } from 'keycloak-angular'; import KeycloakService from './shared/services/keycloak-mock.service'; import { initializer } from './app-init'; <...> imports: [ KeycloakAngularModule, <...> ], providers: [ <...>, { provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [KeycloakService, <...>] }, <...> ], bootstrap: [AppComponent] }) export class AppModule { }

related app-init:

import KeycloakService from './shared/services/keycloak.mock.service'; import { KeycloakUser } from './shared/models/keycloakUser'; import { environment } from '../environments/environment'; <...> export function initializer( keycloak: any, <...> ): () => Promise<any> { return (): Promise<any> => { return new Promise(async (res, rej) => { <...> await keycloak.init({ <...> }).then((authenticated: boolean) => { if (!authenticated) return; keycloak .getKeycloakInstance() .loadUserInfo() .success(async (user: KeycloakUser) => { <...> }) }).catch((err: any) => rej(err)); res(); }); };

All works fine in the development mode. I can use the mocked call, and if I enable production in environment.config it makes the real call. But when I try to build it to publish in production server I get the following error:

ERROR in Can't resolve all parameters for ɵ1 in /vagrant/frontend/src/app/app.module.ts: (?, [object Object], [object Object]).

My guess is that the builder task can't understand the conditional export in the mocked class to use in app.module.

So this forced me to use both classes in the app-init and other class I use it and check for the environment mode in every one. I think it would be a much better solution if I could use only one class to treat this and just import it in all places I need.

this is my build command:

ng build --prod=true --configuration=production --delete-output-path --output-path=dist/

How can I overcome this error in the build ? Also... why on earth all works well in dev mode and the build behaves differently ?


I guess you're using Angular 8 or less.

AOT compiler in those versions doesn't support resolving reference to default export.

So you should be more specific:


const KeycloakServiceImpl = environment.production ? KeycloakService : MockKeycloakService; export { KeycloakServiceImpl };


import { KeycloakServiceImpl } from './keycloak-mock.service'; ... deps: [KeycloakServiceImpl]


ng build --prod is an equivalent of ng build --prod=true --configuration=production



  • VSTS Build Definition for Android failing
  • Aligning bullets in JasperReports
  • Why would javascript work on my Sony Ericsson C510 browser, but not javascript + jquery?
  • Android How to capture two consecutive frames from camera
  • How to neatly align text in a textbox and keep it when exporting to .txt
  • How to get some user identity information in HTTP when SESSION_COOKIE_SECURE = True
  • Unit testing entire project hierarchy in Python using unittest in pydev
  • R web scraper with jsessionid
  • MySQL error “empty string given as argument for ! character”
  • Is there any simple Java FTP Server libraries that is embeddable?
  • Java Generics - When to use “T” and “?” [closed]
  • Azure classic cloud service cannot RDP
  • How to align elements in cells of a css grid?
  • Select running balance from table credit debit columns
  • ExtJS: How to use itemSelector for XTemplate having nested loop?
  • GitLab runner on Windows and dealing with & %ERRORLEVEL%
  • How to debug component/typescript code when running Protractor
  • Spring Mvc submit/delete checked (selected) records from table
  • MySQL - Filter records which date is biggest
  • Firebase suddenly reports invalid signature
  • Detect when MathJax has finished loading in UIWebView
  • Sorting Custom Listview Items Using Spinner Android
  • create circular Auto Horizontal Scroll View?
  • SpringBoot don't replacen System variable {user.home} in Spring Tool Suite Version: 3.8.4.RELEA
  • Modifying native query cannot have named parameter bindings?
  • Adding native code to an existing Worklight hybrid app
  • Boolean filter using a timestamp value on a dataframe in Python
  • css: column-count 3, image floating spanning 2, chrome not playing. why?
  • Swift manually rotate view controller
  • select an input by value?
  • java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/SpringDispatcher-ser
  • How to include associated objects using gon in Rails/jQuery
  • Google App Engine Datastore: Dealing with eventual consistency
  • Excel VBA : conditional formatting of sheet1 cells from sheet2 values in excel 2007
  • How to use FirstOrDefault inside Include