18297

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

<h3>Question</h3>

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 ?


<h3>Answer1:</h3>

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:

keycloak-mock.service.ts

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

app.module.ts

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

<em>Tip:</em>

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

来源:https://stackoverflow.com/questions/62029756/how-can-i-use-a-class-that-use-conditional-export-in-angulars-app-module

Recommend

  • 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