Angular 14 standalone components support

[ilkerkoc]

Hi.

I want to remove my components from app ngmodule or any module in v14 via simple standalone option.

How can we move

const componentParsers: Array = []

DynamicHooksModule.forRoot({})

in app.module

to new file with new shiny standalone components feature.

Thank you.

[MTobisch]

I haven't yet delved deeply into Angular v14's standalone components, but from what I gather, you have to register global providers/services in bootstrapApplication while components/directives/pipes are imported in the standalone components themselves.

Have you tried the following (not testet):

import { importProvidersFrom } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(DynamicHooksModule.forRoot({
      globalParsers: componentParsers
    })),
  ]
});

And then in your standalone component:

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [
    DynamicHooksModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  [...]
}

[kumiega]

Hi @MTobisch, I can confirm that I have tested this example and it works fine without any errors. The only thing to remember is to import DynamicHooksModule inside the standalone component where <ngx-dynamic-hooks> will be used.

[MTobisch]

Little update!

I'm please to announce that Version 3 of the library has just released which uses the standalone components structure by default.

Instead of the old importProvidersFrom(DynamicHooksModule.forRoot()), you can now simply call provideDynamicHooks().

Then just import the standalone DynamicHooksComponent whereever you want to use <ngx-dynamic-hooks> like this:

@Component({
  ...
  imports: [DynamicHooksComponent]
})
export class YourComponent {
...
}