Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document how to configure for standalone components #968

Open
NateRadebaugh opened this issue Dec 21, 2022 · 0 comments
Open

Document how to configure for standalone components #968

NateRadebaugh opened this issue Dec 21, 2022 · 0 comments

Comments

@NateRadebaugh
Copy link

With angular 14 and 15, we can build our apps with tree-shaking in mind and remove the need for NgModules in our codebase.

https://angular.io/guide/standalone-components

In this repo, the only documented way of is to use ToastrModule.forRoot but this does not work:

Error: src/app/app.component.ts:105:3 - error NG2012: 'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

Here's the section of the angular docs that explain how to configure for this:

https://angular.io/guide/standalone-components#configuring-dependency-injection

Many third party libraries have also been updated to support this provide-function configuration pattern. If a library only offers an NgModule API for its DI configuration, you can use the importProvidersFrom utility to still use it with bootstrapApplication and other standalone contexts:

import { ToastrModule } from "ngx-toastr";

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
    importProvidersFrom(
        ToastrModule.forRoot({
            timeOut: Config.toastrTimeoutMs,
            positionClass: "toast-bottom-right",
            preventDuplicates: true,
            countDuplicates: true,
        }),
    ),
    provideHttpClient(withInterceptorsFromDi(), withInterceptors([])),
    provideRouter(routes),
  ]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant