search

MTobisch / ngx-dynamic-hooks

Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.
MIT License
112 stars 6 forks source link

Need it to work with SSR rendering #39

Open omarbelkhodja opened 7 months ago

omarbelkhodja commented 7 months ago

I'm trying to make the SSR work with usage of the ngx-dynamic-hooks module, like described in "8.2 Non-browser Platforms implemention". Although, I'm correctly setting 

importProvidersFrom(
      DynamicHooksModule.forRoot({
        globalParsers: [
          {
            component: LbpamInsightsComponent,
          },
        ],
      }, MyPlatformServerService),
    ),

I'm facing the following injection error:

ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (file:///E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:731:15)
    at ɵɵinject (file:///E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:744:61)
    at ɵɵdirectiveInject (file:///E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:11211:16)
    at NodeInjectorFactory.OutletComponent_Factory [as factory] (ng:///OutletComponent/ɵfac.js:5:43)
    at getNodeInjectable (E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:4782:44)
    at instantiateAllDirectives (E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:12040:27)
    at createDirectivesInstances (E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:11456:5)
    at ɵɵelementStart (E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:15740:9)
    at Module.ɵɵelement (E:/git/analogjs-site-generator/node_modules/@angular/core/fesm2022/core.mjs:15798:5)
    at AnyPageComponent_Template (E:/git/analogjs-site-generator/analogjs-site-generator/src/app/pages/(layout)/[...url].page.ts:143:36) {
  code: -203

Any idea about what am I doing wrong please ? How can I debug this ? Further debug showed the injection that is failing is DYNAMICHOOKS_FORROOTCHECK

MTobisch commented 7 months ago

This is a weird error. The dependency in question, DYNAMICHOOKS_FORROOTCHECK, is only injected once in the whole library: as the first argument of the constructor of the main OutletComponent (ngx-dynamic-hooks). So obviously, it is being used in a proper injection context contrary to what the error says and normally works fine. What's more, it even uses the @Optional() decorator, so even if the dependency couldn't be found, it shouldn't throw an error.

To be totally honest, I find the intricacies of SSR hard to debug, but I'm wondering if this might be something else. The question kind of is whether it errors out b/c of DYNAMICHOOKS_FORROOTCHECK specifically, or b/c its the very first dependency injected anywhere in the library - and he simply has problems injecting anything and there's some other problem afoot.

As for the latter, according to this post where someone also tries to use a library, it appears that this error can sometimes appear due to having somehow bundled multiple @angular/cores. Is this something you can investigate?