Hello.
I have a single-spa micro frontend web application that's written in Angular 16 and wrapped in React 19 that's having issues recognizing the Kendo UI for Angular license at runtime in the browser.
The following warning is displayed in the browser's DevTools after the application has loaded:
I've reviewed the cause of the error message listed at kendo-angular-ui/components/licensing/license-errors-and-warnings and have verified that I have an active license for Kendo UI for Angular, as shown below:
I've also followed the steps listed at kendo-angular-ui/components/licensing to ensure the license is properly downloaded and activated, with the following result:
Lastly, I've tried removing the node_modules folder and running yarn install after ensuring that the project's .angular folder has been deleted.
However, the warning messaged mentioned at the start is still being displayed.
Here's what packages are currently installed for the project in package.json:
{
"packageManager": "yarn@1.22.22",
"dependencies": {
"@angular-architects/module-federation-runtime": "^16.0.3",
"@angular-devkit/core": "~16.2.10",
"@angular-devkit/schematics": "~16.2.10",
"@angular/animations": "~16.2.12",
"@angular/common": "~16.2.12",
"@angular/compiler": "~16.2.12",
"@angular/core": "~16.2.12",
"@angular/forms": "~16.2.12",
"@angular/localize": "~16.2.12",
"@angular/platform-browser": "~16.2.12",
"@angular/platform-browser-dynamic": "~16.2.12",
"@angular/router": "~16.2.12",
"@apollo/client": "^3.4.5",
"@babel/core": "^7.0.0-0",
"@babel/plugin-proposal-dynamic-import": "^7.18.6",
"@fortawesome/angular-fontawesome": "~0.13.0",
"@fortawesome/fontawesome-pro": "^6.4.2",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/pro-light-svg-icons": "^6.4.2",
"@fortawesome/pro-regular-svg-icons": "^6.4.2",
"@fortawesome/pro-solid-svg-icons": "^6.4.2",
"@fortawesome/pro-thin-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@ng-select/ng-select": "~12.0.4",
"@ngx-translate/core": "~15.0.0",
"@popperjs/core": "2.11.8",
"@progress/kendo-angular-buttons": "^14.0.1",
"@progress/kendo-angular-charts": "^14.0.1",
"@progress/kendo-angular-common": "^14.0.1",
"@progress/kendo-angular-dateinputs": "^14.0.1",
"@progress/kendo-angular-dialog": "^14.0.1",
"@progress/kendo-angular-dropdowns": "^14.0.1",
"@progress/kendo-angular-excel-export": "^14.0.1",
"@progress/kendo-angular-grid": "^14.0.1",
"@progress/kendo-angular-icons": "^14.0.1",
"@progress/kendo-angular-inputs": "^14.0.1",
"@progress/kendo-angular-intl": "^14.0.1",
"@progress/kendo-angular-l10n": "^14.0.1",
"@progress/kendo-angular-label": "^14.0.1",
"@progress/kendo-angular-layout": "^14.0.1",
"@progress/kendo-angular-menu": "^14.0.1",
"@progress/kendo-angular-navigation": "^14.0.1",
"@progress/kendo-angular-notification": "^14.0.1",
"@progress/kendo-angular-pager": "^14.0.1",
"@progress/kendo-angular-pdf-export": "^14.0.1",
"@progress/kendo-angular-popup": "^14.0.1",
"@progress/kendo-angular-progressbar": "^14.0.1",
"@progress/kendo-angular-schematics": "^14.0.1",
"@progress/kendo-angular-tooltip": "^14.0.1",
"@progress/kendo-angular-treeview": "^14.0.1",
"@progress/kendo-angular-upload": "^14.0.1",
"@progress/kendo-angular-utils": "^14.0.1",
"@progress/kendo-data-query": "1.7.0",
"@progress/kendo-drawing": "1.18.0",
"@progress/kendo-file-saver": "1.1.1",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-svg-icons": "2.0.0",
"@progress/kendo-theme-bootstrap": "7.0.1",
"@progress/kendo-theme-default": "7.0.1",
"@progress/kendo-webspeech-common": "^1.0.1",
"@schematics/angular": "16.2.8",
"@sweetalert2/ngx-sweetalert2": "~12.2.0",
"advanced-search-query": "^5.1.1",
"angular-favicon": "^1.0.9",
"autoprefixer": "^10.0.2",
"axios": "~0.17.0",
"babel-plugin-macros": "^3.1.0",
"classnames": "^2.3.2",
"core-js": "~3.34.0",
"cross-fetch": "4.0.0",
"date-fns": "~2.30.0",
"deep-freeze": "^0.0.1",
"graphql": "^15.5.1",
"guid-typescript": "^1.0.9",
"hammerjs": "^2.0.8",
"i18next": "^23.7.8",
"js-cookie": "^3.0.5",
"jsoncrush": "~1.1.8",
"jwt-decode": "^4.0.0",
"jwt-js-decode": "^1.9.0",
"lodash": "~4.17.21",
"lodash-es": "~4.17.21",
"mini-css-extract-plugin": "^2.9.1",
"module-federation-import-remote": "^1.1.0",
"ngx-loading": "~15.0.0",
"ngx-toastr": "~17.0.2",
"oidc-client-ts": "^3.0.1",
"papaparse": "5.4.1",
"postcss": "^8.0.9",
"qrcode": "^1.5.3",
"qrious": "~4.0.2",
"query-string": "^7.1.1",
"rc-tooltip": "^5.2.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-i18next": "^13.2.2",
"react-router-dom": "^6.22.1",
"react-swipeable": "^7.0.2",
"resize-observer-polyfill": "^1.5.1",
"rxios": "github:ImagineLearning/rxios",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"single-spa": "^6.0.3",
"single-spa-angular": "^9.2.0",
"sweetalert2": "~11.9.0",
"tailwindcss": "^2.0.3",
"uuid": "^8.3.2",
"yup": "~1.3.2",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-architects/module-federation": "^16.0.4",
"@angular-builders/custom-webpack": "~16.0.1",
"@angular-builders/dev-server": "~7.3.3",
"@angular/cli": "~16.2.10",
"@angular/compiler-cli": "~16.2.12",
"@angular/language-service": "~16.2.12",
"@types/jasmine": "~5.1.4",
"@types/jasminewd2": "~2.0.13",
"@types/lodash": "4.14.202",
"@types/node": "~18.11.9",
"@types/react": "19.1.0",
"@types/react-dom": "19.1.0",
"axios-mock-adapter": "^1.22.0",
"cross-env": "^7.0.3",
"css-loader": "^6.8.1",
"eslint-plugin-prettier": "5.0.0",
"husky": "^8.0.0",
"jasmine-core": "~5.1.1",
"jasmine-spec-reporter": "~7.0.0",
"js-beautify": "^1.14.11",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"karma-sonarqube-reporter": "~1.4.0",
"karma-spec-reporter": "0.0.36",
"lint-staged": "^15.2.0",
"prettier": "^3.1.0",
"pretty-quick": "^4.0.0",
"protractor": "~7.0.0",
"react-test-attributes": "~1.0.0",
"regenerator-transform": "^0.15.2",
"rimraf": "^5.0.5",
"sass": "~1.69.5",
"sass-loader": "^16.0.5",
"single-spa-css": "^2.0.0",
"style-loader": "^3.3.3",
"ts-node": "~10.9.1",
"tslib": "^2.6.2",
"tslint": "^6.1.3",
"typescript": "~5.1.6",
"use-deep-compare-effect": "~1.8.1",
"webpack": "^5.89.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2",
"yup": "~1.3.2"
},
"resolutions": {
"webpack": "^5.89.0"
}
}Any help would be greatly appreciated.
Thank you.
2 Answers, 1 is accepted
Rank 1
Iron
Was able to resolve the issue.
Had to re-add the following KendoReact packages that were recently removed.
"@progress/kendo-react-animation": "^4.5.0", "@progress/kendo-react-buttons": "^4.5.0", "@progress/kendo-react-charts": "^4.5.0", "@progress/kendo-react-data-tools": "^4.5.0", "@progress/kendo-react-dateinputs": "^4.5.0", "@progress/kendo-react-dialogs": "^4.5.0", "@progress/kendo-react-dropdowns": "^4.5.0", "@progress/kendo-react-form": "~4.14.1", "@progress/kendo-react-grid": "^4.5.0", "@progress/kendo-react-indicators": "^4.5.0", "@progress/kendo-react-inputs": "^4.5.0", "@progress/kendo-react-intl": "^4.5.0", "@progress/kendo-react-layout": "^4.5.0", "@progress/kendo-react-listview": "^4.5.0", "@progress/kendo-react-notification": "^4.5.0", "@progress/kendo-react-pdf": "^4.5.0", "@progress/kendo-react-popup": "^4.5.0", "@progress/kendo-react-progressbars": "^4.5.0", "@progress/kendo-react-scrollview": "^4.5.0", "@progress/kendo-react-sortable": "^4.6.0", "@progress/kendo-react-tooltip": "^4.5.0", "@progress/kendo-react-treeview": "^4.5.0",
Hello Jacob,
Thank you for the update on your resolution.
It makes sense that re-adding the KendoReact packages resolved the license warning for Kendo UI for Angular in your single-spa micro frontend setup. In environments where Angular and React coexist, especially with shared internal component libraries, transitive dependencies can affect license recognition. If any part of your codebase relies on these React packages, their absence could disrupt dependency chains and interfere with the runtime license check.
Key points for similar future scenarios:
- Ensure all required Kendo packages (both Angular and React) are present if your shared libraries depend on them.
- The license key file should be placed in the root directory alongside your main
package.json. - After dependency changes, always clear caches and reinstall to avoid lingering issues.
If you have any further questions or encounter new licensing challenges, feel free to ask.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.