App: make lazy component standalone

README.md

@@ -87,7 +87,7 @@ export class AppModule { }
 ```
 
 ### Getting the translation
-#### Pure Pipes
+#### Pure Pipes (standalone as well)
 ```Html
 <!-- translate pipe -->
 <p>{{ 'greeting' | translate:locale.language }}</p>
@@ -162,7 +162,7 @@ To support this strategy, there is an `Async` version of each pipe, which recogn
 <p>{{ 'greeting' | translateAsync }}</p>
 ```
 
-#### Directives
+#### Directives (standalone as well)
 ```Html
 <!-- l10nTranslate directive -->
 <p l10nTranslate>greeting</p>
@@ -464,21 +464,22 @@ export class AppModule { }
 ```
 
 ### Lazy loading
-If you want to add new providers to a lazy loaded module, you can use `L10nResolver` in your routing module:
+If you want to add new providers to a lazy loaded module or component, you can use `L10nResolver` in your routing module:
 ```TypeScript
 const routes: Routes = [
     ...
     {
         path: 'lazy',
         loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
+        // loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent),
         resolve: { l10n: L10nResolver },
         data: {
             l10nProviders: [{ name: 'lazy', asset: './assets/i18n/lazy', options: { version: '1.0.0' } }]
         }
     }
 ];
 ```
-Always import the modules you need:
+If it is a module, import the modules you need:
 ```TypeScript
 @NgModule({
     declarations: [LazyComponent],
@@ -573,7 +574,7 @@ SSR doesn't work out of the box, so it is important to know:
 
 
 ## Previous versions
-- **Angular v13 (Angular l10n v14.0.0)**
+- **Angular v14 (Angular l10n v14.0.0)**
     - [Branch](https://github.com/robisim74/angular-l10n/tree/angular_v14)
 
 - **Angular v13 (Angular l10n v13.1.0)**

projects/angular-l10n-app/src/app/app-routing.module.ts

@@ -13,7 +13,7 @@ const routes: Routes = [
     { path: 'validation', component: ValidationComponent },
     {
         path: 'lazy',
-        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
+        loadComponent: () => import('./lazy/lazy.component').then(m => m.LazyComponent),
         resolve: { l10n: L10nResolver },
         data: {
             l10nProviders: [{ name: 'lazy', asset: './assets/i18n/lazy', options: { version: '15.0.0' } }]

projects/angular-l10n-app/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { l10nConfig, AppStorage, HttpTranslationLoader, LocaleValidation } from
     declarations: [
         AppComponent,
         HomeComponent,
+        PipeComponent,
         DirectiveComponent,
         ApiComponent,
         ValidationComponent,
@@ -39,8 +40,7 @@ import { l10nConfig, AppStorage, HttpTranslationLoader, LocaleValidation } from
         ),
         L10nIntlModule,
         L10nValidationModule.forRoot({ validation: LocaleValidation }),
-        L10nRoutingModule.forRoot(),
-        PipeComponent // Standalone sample
+        L10nRoutingModule.forRoot()
     ],
     bootstrap: [AppComponent]
 })

projects/angular-l10n-app/src/app/home/pipe/pipe.component.ts

@@ -1,31 +1,13 @@
 import { Component, OnInit, Input, inject } from '@angular/core';
 
-import {
-    L10nDatePipe,
-    L10nNumberPipe,
-    L10nPluralPipe,
-    L10nTimeAgoPipe,
-    L10nTranslatePipe,
-    L10N_LOCALE
-} from 'angular-l10n';
+import { L10N_LOCALE } from 'angular-l10n';
 
 import { convertCurrency, convertLength } from '../../conversions';
 
-/**
- * Standalone sample
- */
 @Component({
     selector: 'app-pipe',
     templateUrl: './pipe.component.html',
-    styleUrls: ['./pipe.component.scss'],
-    standalone: true,
-    imports: [
-        L10nTranslatePipe,
-        L10nPluralPipe,
-        L10nDatePipe,
-        L10nTimeAgoPipe,
-        L10nNumberPipe
-    ]
+    styleUrls: ['./pipe.component.scss']
 })
 export class PipeComponent implements OnInit {
 

projects/angular-l10n-app/src/app/lazy/lazy.component.ts

@@ -1,11 +1,16 @@
 import { Component, OnInit, Inject } from '@angular/core';
 
-import { L10N_LOCALE, L10nLocale, L10N_CONFIG, L10nConfig } from 'angular-l10n';
+import { L10N_LOCALE, L10nLocale, L10N_CONFIG, L10nConfig, L10nTranslatePipe } from 'angular-l10n';
 
+/**
+ * Standalone sample
+ */
 @Component({
     selector: 'app-lazy',
     templateUrl: './lazy.component.html',
-    styleUrls: ['./lazy.component.scss']
+    styleUrls: ['./lazy.component.scss'],
+    standalone: true,
+    imports: [L10nTranslatePipe]
 })
 export class LazyComponent implements OnInit {