fix: use library dependencies inside library provide

Co-authored-by: Antonino Bonanno <[email protected]>
italia · Mar 18, 2024 · 4409748 · 4409748
1 parent 95d2b9d
commit 4409748
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
     {