Maximum call stack size exceeded when using angular 10 for my shell and angular 11 for my custom element

[dhiegoatencio]

Hello, is it possible to use different angular versions like this scenario? with the same version the lib is working very nice. However when I am using different versions it throws the following error:

error

Uncaught RangeError: Maximum call stack size exceeded at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1) at P._.<computed>.get (loginApp-elements-es2015.js:1)

shell package.json
`
{
"name": "main-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.2.4",
"@angular/common": "~10.2.4",
"@angular/compiler": "~10.2.4",
"@angular/core": "~10.2.4",
"@angular/forms": "~10.2.4",
"@angular/platform-browser": "~10.2.4",
"@angular/platform-browser-dynamic": "~10.2.4",
"@angular/router": "~10.2.4",
"ngx-elements-router": "^0.1.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.3",
"@angular/cli": "~10.2.3",
"@angular/compiler-cli": "~10.2.4",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}

`

custom element package.json
`
{
"name": "ng-hend-workspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall:bak": "",
"postinstall": "ngcc",
"export": "ng build --extra-webpack-config projects/login-app//webpack.externals.js --prod --project loginApp --single-bundle --output-hashing none && node build-elements.js loginApp",
"concat": "node build-elements.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.2.3",
"@angular/common": "~11.2.3",
"@angular/compiler": "~11.2.3",
"@angular/core": "~11.2.3",
"@angular/elements": "^11.2.3",
"@angular/forms": "~11.2.3",
"@angular/platform-browser": "~11.2.3",
"@angular/platform-browser-dynamic": "~11.2.3",
"@angular/router": "~11.2.3",
"@webcomponents/webcomponentsjs": "^2.5.0",
"document-register-element": "^1.7.2",
"ngx-build-plus": "^11.0.0",
"ngx-elements-router": "^0.1.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.2",
"@angular/cli": "~11.2.2",
"@angular/compiler-cli": "~11.2.3",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"concat": "^1.0.3",
"fs-extra": "^4.0.2",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
}
}

`

[fboeller]

Hey @dhiegoatencio!
I'll take a look at that, I haven't specifically tested the versions between 10.2.0 and 11.1.0 so far.

[fboeller]

Hey @dhiegoatencio !

I've tried to reproduce the error given your two package.jsons but could not reproduce it, the platform with Angular 10.2.4 works fine with the micro frontend in Angular 11.2.3 for me. I assume there must be some other difference in there on how it's build or integrated.

I've put the setup that's working for me into these GitHub repos:
https://github.com/fboeller/ngx-elements-router-micro-frontend
https://github.com/fboeller/ngx-elements-router-platform
Those are the two example applications with the versions adjusted to the ones you shared.

After npm install in both repos, npm start example-platform in the platform repo and npm run build example-micro-frontend && http-server dist/example-micro-frontend --port 4201 in the micro frontend repo, the application works fine for me on localhost:4200.

I hope this helps you narrowing the issue down. If the issue persists, feel free to share a reproducible example, then I can take a further look.