Mixing
Passing param to ngOnInit through service
I just started learning about angular 2 and I am having questions on if the scenario I think is possible.
I have a micro service model where in I have angular apps associated to each micro service.
- Microservice 1 & ng app 1 - is for handling the transactions of the
user - service 2 and ng app 2 - is to calculate all applicable taxes for the user
If I land on app 1, enter the details of my transaction and click a continue button, I should be able to pass "All" the values that are required for tax calculation along with the user Id?
Passing it through URL should work but i have user ID, transactionID, transaction amount etc to be bit secure.
Would I be able to pass it through ngOnInit() or through some life cycle event so that ng app 2 gets those details and the page loads with the tax values based on the init params passed? Help me on this :)
angular microservices micro-frontend
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
add a comment |
I just started learning about angular 2 and I am having questions on if the scenario I think is possible.
I have a micro service model where in I have angular apps associated to each micro service.
- Microservice 1 & ng app 1 - is for handling the transactions of the
user - service 2 and ng app 2 - is to calculate all applicable taxes for the user
If I land on app 1, enter the details of my transaction and click a continue button, I should be able to pass "All" the values that are required for tax calculation along with the user Id?
Passing it through URL should work but i have user ID, transactionID, transaction amount etc to be bit secure.
Would I be able to pass it through ngOnInit() or through some life cycle event so that ng app 2 gets those details and the page loads with the tax values based on the init params passed? Help me on this :)
angular microservices micro-frontend
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34
add a comment |
I just started learning about angular 2 and I am having questions on if the scenario I think is possible.
I have a micro service model where in I have angular apps associated to each micro service.
- Microservice 1 & ng app 1 - is for handling the transactions of the
user - service 2 and ng app 2 - is to calculate all applicable taxes for the user
If I land on app 1, enter the details of my transaction and click a continue button, I should be able to pass "All" the values that are required for tax calculation along with the user Id?
Passing it through URL should work but i have user ID, transactionID, transaction amount etc to be bit secure.
Would I be able to pass it through ngOnInit() or through some life cycle event so that ng app 2 gets those details and the page loads with the tax values based on the init params passed? Help me on this :)
angular microservices micro-frontend
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
I just started learning about angular 2 and I am having questions on if the scenario I think is possible.
I have a micro service model where in I have angular apps associated to each micro service.
- Microservice 1 & ng app 1 - is for handling the transactions of the
user - service 2 and ng app 2 - is to calculate all applicable taxes for the user
If I land on app 1, enter the details of my transaction and click a continue button, I should be able to pass "All" the values that are required for tax calculation along with the user Id?
Passing it through URL should work but i have user ID, transactionID, transaction amount etc to be bit secure.
Would I be able to pass it through ngOnInit() or through some life cycle event so that ng app 2 gets those details and the page loads with the tax values based on the init params passed? Help me on this :)
angular microservices micro-frontend
angular microservices micro-frontend
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
edited Nov 20 '18 at 17:30
SiddAjmera
13.7k31137
13.7k31137
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
asked Nov 20 '18 at 16:58
PoppyPoppy
1,01263255
1,01263255
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34
add a comment |
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34
add a comment |
2 Answers
2
active
oldest
votes
Well, what you seem to have is Microfrontends. Just like each microservice is designed for a very specific entity, each micro frontend is designed for a very specific entity. And that's what you seem to have.
A very common approach of sharing data between micro frontends is by defining custom events.
A micro frontend(A) can emit an event like this:
// this is attached to the button in micro-frontend A
btn.onclick = () => {
const event = new Event("a__click");
window.dispatchEvent(event);
};
Another micro frontend(B) can listen to that event and react accordingly:
// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());
// actual method to update the count
onUpdateCount(amt = 1) {
this.state.count += amt;
const countEl = this.shadowRoot.getElementById("b__count");
countEl.innerHTML = this.state.count;
}
Here's an amazingly enlightening article on Medium by a guy named Benjamin Johnson that you might want to read to know more about it.
That being said, since these are DOM Events, someone could still intercept them somehow. In those cases, you could have a custom microservice implemented that could return a particular sensitive information and then do the needful with that.
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
add a comment |
I was also worked on the same kind of Architecture using single-spa meta framework . What I did was I have created my own dispatcher utility using plain Javascript(Reusable API) using RxJS , because any way Angular have a dependency of RxJS. So we can take the advantage of it.
Here is the code I have implemented , You can publish and subscribe from any micro front end applications(Angular,React,Vue.js). The code I have written in ts. You can convert to js if you want.
import { Subject } from "rxjs";
(function (global: any) {
var RxDispatcher: any = function () {
return new RxDispatcher.instance();
};
RxDispatcher.prototype = {
getDispatcher: function (dispatcherName: string): Subject<any> {
if (global.subjects) {
return global.subjects[dispatcherName]
? global.subjects[dispatcherName]
: console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
}
console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
},
registerDispatchers: function (dispatchers: string) {
if (dispatchers) {
if (!global.subjects) {
global.subjects = {};
}
dispatchers.forEach(dispatcher => {
if (!global.subjects[dispatcher]) {
global.subjects[dispatcher] = new Subject();
}
});
}
},
dispatch: function (dispatcher: string, args?:any): void {
if (!dispatcher) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatcher
);
} else {
var dispatcherInstance = this.getDispatcher(dispatcher);
if (dispatcherInstance) dispatcherInstance.next(args);
}
},
dispatchToMultiple: function (dispatchers: string,args?:any) {
if (!dispatchers) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatchers
);
}
dispatchers.forEach(subscriber => {
var dispatcherInstance = this.getDispatcher(subscriber);
if (dispatcherInstance) dispatcherInstance.next(args);
});
},
clear: function () {
delete global["subjects"];
}
};
RxDispatcher.instance = function () { };
RxDispatcher.instance.prototype = RxDispatcher.prototype;
global.RxDispatcher = RxDispatcher;
})(window);
Usage
if you are in typescript , you have to declare
declare var RxDispatcher: any;
Register Dispatchers
var dispatchers=["onSendMessage"]
RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
You can register multiple dispatchers at one time
Send Message
RxDispatcher().dispatch("onSendMessage", {
message: "Hi"
})
Subscribe Message
RxDispatcher().getDispatcher("onSendMessage")
.subscribe((message) => {
console.log(message) //Output : Hi
});
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397918%2fpassing-param-to-ngoninit-through-service%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Well, what you seem to have is Microfrontends. Just like each microservice is designed for a very specific entity, each micro frontend is designed for a very specific entity. And that's what you seem to have.
A very common approach of sharing data between micro frontends is by defining custom events.
A micro frontend(A) can emit an event like this:
// this is attached to the button in micro-frontend A
btn.onclick = () => {
const event = new Event("a__click");
window.dispatchEvent(event);
};
Another micro frontend(B) can listen to that event and react accordingly:
// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());
// actual method to update the count
onUpdateCount(amt = 1) {
this.state.count += amt;
const countEl = this.shadowRoot.getElementById("b__count");
countEl.innerHTML = this.state.count;
}
Here's an amazingly enlightening article on Medium by a guy named Benjamin Johnson that you might want to read to know more about it.
That being said, since these are DOM Events, someone could still intercept them somehow. In those cases, you could have a custom microservice implemented that could return a particular sensitive information and then do the needful with that.
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
add a comment |
Well, what you seem to have is Microfrontends. Just like each microservice is designed for a very specific entity, each micro frontend is designed for a very specific entity. And that's what you seem to have.
A very common approach of sharing data between micro frontends is by defining custom events.
A micro frontend(A) can emit an event like this:
// this is attached to the button in micro-frontend A
btn.onclick = () => {
const event = new Event("a__click");
window.dispatchEvent(event);
};
Another micro frontend(B) can listen to that event and react accordingly:
// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());
// actual method to update the count
onUpdateCount(amt = 1) {
this.state.count += amt;
const countEl = this.shadowRoot.getElementById("b__count");
countEl.innerHTML = this.state.count;
}
Here's an amazingly enlightening article on Medium by a guy named Benjamin Johnson that you might want to read to know more about it.
That being said, since these are DOM Events, someone could still intercept them somehow. In those cases, you could have a custom microservice implemented that could return a particular sensitive information and then do the needful with that.
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
add a comment |
Well, what you seem to have is Microfrontends. Just like each microservice is designed for a very specific entity, each micro frontend is designed for a very specific entity. And that's what you seem to have.
A very common approach of sharing data between micro frontends is by defining custom events.
A micro frontend(A) can emit an event like this:
// this is attached to the button in micro-frontend A
btn.onclick = () => {
const event = new Event("a__click");
window.dispatchEvent(event);
};
Another micro frontend(B) can listen to that event and react accordingly:
// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());
// actual method to update the count
onUpdateCount(amt = 1) {
this.state.count += amt;
const countEl = this.shadowRoot.getElementById("b__count");
countEl.innerHTML = this.state.count;
}
Here's an amazingly enlightening article on Medium by a guy named Benjamin Johnson that you might want to read to know more about it.
That being said, since these are DOM Events, someone could still intercept them somehow. In those cases, you could have a custom microservice implemented that could return a particular sensitive information and then do the needful with that.
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
Well, what you seem to have is Microfrontends. Just like each microservice is designed for a very specific entity, each micro frontend is designed for a very specific entity. And that's what you seem to have.
A very common approach of sharing data between micro frontends is by defining custom events.
A micro frontend(A) can emit an event like this:
// this is attached to the button in micro-frontend A
btn.onclick = () => {
const event = new Event("a__click");
window.dispatchEvent(event);
};
Another micro frontend(B) can listen to that event and react accordingly:
// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());
// actual method to update the count
onUpdateCount(amt = 1) {
this.state.count += amt;
const countEl = this.shadowRoot.getElementById("b__count");
countEl.innerHTML = this.state.count;
}
Here's an amazingly enlightening article on Medium by a guy named Benjamin Johnson that you might want to read to know more about it.
That being said, since these are DOM Events, someone could still intercept them somehow. In those cases, you could have a custom microservice implemented that could return a particular sensitive information and then do the needful with that.
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
answered Nov 20 '18 at 17:29
SiddAjmeraSiddAjmera
13.7k31137
13.7k31137
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
add a comment |
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
Completely get it . Thanks for the explanation. But, like in my case 1) do a transaction in app1 , 2) move to app 2 and calculate tax 3)comeback to 1st app and deduct tax and proceed the transaction. Would all of them be custom events ? How would i persist info in app 1 after navigating to app 2 ?
– Poppy
Nov 21 '18 at 6:39
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
@Poppy, I guess the info won't be persisted in App 1, it would be persisted in the microservice that App1 consumes. App1 is just going to have some sort of a unique id with the help of which it could get all the relevant details from the microservice.
– SiddAjmera
Nov 21 '18 at 6:43
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
Yeah.. Makes sense :) Thanks a lot :)
– Poppy
Nov 21 '18 at 6:52
add a comment |
I was also worked on the same kind of Architecture using single-spa meta framework . What I did was I have created my own dispatcher utility using plain Javascript(Reusable API) using RxJS , because any way Angular have a dependency of RxJS. So we can take the advantage of it.
Here is the code I have implemented , You can publish and subscribe from any micro front end applications(Angular,React,Vue.js). The code I have written in ts. You can convert to js if you want.
import { Subject } from "rxjs";
(function (global: any) {
var RxDispatcher: any = function () {
return new RxDispatcher.instance();
};
RxDispatcher.prototype = {
getDispatcher: function (dispatcherName: string): Subject<any> {
if (global.subjects) {
return global.subjects[dispatcherName]
? global.subjects[dispatcherName]
: console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
}
console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
},
registerDispatchers: function (dispatchers: string) {
if (dispatchers) {
if (!global.subjects) {
global.subjects = {};
}
dispatchers.forEach(dispatcher => {
if (!global.subjects[dispatcher]) {
global.subjects[dispatcher] = new Subject();
}
});
}
},
dispatch: function (dispatcher: string, args?:any): void {
if (!dispatcher) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatcher
);
} else {
var dispatcherInstance = this.getDispatcher(dispatcher);
if (dispatcherInstance) dispatcherInstance.next(args);
}
},
dispatchToMultiple: function (dispatchers: string,args?:any) {
if (!dispatchers) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatchers
);
}
dispatchers.forEach(subscriber => {
var dispatcherInstance = this.getDispatcher(subscriber);
if (dispatcherInstance) dispatcherInstance.next(args);
});
},
clear: function () {
delete global["subjects"];
}
};
RxDispatcher.instance = function () { };
RxDispatcher.instance.prototype = RxDispatcher.prototype;
global.RxDispatcher = RxDispatcher;
})(window);
Usage
if you are in typescript , you have to declare
declare var RxDispatcher: any;
Register Dispatchers
var dispatchers=["onSendMessage"]
RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
You can register multiple dispatchers at one time
Send Message
RxDispatcher().dispatch("onSendMessage", {
message: "Hi"
})
Subscribe Message
RxDispatcher().getDispatcher("onSendMessage")
.subscribe((message) => {
console.log(message) //Output : Hi
});
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
add a comment |
I was also worked on the same kind of Architecture using single-spa meta framework . What I did was I have created my own dispatcher utility using plain Javascript(Reusable API) using RxJS , because any way Angular have a dependency of RxJS. So we can take the advantage of it.
Here is the code I have implemented , You can publish and subscribe from any micro front end applications(Angular,React,Vue.js). The code I have written in ts. You can convert to js if you want.
import { Subject } from "rxjs";
(function (global: any) {
var RxDispatcher: any = function () {
return new RxDispatcher.instance();
};
RxDispatcher.prototype = {
getDispatcher: function (dispatcherName: string): Subject<any> {
if (global.subjects) {
return global.subjects[dispatcherName]
? global.subjects[dispatcherName]
: console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
}
console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
},
registerDispatchers: function (dispatchers: string) {
if (dispatchers) {
if (!global.subjects) {
global.subjects = {};
}
dispatchers.forEach(dispatcher => {
if (!global.subjects[dispatcher]) {
global.subjects[dispatcher] = new Subject();
}
});
}
},
dispatch: function (dispatcher: string, args?:any): void {
if (!dispatcher) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatcher
);
} else {
var dispatcherInstance = this.getDispatcher(dispatcher);
if (dispatcherInstance) dispatcherInstance.next(args);
}
},
dispatchToMultiple: function (dispatchers: string,args?:any) {
if (!dispatchers) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatchers
);
}
dispatchers.forEach(subscriber => {
var dispatcherInstance = this.getDispatcher(subscriber);
if (dispatcherInstance) dispatcherInstance.next(args);
});
},
clear: function () {
delete global["subjects"];
}
};
RxDispatcher.instance = function () { };
RxDispatcher.instance.prototype = RxDispatcher.prototype;
global.RxDispatcher = RxDispatcher;
})(window);
Usage
if you are in typescript , you have to declare
declare var RxDispatcher: any;
Register Dispatchers
var dispatchers=["onSendMessage"]
RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
You can register multiple dispatchers at one time
Send Message
RxDispatcher().dispatch("onSendMessage", {
message: "Hi"
})
Subscribe Message
RxDispatcher().getDispatcher("onSendMessage")
.subscribe((message) => {
console.log(message) //Output : Hi
});
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
add a comment |
I was also worked on the same kind of Architecture using single-spa meta framework . What I did was I have created my own dispatcher utility using plain Javascript(Reusable API) using RxJS , because any way Angular have a dependency of RxJS. So we can take the advantage of it.
Here is the code I have implemented , You can publish and subscribe from any micro front end applications(Angular,React,Vue.js). The code I have written in ts. You can convert to js if you want.
import { Subject } from "rxjs";
(function (global: any) {
var RxDispatcher: any = function () {
return new RxDispatcher.instance();
};
RxDispatcher.prototype = {
getDispatcher: function (dispatcherName: string): Subject<any> {
if (global.subjects) {
return global.subjects[dispatcherName]
? global.subjects[dispatcherName]
: console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
}
console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
},
registerDispatchers: function (dispatchers: string) {
if (dispatchers) {
if (!global.subjects) {
global.subjects = {};
}
dispatchers.forEach(dispatcher => {
if (!global.subjects[dispatcher]) {
global.subjects[dispatcher] = new Subject();
}
});
}
},
dispatch: function (dispatcher: string, args?:any): void {
if (!dispatcher) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatcher
);
} else {
var dispatcherInstance = this.getDispatcher(dispatcher);
if (dispatcherInstance) dispatcherInstance.next(args);
}
},
dispatchToMultiple: function (dispatchers: string,args?:any) {
if (!dispatchers) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatchers
);
}
dispatchers.forEach(subscriber => {
var dispatcherInstance = this.getDispatcher(subscriber);
if (dispatcherInstance) dispatcherInstance.next(args);
});
},
clear: function () {
delete global["subjects"];
}
};
RxDispatcher.instance = function () { };
RxDispatcher.instance.prototype = RxDispatcher.prototype;
global.RxDispatcher = RxDispatcher;
})(window);
Usage
if you are in typescript , you have to declare
declare var RxDispatcher: any;
Register Dispatchers
var dispatchers=["onSendMessage"]
RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
You can register multiple dispatchers at one time
Send Message
RxDispatcher().dispatch("onSendMessage", {
message: "Hi"
})
Subscribe Message
RxDispatcher().getDispatcher("onSendMessage")
.subscribe((message) => {
console.log(message) //Output : Hi
});
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
I was also worked on the same kind of Architecture using single-spa meta framework . What I did was I have created my own dispatcher utility using plain Javascript(Reusable API) using RxJS , because any way Angular have a dependency of RxJS. So we can take the advantage of it.
Here is the code I have implemented , You can publish and subscribe from any micro front end applications(Angular,React,Vue.js). The code I have written in ts. You can convert to js if you want.
import { Subject } from "rxjs";
(function (global: any) {
var RxDispatcher: any = function () {
return new RxDispatcher.instance();
};
RxDispatcher.prototype = {
getDispatcher: function (dispatcherName: string): Subject<any> {
if (global.subjects) {
return global.subjects[dispatcherName]
? global.subjects[dispatcherName]
: console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
}
console.error(
"Unable to find the dispatcher of " +
dispatcherName +
" .Please ensure the dispatchers are properly registered."
);
},
registerDispatchers: function (dispatchers: string) {
if (dispatchers) {
if (!global.subjects) {
global.subjects = {};
}
dispatchers.forEach(dispatcher => {
if (!global.subjects[dispatcher]) {
global.subjects[dispatcher] = new Subject();
}
});
}
},
dispatch: function (dispatcher: string, args?:any): void {
if (!dispatcher) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatcher
);
} else {
var dispatcherInstance = this.getDispatcher(dispatcher);
if (dispatcherInstance) dispatcherInstance.next(args);
}
},
dispatchToMultiple: function (dispatchers: string,args?:any) {
if (!dispatchers) {
console.error(
"Unable to dispatch message to dispatcher of " + dispatchers
);
}
dispatchers.forEach(subscriber => {
var dispatcherInstance = this.getDispatcher(subscriber);
if (dispatcherInstance) dispatcherInstance.next(args);
});
},
clear: function () {
delete global["subjects"];
}
};
RxDispatcher.instance = function () { };
RxDispatcher.instance.prototype = RxDispatcher.prototype;
global.RxDispatcher = RxDispatcher;
})(window);
Usage
if you are in typescript , you have to declare
declare var RxDispatcher: any;
Register Dispatchers
var dispatchers=["onSendMessage"]
RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
You can register multiple dispatchers at one time
Send Message
RxDispatcher().dispatch("onSendMessage", {
message: "Hi"
})
Subscribe Message
RxDispatcher().getDispatcher("onSendMessage")
.subscribe((message) => {
console.log(message) //Output : Hi
});
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
answered Nov 21 '18 at 15:32
Code-EZCode-EZ
3,38093052
3,38093052
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397918%2fpassing-param-to-ngoninit-through-service%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what you meant by ng-app1 and ng-app2 ? is both are two Angular applications side by side or component?
– Code-EZ
Nov 20 '18 at 17:17
@NinjaJami It means two angular applications, kind of micro-ui associated to each micro service
– Poppy
Nov 21 '18 at 6:36
I have added an answer which also help you
– Code-EZ
Nov 21 '18 at 15:33
Also I would suggest edit your question title by changing to 'How to communication between two micro front end applications'. It will give more reach to your question
– Code-EZ
Nov 21 '18 at 15:34