diff --git a/README.EN.md b/README.EN.md index e3c9f2a4..56841929 100644 --- a/README.EN.md +++ b/README.EN.md @@ -78,15 +78,11 @@ Use the `provideDesignAngularKit` function in the application configuration `App initialise the library's functionality. ```typescript -import { provideHttpClient } from '@angular/common/http'; -import { provideAnimations } from '@angular/platform-browser/animations'; import { provideDesignAngularKit } from 'design-angular-kit'; export const appConfig: ApplicationConfig = { providers: [ ... - provideAnimations(), // Necessary for the operation of the library - provideHttpClient(), // Necessary for the operation of the library provideDesignAngularKit(), ] } @@ -95,25 +91,21 @@ export const appConfig: ApplicationConfig = { #### Modular application You need to import `DesignAngularKitModule` into the main application module (usually named **AppModule**) -using the `forRoot` method in order to initialise the library functionality and import all components. +using the `forRoot` method in order to initialise the library functionality and **import all components**. ```typescript -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { DesignAngularKitModule } from 'design-angular-kit'; @NgModule({ imports: [ ... - HttpClientModule, // Necessary for the operation of the library - BrowserAnimationsModule, // Necessary for the operation of the library DesignAngularKitModule.forRoot() ] }) export class AppModule { } ``` -Uses the `forChild` method when importing the `DesignAngularKitModule` into other modules of the application to import all library components. +Uses the `forChild` method when importing the `DesignAngularKitModule` into other modules of the application to **import all library components**. ```typescript @@ -131,20 +123,14 @@ export class SharedModule { } #### Hybrid application -If you have the **AppModule** in your application but want to use our components with the _standalone_ configuration, +If you have the **AppModule** in your application but want to use **our components with the _standalone_ configuration**, use the `provideDesignAngularKit` function within the main application module to initialise the library functionality. ```typescript -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { provideDesignAngularKit } from 'design-angular-kit'; @NgModule({ - imports: [ - ... - HttpClientModule, // Necessary for the operation of the library - BrowserAnimationsModule, // Necessary for the operation of the library - ], + imports: [], providers: [ provideDesignAngularKit(), ] diff --git a/README.md b/README.md index e481c60b..e66f53b2 100644 --- a/README.md +++ b/README.md @@ -78,15 +78,11 @@ Utilizza la funzione `provideDesignAngularKit` nella configurazione dell'applica poter inizializzare le funzionalità della libreria. ```typescript -import { provideHttpClient } from '@angular/common/http'; -import { provideAnimations } from '@angular/platform-browser/animations'; import { provideDesignAngularKit } from 'design-angular-kit'; export const appConfig: ApplicationConfig = { providers: [ ... - provideAnimations(), // Necessario per il funzionamento della libreria - provideHttpClient(), // Necessario per il funzionamento della libreria provideDesignAngularKit(), ] } @@ -95,25 +91,21 @@ export const appConfig: ApplicationConfig = { #### Applicazione modulare È necessario importare `DesignAngularKitModule` all'interno del modulo principale dell'applicazione (solitamente denominato **AppModule**) -utilizzando il metodo `forRoot` per poter inizializzare le funzionalità della libreria e importare tutti i componenti. +utilizzando il metodo `forRoot` per poter inizializzare le funzionalità della libreria e **importare tutti i componenti**. ```typescript -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { DesignAngularKitModule } from 'design-angular-kit'; @NgModule({ imports: [ ... - HttpClientModule, // Necessario per il funzionamento della libreria - BrowserAnimationsModule, // Necessario per il funzionamento della libreria DesignAngularKitModule.forRoot() ] }) export class AppModule { } ``` -Utilizza il metodo `forChild` durante l'importazione del modulo `DesignAngularKitModule` in altri moduli dell'applicazione per importare tutti i componenti della libreria. +Utilizza il metodo `forChild` durante l'importazione del modulo `DesignAngularKitModule` in altri moduli dell'applicazione per **importare tutti i componenti** della libreria. ```typescript @@ -131,20 +123,14 @@ export class SharedModule { } #### Applicazione ibrida -Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri componenti con la configurazione _standalone_, +Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri **componenti con la configurazione _standalone_**, utilizza la funzione `provideDesignAngularKit` all'interno del modulo principale dell'applicazione per poter inizializzare le funzionalità della libreria. ```typescript -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { provideDesignAngularKit } from 'design-angular-kit'; @NgModule({ - imports: [ - ... - HttpClientModule, // Necessario per il funzionamento della libreria - BrowserAnimationsModule, // Necessario per il funzionamento della libreria - ], + imports: [], providers: [ provideDesignAngularKit(), ] diff --git a/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts b/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts index 3ff01fbf..f8f9dfb1 100644 --- a/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts +++ b/projects/design-angular-kit/src/lib/provide-design-angular-kit.ts @@ -2,8 +2,9 @@ import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, makeEnviron import { DesignAngularKitConfig, IT_ASSET_BASE_PATH } from './interfaces/design-angular-kit-config'; import { loadFonts } from 'bootstrap-italia'; import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'; -import { HttpClient } from '@angular/common/http'; +import { HttpClient, provideHttpClient } from '@angular/common/http'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; /** * Configures DesignAngularKit library @@ -22,6 +23,8 @@ export function provideDesignAngularKit(config?: DesignAngularKitConfig): Enviro provide: IT_ASSET_BASE_PATH, useValue: assetBasePath, }, + provideAnimationsAsync(), + provideHttpClient(), ]; if (config?.loadFont !== false) { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fd66a025..4ea33e56 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,4 @@ import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; @@ -10,12 +9,11 @@ import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher import { LinkSortPipe } from './link-sort.pipe'; import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; import { TranslateStore } from '@ngx-translate/core'; -import { HttpClientModule } from '@angular/common/http'; import { DesignAngularKitModule } from 'design-angular-kit/design-angular-kit.module'; @NgModule({ declarations: [AppComponent, TableOfContentComponent, TableOfContentItemComponent, RouterDispatcherComponent, LinkSortPipe], - imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule, DesignAngularKitModule.forRoot()], + imports: [BrowserModule, AppRoutingModule, DesignAngularKitModule.forRoot()], providers: [ TranslateStore, {