-
Notifications
You must be signed in to change notification settings - Fork 27k
Description
Which @angular/* package(s)
core, zone.js
Is this a regression?
No
Description
Hey!
I'm working on a big, micro-frontend based enterprise application and I'm trying to integrate signals at the shell level. In particular, I'm trying to see if I can simplify the mechanism we use to share some data between the shell and the various mf(s).
Currently, we're using the global scope (I know 😅) to share some "global data". Within this context, I've noticed something unexpected (at least for me)... maybe it's just me not connecting the dots or not understanding something important. In case, I'm sorry!
Here is the point:
@Component({
template: `
<div>globalThis.value: {{value()}}</div>`,
})
export class Mf {
// Not updated when global ___value is updated (same result with effect)
value = computed(() => `${(globalThis as any).___value()}`);
}
(async () => {
const app = await createApplication();
const element = createCustomElement(Mf, { injector: app.injector });
customElements.define('app-mf1', element);
})();
@Component({
...
})
export class Shell {
id = setInterval(() => {
(globalThis as any).___value.update((v: number) => v + 1);
}, 1000);
constructor() {
(globalThis as any).___value = signal(0);
}
}https://stackblitz.com/edit/stackblitz-starters-wh9pva?file=src%2Fmain.ts
Based on my understanding of hybrid mode, I'd expect Mf to react to ___value signal changes (as a regular dep of a computed). Note that, it's the case:
- for zoneless applications,
- if you run the content of
setIntervaloutside of the shell zone.
I haven't checked the code, but maybe the reason is simply that ___value is strictly linked to the shell context (shell zone)... if that's the reason, I think it would be nice to have it working and simplify the "hybrid mode" feature with something like: a signal will always work the same way in any context, no matter what!
As usual: thanks a lot for your time and consideration!
Please provide a link to a minimal reproduction of the problem
https://stackblitz.com/edit/stackblitz-starters-wh9pva?file=src%2Fmain.ts
Environment
Angular "^18.1.0"