Uncaught Error: Uncaught (in promise): Error: The `apiUrl` option is required

[thekage91]

Hi,
I have a problem with CubeJs for Angular and I can't figure out how to resolve it.
I have imported CubeJsClientModule into my module and loaded the options in the forRoot method, see the code below.

  CubejsClientModule.forRoot({
      token: window.localStorage.getItem(environment.token_name),
      options: {
        apiUrl: "https://xxxxx.herokuapp.com/cubejs-api/v1"
      }
    }),

The module is lazy loaded, so, CubeJS is loaded only when the user is authenticated and navigate to specific routes. I want to clarify that the problems still persist even if I import the CubeJsClientModule into the AppModule (the root module)

Our CubeJs API is authenticated and I load the token from my localStorage.
If I try to logout and login from our app, the package return me this error:

polyfills.js:3422 Uncaught Error: Uncaught (in promise): Error: The `apiUrl` option is required
Error: The `apiUrl` option is required
    at new CubejsApi (vendor.js:138046)
    at index (vendor.js:138531)
    at CubejsClient.apiInstace (vendor.js:188309)
    at CubejsClient.<anonymous> (vendor.js:188360)
    at Generator.next (<anonymous>)
    at vendor.js:74743
    at new ZoneAwarePromise (polyfills.js:3584)
    at __awaiter (vendor.js:74739)
    at Object.next (vendor.js:188358)
    at SafeSubscriber.__tryOrUnsub (vendor.js:67321)
    at resolvePromise (polyfills.js:3422)
    at new ZoneAwarePromise (polyfills.js:3587)
    at __awaiter (vendor.js:74739)
    at Object.next (vendor.js:188358)
    at SafeSubscriber.__tryOrUnsub (vendor.js:67321)
    at SafeSubscriber.next (vendor.js:67260)
    at Subscriber._next (vendor.js:67210)
    at Subscriber.next (vendor.js:67187)
    at BehaviorSubject._subscribe (vendor.js:72746)
    at BehaviorSubject._trySubscribe (vendor.js:114283)

If I refresh the app after login, everything goes well.
The options that I pass to the package are correct and contain the token with the options property contains the apiUrl endpoint but I don't know why CubeJs seems that doesn't load the informations correctly.

Anyone can help me understand where the problem is?

I followed all the instructions in the documentation, the setup is really straightforward so I don't know where I'm doing it wrong.

Thank you very much

[thekage91]

I have an update and hope that this will help to understand the problem

If I try to hardcode the JWT code directly into the forRoot method without loading it from localStorage everything works correctly. I think that the problem isn't the absence of the apiUrl parameters but the absence of the token parameter into the forRoot options.

This not works

  CubejsClientModule.forRoot({
      token: window.localStorage.getItem(environment.token_name),
      options: {
        apiUrl: "https://xxxxx.herokuapp.com/cubejs-api/v1"
      }
    }),

This works

  CubejsClientModule.forRoot({
      token: xxxxx-token-xxxx,
      options: {
        apiUrl: "https://xxxxx.herokuapp.com/cubejs-api/v1"
      }
    }),

The token is in the localStorage and the module is loaded only when the user is authenticated, if I try to debug or print it, I can see in the console. I can't hardcode the token because different user have different tokens and data into CubeJs.

[springyboy]

I don't know if this is still an issue, but one solution is to provide the CubeJs config using a factory function. So what we did (may not be correct) is rather than calling CubejsClientModule.forRoot(yourconfighere) which just returns a ModuleWithProviders, is to replace it with the following;

{
            ngModule: CubejsClientModule,
            providers: [
                CubejsClient,
                {
                    provide: 'config',
                    useFactory: cubejsConfigFactory,
                    deps: [AuthService]
                }
            ]
        }

Our token is provided by an auth service, so that's a dependancy for the config provider. Our factory function then looks like this;

const cubejsConfigFactory =
    (authService: AuthService) => {
        return {
            token: () => authService.accessToken$.toPromise(),
            options: {apiUrl: environment.analyticsApiUrl}
        };
    };

Hope that helps.