Troubleshooting

This page helps on how to resolve common encountered issues by using OneCX.

General Troubleshooting Steps

When you encounter an issue like an injection error, application is not loading, blank page, etc., please do the following steps first which should resolve most of the common issues:

OneCX Compatibility

Make sure that the App is OneCX compatible and you followed the guidelines.

Disable minified build

  • To better debug your App, you need to disable the minified build.

  • In your project.json or angular.json file, set "optimization" to false in the build options which will disable minification of the build files for all configurations (production, development).:

Example for all builds
{
...
"targets": {
    ...
    "build": {
        ...
        "options": {
            "optimization": false,
            ...
        }
        ...
    }
    ...
  }
}
...

  • If you want to disable minification only for a specific build, set "optimization" to false in the respective configuration:

Example for production build
{
...
"targets": {
    ...
    "build": {
        ...
        "configurations": {
            "production": {
                "optimization": false,
                ...
            }
            ...
        }
        ...
    }
    ...
  }
}
...

  • If you get an error like this: Error: bundle initial exceeded maximum budget. Budget 1.05 MB was not met by 267.90 kB with a total of 1.32 MB.

  • Increase the budget in the budgets section of your project.json or angular.json file.

Example budgets section
{
...
"targets": {
    ...
    "build": {
        ...
        "configurations": {
            "production": {
                "optimization": false,
                "budgets": [
                    {
                      ...
                      "maximumError": "1.5mb"
                    },
                    ...
                ]
                ...
            }
            ...
        }
        ...
    }
    ...
  }
}
...

  • In this example you can see the difference between a minified and a non-minified code snippet in the DevTool’s Sources tab.

Table 1. Example code snippet in DevTool’s Sources tab
minified non-minified 
...
 ), (0,
        x.on)(k.searchButtonClicked, (t, {searchCriteria: s}) => ({
            ...t,
            criteria: s
        })), (0,
        x.on)(k.resetButtonClicked, t => ({
            ...t,
            criteria: {}
        })), (0,
        x.on)(k.tenantSearchResultsReceived, (t, {results: s}) => ({
            ...t,
            results: s
        })), (0,

...
 
...
search(formValue) {
      const searchCriteria = Object.entries(formValue.getRawValue())
        .reduce((acc, [key, value]) => ({
        ...acc,
        [key]: this.isVisible(key) ?
          (0,_shared_utils_isValidDate_utils__WEBPACK_IMPORTED_MODULE_5__
            .isValidDate)(value) ?
            new Date(Date.UTC(value.getFullYear(), value.getMonth(),
              value.getDate(), value.getHours(), value.getMinutes(),
              value.getSeconds())) :
            value {vbar}{vbar} null : null
      }), {});
      this.store.dispatch(_tenant_search_actions__WEBPACK_IMPORTED_MODULE_6__
        .TenantSearchActions.searchButtonClicked({
        searchCriteria
      }));
    }
    resetSearch() {
      this.store.dispatch(_tenant_search_actions__WEBPACK_IMPORTED_MODULE_6__
        .TenantSearchActions.resetButtonClicked());
    }
...

  • In this example you can see the difference between a minified and a non-minified NullInjectorError message in the console.

Table 2. Example NullInjectorError non-minified in App
minified non-minified 
ERROR NullInjectorError: R3InjectorError[PortalDialogService -> i -> i -> i]:
  NullInjectorError: No provider for i!
 
ERROR NullInjectorError: R3InjectorError[i -> i -> i -> i]:
  NullInjectorError: No provider for i!

  • In cases like above you are still seeing names like "i" in the non-minified error message, then you should additionally disable the minified build for the Shell locally, too.

    • Clone the Shell repository https://github.com/onecx/onecx-shell-ui

    • Run npm install

    • Set "optimization" to false in the project.json file of the Shell.

    • Depending on your App’s Angular version, set the "optimization" option in the corresponding pre_loaders/angular-<version>/project.json file.

    • E.g.: for Angular 18 in the pre_loaders/angular-18/project.json

    • Then to start Shell locally, refer to Automatic Image Build which builds from your local source code each time you run docker compose or Manual Image Build for manual image building.

Table 3. Example NullInjectorError non-minified in App + Shell
App non-minified App + Shell non-minified 
ERROR NullInjectorError: R3InjectorError[PortalDialogService -> i -> i -> i]:
  NullInjectorError: No provider for i!
 
ERROR NullInjectorError: R3InjectorError[PortalDialogService -> DialogService -> DialogService -> DialogService]:
  NullInjectorError: No provider for DialogService!

Webpack Configuration

  • Verify if all necessary packages are shared in your webpack.config.js:

    • angular packages

    • onecx packages

    • rxjs

    • primeng

    • ngx-translate

  • Check in your package.json which of the mentioned packages are installed:

Example package.json
...
"dependencies": {
    ...
    "@angular/core": "^18.2.12",
    "@angular/forms": "^18.2.12",
    "@angular/platform-browser": "^18.2.12",
    "@angular/router": "^18.2.12",
    "@ngx-translate/core": "^15.0.0",
    "@onecx/accelerator": "^5.48.3",
    "@onecx/integration-interface": "^5.48.3",
    "primeng": "^17.18.11",
    "rxjs": "~7.8.1",
    ...
  },
...

  • Check your webpack.config.json if those packages are shared and add them if they are missing:

Table 4. Example webpack.config.js
Correct (✓) Incorrect (✗)
webpack.config.js
...
  shared: share({
    '@angular/common': {
      requiredVersion: 'auto',
      includeSecondaries: { skip: ['@angular/common/http/testing'] },
    },
    '@angular/common/http': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/core': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/platform-browser': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },
    '@ngx-translate/core': { requiredVersion: 'auto' },
    primeng: { requiredVersion: 'auto', includeSecondaries: true },
    rxjs: { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/integration-interface': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    ...
  }),
...
webpack.config.js
...
shared: share({
    '@angular/common': {
      requiredVersion: 'auto',
      includeSecondaries: { skip: ['@angular/common/http/testing'] },
    },
    '@angular/common/http': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/platform-browser': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },
    '@ngx-translate/core': { requiredVersion: 'auto' },
    primeng: { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    // MISSING: '@angular/core'
    // MISSING: 'rxjs'
    // MISSING: '@onecx/integration-interface'
    ...
  }),
...

Installed Packages

  • Verify if all shared packages have the caret '^' sign in your package.json (except for rxjs it is a tilde '~').

  • For that, first check your webpack.config.js which packages are being shared:

Example webpack.config.js
...
    shared: share({
    '@angular/common': {
      requiredVersion: 'auto',
      includeSecondaries: { skip: ['@angular/common/http/testing'] },
    },
    '@angular/common/http': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/core': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/forms': { requiredVersion: 'auto', includeSecondaries: true },
    '@angular/platform-browser': {
      requiredVersion: 'auto',
      includeSecondaries: true,
    },
    '@angular/router': { requiredVersion: 'auto', includeSecondaries: true },
    '@ngx-translate/core': { requiredVersion: 'auto' },
    primeng: { requiredVersion: 'auto', includeSecondaries: true },
    '@onecx/accelerator': { requiredVersion: 'auto', includeSecondaries: true },
    ...
  }),
...

  • Then check if the correct range (caret '^' or tilde '~' for rxjs) is present for the shared packages in your package.json:

Table 5. Example package.json
Correct (✓) Incorrect (✗)
package.json
...
"dependencies": {
    ...
    "@angular/common": "^18.2.12",
    "@angular/core": "^18.2.12",
    "@angular/forms": "^18.2.12",
    "@angular/platform-browser": "^18.2.12",
    "@angular/router": "^18.2.12",
    "@ngx-translate/core": "^15.0.0",
    "@onecx/accelerator": "^5.48.3",
    "@onecx/integration-interface": "^5.48.3",
    "primeng": "^17.18.11",
    "rxjs": "~7.8.1",
    ...
  },
...
package.json
...
"dependencies": {
    ...
    "@angular/common": "18.2.12",
    "@angular/core": "18.2.12",
    "@angular/forms": "18.2.12",
    "@angular/platform-browser": "18.2.12",
    "@angular/router": "18.2.12",
    "@ngx-translate/core": "15.0.0",
    "@onecx/accelerator": "5.48.3",
    "@onecx/integration-interface": "5.48.3",
    "primeng": "17.18.11",
    "rxjs": "7.8.1",
    ...
  },
...

Clean Install and Build

Do a clean install and build of the App:

  • Remove .angular and .nx folder

  • Remove node_modules and package-lock.json

  • Run following command to clear the npm cache:

  npm cache clean --force

  • Install all packages:

  npm install

  • Build the App

Application Setup/Settings

  • Verify if the Remote Module name in the webpack.config.js is the same as the Remote Module setting in the Application Store.

  • Navigate to the Application Store → open the App → click on the 'Components' tab → open the 'Module' UI Component → check App ID:

Table 6. Example webpack.config.js and Application Store setting (remote module name)
webpack.config.js Application Store 
...
const config = withModuleFederationPlugin({
  name: 'onecx-workspace-ui',
  filename: 'remoteEntry.js',
  exposes: {
    './OneCXWorkspaceModule': 'src/main.ts',
    ...
    }
  }),
...
application store remote module name

  • Verify if the tag name for the component is the same as the tag name set in the Application Store:

Table 7. Example values.yaml and Application Store setting (tag name)
values.yaml Application Store
values.yaml
...
microfrontend:
  enabled: true
  specs:
    main:
      exposedModule: "./OneCXWorkspaceModule"
      description: "OneCX Workspace UI"
      note: "OneCX Workspace UI auto import via MF operator"
      type: MODULE
      technology: WEBCOMPONENTMODULE
      remoteName: onecx-workspace
      tagName: ocx-workspace-component
      endpoints:
        - name: workspace-detail
          path: /{workspace-name}
...
application store remote module tag name

  • Make sure you are using the latest version of the Shell.

  • Verify if the Angular version of the App is lower than the Shell’s.

  • Go to the browser’s DevTools and run in the console following command:

DevTools Console
window['onecxWebpackContainer']

  • You will get a list of all the shared packages.

  • Check e.g. the @angular/core entry to see the versions:

devtools webpack shared packages

TypeError: The 'compilation' argument must be an instance of Compilation

The error typically occurs when there’s more than 1 version of webpack used by the packages. It is a common issue if the @angular-devkit/build-angular library is used. To resolve the issue check the webpack versions requested by the packages and adjust so only one version remains. In order to check webpack versions execute npm ls webpack command. This command is going to show the exact package version used per dependency.

Specific issues

The 'compilation' argument must be an instance of Compilation

Errors indicating issues with webpack compilation are related to multiple versions used in the project. In order to fix the issue:

  • run npm ls webpack

  • identify packages with different webpack version

  • ensure only 1 version of webpack is present

To use only 1 version of webpack, you should adjust the versions of the packages that depend on webpack to use the same version. You can do this by updating the package.json file to specify compatible versions or by using npm overrides feature.

Application is not showing up and "t is not a function" error is in console

If the application is not showing up and errors like t is not a function are in the console, then most likely the builder and the Angular packages used in the project are not compatible. To resolve the issue:

  • make sure that the builder used in the project is compatible with the Angular version used

    • e.g., for Angular 18 and ngx-build-plus package use version ^18.0.0