From 782215535e0cbc3dbb0aa82eeb2953f503754328 Mon Sep 17 00:00:00 2001
From: tomastrajan <tomas.trajan@gmail.com>
Date: Thu, 11 Jul 2024 23:03:23 +0200
Subject: [PATCH] feat(lib): add provideAxLazyElements() &
 provideAxLazyElementsConfigs() (use without NgModules)

- library can now be used without NgModules
---
 .../app/features/docs/faq/faq.component.ts    |   2 +-
 .../examples/advanced/advanced.component.ts   |  10 +-
 .../examples/advanced/advanced.routes.ts      |  72 ++++++------
 .../examples/basic/basic.component.html       |   4 +-
 .../examples/basic/basic.component.ts         |  13 ++-
 .../examples/dynamic/dynamic.component.html   |   2 +-
 .../examples/dynamic/dynamic.component.ts     |  14 +--
 .../examples/dynamic/dynamic.routes.ts        |  27 +++--
 .../examples/testing/testing.component.ts     |   4 +-
 .../src/app/features/home/home.component.html |  10 +-
 .../src/app/features/home/home.component.ts   |   5 +-
 projects/elements-demo/src/main.ts            |  14 +--
 .../lazy-elements/lazy-elements.interface.ts  |   6 +
 .../lazy-elements.module.spec.ts              |   2 +-
 .../lib/lazy-elements/lazy-elements.module.ts |   2 +-
 .../lazy-elements.providers.spec.ts           |  81 +++++++++++++
 .../lazy-elements/lazy-elements.providers.ts  | 106 ++++++++++++++++++
 .../src/lib/lazy-elements/public_api.ts       |   1 +
 18 files changed, 285 insertions(+), 90 deletions(-)
 create mode 100644 projects/elements/src/lib/lazy-elements/lazy-elements.providers.spec.ts
 create mode 100644 projects/elements/src/lib/lazy-elements/lazy-elements.providers.ts

diff --git a/projects/elements-demo/src/app/features/docs/faq/faq.component.ts b/projects/elements-demo/src/app/features/docs/faq/faq.component.ts
index 466ca50..47a3cf2 100644
--- a/projects/elements-demo/src/app/features/docs/faq/faq.component.ts
+++ b/projects/elements-demo/src/app/features/docs/faq/faq.component.ts
@@ -46,7 +46,7 @@ const FAQ = [
     question:
       'When do we need to use <code>*axLazyElement="module: true"</code> flag?',
     answer:
-      'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
+      'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.',
   },
   {
     question: 'Angular elements / web components / custom elements / what?',
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts
index 104ea86..866bea4 100644
--- a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts
+++ b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts
@@ -7,8 +7,8 @@ import {
 import { NgIf } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import {
+  LazyElementDirective,
   LazyElementsLoaderService,
-  LazyElementsModule,
 } from '@angular-extensions/elements';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
@@ -25,7 +25,7 @@ import { HighlightModule } from 'ngx-highlightjs';
     MatIconModule,
     MatButtonModule,
     HighlightModule,
-    LazyElementsModule,
+    LazyElementDirective,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
@@ -110,7 +110,7 @@ const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
       tag: 'mwc-checkbox',
-      url: 'https://unpkg.com/@material/mwc-checkbox@0.18.0/mwc-checkbox.js?module'
+      url: 'https://unpkg.com/@material/mwc-checkbox@0.27.0/mwc-checkbox.js?module'
     }
   ]
 };
@@ -133,7 +133,7 @@ const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
       tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module',
+      url: 'https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module',
       isModule: true
     }
   ]
@@ -165,7 +165,7 @@ const options: LazyElementModuleRootOptions = {
   elementConfigs: [
     {
       tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module'
+      url: 'https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module'
     }
   ]
 };
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.routes.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.routes.ts
index 405c888..7b582f3 100644
--- a/projects/elements-demo/src/app/features/examples/advanced/advanced.routes.ts
+++ b/projects/elements-demo/src/app/features/examples/advanced/advanced.routes.ts
@@ -1,10 +1,8 @@
-import { importProvidersFrom } from '@angular/core';
 import { Routes } from '@angular/router';
 import {
   ElementConfig,
   LAZY_ELEMENT_CONFIGS,
-  LazyElementModuleOptions,
-  LazyElementsModule,
+  provideAxLazyElementsConfigs,
 } from '@angular-extensions/elements';
 
 import { AdvancedComponent } from './advanced.component';
@@ -29,48 +27,46 @@ export function elementConfigsFactory(): ElementConfig[] {
   ];
 }
 
-const options: LazyElementModuleOptions = {
-  elementConfigs: [
-    {
-      tag: 'wired-button',
-      url: 'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js',
-      loadingComponent: SpinnerComponent,
-      errorComponent: ErrorComponent,
-      preload: true,
-    },
-    {
-      tag: 'mwc-switch',
-      url: 'https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module',
-      isModule: true,
-    },
-    {
-      tag: 'mwc-checkbox',
-      url: 'https://unpkg.com/@material/mwc-checkbox@0.18.0/mwc-checkbox.js?module',
-      isModule: true,
-    },
-    {
-      tag: 'mwc-fab',
-      url: 'https://unpkg.com/@material/mwc-fab@0.18.0/mwc-fab.js?module',
-      isModule: true,
-      loadingComponent: SpinnerComponent,
-    },
-    {
-      tag: 'mwc-slider',
-      url: 'https://unpkg.com/@material/mwc-slider@0.14.1/mwc-slider.js?module',
-      isModule: true,
-      hooks: {
-        beforeLoad: beforeLoadHook,
-      },
+const configs: ElementConfig[] = [
+  {
+    tag: 'wired-button',
+    url: 'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js',
+    loadingComponent: SpinnerComponent,
+    errorComponent: ErrorComponent,
+    preload: true,
+  },
+  {
+    tag: 'mwc-switch',
+    url: 'https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module',
+    isModule: true,
+  },
+  {
+    tag: 'mwc-checkbox',
+    url: 'https://unpkg.com/@material/mwc-checkbox@0.27.0/mwc-checkbox.js?module',
+    isModule: true,
+  },
+  {
+    tag: 'mwc-fab',
+    url: 'https://unpkg.com/@material/mwc-fab@0.27.0/mwc-fab.js?module',
+    isModule: true,
+    loadingComponent: SpinnerComponent,
+  },
+  {
+    tag: 'mwc-slider',
+    url: 'https://unpkg.com/@material/mwc-slider@0.14.1/mwc-slider.js?module',
+    isModule: true,
+    hooks: {
+      beforeLoad: beforeLoadHook,
     },
-  ],
-};
+  },
+];
 
 export default <Routes>[
   {
     path: '',
     component: AdvancedComponent,
     providers: [
-      importProvidersFrom(LazyElementsModule.forFeature(options)),
+      provideAxLazyElementsConfigs(configs),
       {
         provide: LAZY_ELEMENT_CONFIGS,
         useFactory: elementConfigsFactory,
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
index d5342c9..2fac876 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.html
+++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
@@ -26,7 +26,7 @@ <h2 id="basic-usage">Basic usage</h2>
     <div class="implementation" *ngIf="example1">
       <mwc-icon
         *axLazyElement="
-          'https://unpkg.com/&#64;material/mwc-icon&#64;0.18.0/mwc-icon.js?module';
+          'https://unpkg.com/&#64;material/mwc-icon&#64;0.27.0/mwc-icon.js?module';
           module: true
         "
       >
@@ -58,7 +58,7 @@ <h2 id="loading-template">
       <ng-template #loading>Loading...</ng-template>
       <mwc-button
         *axLazyElement="
-          'https://unpkg.com/&#64;material/mwc-button&#64;0.18.0/mwc-button.js?module';
+          'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
           loadingTemplate: loading;
           module: true
         "
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
index ad5e68d..756e63c 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
+++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
@@ -5,9 +5,10 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { LazyElementsModule } from '@angular-extensions/elements';
 import { HighlightModule } from 'ngx-highlightjs';
 
+import { LazyElementDirective } from '@angular-extensions/elements';
+
 @Component({
   selector: 'demo-basic',
   standalone: true,
@@ -23,7 +24,7 @@ import { HighlightModule } from 'ngx-highlightjs';
     MatSliderModule,
     MatFormFieldModule,
     HighlightModule,
-    LazyElementsModule,
+    LazyElementDirective,
   ],
 })
 export class BasicComponent implements OnInit {
@@ -58,12 +59,12 @@ export class BasicComponent implements OnInit {
   }
 }
 
-const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module'; -->
+const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module'; -->
 <mwc-icon *axLazyElement="url; module: true">
   favorite
 </mwc-icon>`;
 
-const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
+const CODE_EXAMPLE_2 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module' -->;
 <ng-template #loading>Loading...</ng-template>
 <mwc-button *axLazyElement="url; loadingTemplate: loading; module: true"
             (click)="increment()">
@@ -82,7 +83,7 @@ const CODE_EXAMPLE_4 = `<!-- https://unpkg.com/ink-components' -->;
   <ink-chart-eqn eqn="Math.sin(x)"></ink-chart-eqn>
 </ink-chart>`;
 
-const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/mwc-switch@0.18.0//mwc-switch.js?module'; -->
+const CODE_EXAMPLE_5 = `<!-- url = 'https://unpkg.com/@material/mwc-switch@0.27.0//mwc-switch.js?module'; -->
 <mwc-switch checked *axLazyElement="'mwc-switch'; module: true; importMap: true"></mwc-switch>`;
 
 const CODE_EXAMPLE_5_IMPORT_MAP = `
@@ -90,7 +91,7 @@ const CODE_EXAMPLE_5_IMPORT_MAP = `
 <script type="systemjs-importmap">
   {
     "imports": {
-      "mwc-switch": "https://unpkg.com/@material/mwc-switch@0.18.0/mwc-switch.js?module"
+      "mwc-switch": "https://unpkg.com/@material/mwc-switch@0.27.0/mwc-switch.js?module"
     }
   }
 </script>`;
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
index 3b514e6..8ee4e31 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.html
@@ -41,7 +41,7 @@ <h2 id="dynamic-element-tag">Dynamic element tag</h2>
       <ax-lazy-element
         *axLazyElementDynamic="
           'mwc-button';
-          url: 'https://unpkg.com/&#64;material/mwc-button&#64;0.18.0/mwc-button.js?module';
+          url: 'https://unpkg.com/&#64;material/mwc-button&#64;0.27.0/mwc-button.js?module';
           loadingTemplate: loading;
           module: true
         "
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
index c252480..b254639 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.component.ts
@@ -5,8 +5,8 @@ import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { LazyElementsModule } from '@angular-extensions/elements';
 import { HighlightModule } from 'ngx-highlightjs';
+import { LazyElementDynamicDirective } from '@angular-extensions/elements';
 
 @Component({
   selector: 'demo-dynamic',
@@ -21,7 +21,7 @@ import { HighlightModule } from 'ngx-highlightjs';
     MatButtonModule,
     MatSlideToggleModule,
     FormsModule,
-    LazyElementsModule,
+    LazyElementDynamicDirective,
     HighlightModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -47,7 +47,7 @@ export class DynamicComponent implements OnInit {
   dynamicConfigs = [
     {
       tag: 'mwc-button',
-      url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
+      url: 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module',
       isModule: true,
       content: 'Increment',
       actionName: 'increment',
@@ -60,7 +60,7 @@ export class DynamicComponent implements OnInit {
     },
     {
       tag: 'mwc-icon',
-      url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
+      url: 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module',
       content: 'replay',
       actionName: 'reset',
     },
@@ -91,7 +91,7 @@ export class DynamicComponent implements OnInit {
   }
 }
 
-export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module' -->;
+export const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module' -->;
 <ax-lazy-element *axLazyElementDynamic="'mwc-button', url: url; module: true"
      [outlined]="true"
      (click)="increment()">
@@ -140,7 +140,7 @@ export const CODE_EXAMPLE_3_HTML = `<ng-container *ngFor="let c of dynamicConfig
 dynamicConfigs = [
   {
     tag: 'mwc-button',
-    url: 'https://unpkg.com/@material/mwc-button@0.18.0/mwc-button.js?module',
+    url: 'https://unpkg.com/@material/mwc-button@0.27.0/mwc-button.js?module',
     isModule: true,
     content: 'Increment',
     actionName: 'increment'
@@ -153,7 +153,7 @@ dynamicConfigs = [
   },
   {
     tag: 'mwc-icon',
-    url: 'https://unpkg.com/@material/mwc-icon@0.18.0/mwc-icon.js?module',
+    url: 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module',
     content: 'replay',
     actionName: 'reset'
   }
diff --git a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.routes.ts b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.routes.ts
index 5e735ad..63c8541 100644
--- a/projects/elements-demo/src/app/features/examples/dynamic/dynamic.routes.ts
+++ b/projects/elements-demo/src/app/features/examples/dynamic/dynamic.routes.ts
@@ -1,25 +1,28 @@
 import { importProvidersFrom } from '@angular/core';
 import { Routes } from '@angular/router';
 import {
-  LazyElementModuleOptions,
-  LazyElementsModule,
+  ElementConfig,
+  provideAxLazyElementsConfigs,
 } from '@angular-extensions/elements';
 
 import { DynamicComponent } from './dynamic.component';
 
-const options: LazyElementModuleOptions = {
-  elementConfigs: [
-    {
-      tag: 'wired-button',
-      url: 'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js',
-    },
-  ],
-};
+const configs: ElementConfig[] = [
+  {
+    tag: 'wired-button',
+    url: 'https://unpkg.com/wired-elements@1.0.0/dist/wired-elements.bundled.js',
+  },
+];
 
 export default <Routes>[
   {
+    providers: [provideAxLazyElementsConfigs(configs)],
     path: '',
-    component: DynamicComponent,
-    providers: [importProvidersFrom(LazyElementsModule.forFeature(options))],
+    children: [
+      {
+        path: '',
+        component: DynamicComponent,
+      },
+    ],
   },
 ];
diff --git a/projects/elements-demo/src/app/features/examples/testing/testing.component.ts b/projects/elements-demo/src/app/features/examples/testing/testing.component.ts
index ecf3e11..310693b 100644
--- a/projects/elements-demo/src/app/features/examples/testing/testing.component.ts
+++ b/projects/elements-demo/src/app/features/examples/testing/testing.component.ts
@@ -1,6 +1,6 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { LazyElementsModule } from '@angular-extensions/elements';
+import { LazyElementDirective } from '@angular-extensions/elements';
 import { HighlightModule } from 'ngx-highlightjs';
 
 @Component({
@@ -8,7 +8,7 @@ import { HighlightModule } from 'ngx-highlightjs';
   templateUrl: './testing.component.html',
   styleUrls: ['./testing.component.scss'],
   standalone: true,
-  imports: [RouterLink, LazyElementsModule, HighlightModule],
+  imports: [RouterLink, LazyElementDirective, HighlightModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class TestingComponent implements OnInit {
diff --git a/projects/elements-demo/src/app/features/home/home.component.html b/projects/elements-demo/src/app/features/home/home.component.html
index e7e298d..77b7ede 100644
--- a/projects/elements-demo/src/app/features/home/home.component.html
+++ b/projects/elements-demo/src/app/features/home/home.component.html
@@ -57,20 +57,20 @@ <h2>Quickstart</h2>
   <li>
     Add
     <code>
-      import &#123; LazyElementsModule &#125; from
+      import &#123; LazyElementDirective &#125; from
       '&#64;angular-extensions/elements';
     </code>
   </li>
   <li>
-    Append <code>LazyElementsModule</code> to the <code>imports: []</code> of
+    Append <code>LazyElementDirective</code> to the <code>imports: []</code> of
     your
-    <code>AppModule</code>
+    <code>MyOrgComponent</code>
   </li>
   <li>
     Add new <code>schemas: []</code> property with
     <code>CUSTOM_ELEMENTS_SCHEMA</code> value to
-    <code>&#64;NgModule</code> decorator of your
-    <code>AppModule</code>
+    <code>&#64;Component</code> decorator of your
+    <code>MyOrgComponent</code>
   </li>
   <li>
     Use <code>*axLazyElement</code> directive on an element you wish to load and
diff --git a/projects/elements-demo/src/app/features/home/home.component.ts b/projects/elements-demo/src/app/features/home/home.component.ts
index 9d38046..0667473 100644
--- a/projects/elements-demo/src/app/features/home/home.component.ts
+++ b/projects/elements-demo/src/app/features/home/home.component.ts
@@ -39,7 +39,10 @@ export class HomeComponent implements OnInit {
 }
 
 const CODE_EXAMPLE_COMPONENT = `@Component({
+  standalone: true,
   selector: 'your-org-feature',
+  imports: [LazyElementDirective]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: \`
     <!-- will be lazy loaded and uses standard Angular template bindings -->
     <some-element
@@ -50,7 +53,7 @@ const CODE_EXAMPLE_COMPONENT = `@Component({
     </some-element>
   \`
 })
-export class FeatureComponent {
+export class MyOrgComponent {
   elementUrl = 'https://your-org.com/elements/some-element.js';
 
   data: SomeData;
diff --git a/projects/elements-demo/src/main.ts b/projects/elements-demo/src/main.ts
index 43ee3ab..315a1d6 100644
--- a/projects/elements-demo/src/main.ts
+++ b/projects/elements-demo/src/main.ts
@@ -2,7 +2,7 @@ import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
-import { LazyElementsModule } from '@angular-extensions/elements';
+import { provideAxLazyElements } from '@angular-extensions/elements';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 
@@ -44,13 +44,11 @@ bootstrapApplication(AppComponent, {
         onSameUrlNavigation: 'reload',
       }),
     ),
-    importProvidersFrom(
-      LazyElementsModule.forRoot({
-        rootOptions: {
-          errorComponent: RootErrorComponent,
-        },
-      }),
-    ),
+    provideAxLazyElements({
+      rootOptions: {
+        errorComponent: RootErrorComponent,
+      },
+    }),
     HIGHLIGHT_JS_PROVIDER,
     importProvidersFrom(
       ServiceWorkerModule.register('ngsw-worker.js', {
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.interface.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.interface.ts
index 175f083..d716e2f 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-elements.interface.ts
+++ b/projects/elements/src/lib/lazy-elements/lazy-elements.interface.ts
@@ -42,3 +42,9 @@ export interface LazyElementRootOptions {
   preload?: boolean;
   hooks?: HooksConfig;
 }
+
+// provide APIs
+export interface LazyElementOptions {
+  elementConfigs?: ElementConfig[];
+  rootOptions?: LazyElementRootOptions;
+}
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts
index 63cc118..854303f 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts
+++ b/projects/elements/src/lib/lazy-elements/lazy-elements.module.spec.ts
@@ -73,7 +73,7 @@ describe('LazyElementsModule', () => {
     }
     expect(caughtError).toBeDefined();
     expect(caughtError.message).toContain(
-      'LazyElementsModule.forRoot() called twice. Feature modules should use LazyElementsModule.forFeature() instead.',
+      'LazyElementsModule.forRoot() called twice. Lazy feature modules should use LazyElementsModule.forFeature() instead.',
     );
   });
 });
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts
index 9a6deb3..9f5e471 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts
+++ b/projects/elements/src/lib/lazy-elements/lazy-elements.module.ts
@@ -28,7 +28,7 @@ export function createLazyElementRootGuard(
 ) {
   if (ngDevMode && rootOptions) {
     throw new TypeError(
-      `LazyElementsModule.forRoot() called twice. Feature modules should use LazyElementsModule.forFeature() instead.`,
+      `LazyElementsModule.forRoot() called twice. Lazy feature modules should use LazyElementsModule.forFeature() instead.`,
     );
   }
   return 'LazyElementsModule.forRoot() multiple execution guard';
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.providers.spec.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.providers.spec.ts
new file mode 100644
index 0000000..133ea4e
--- /dev/null
+++ b/projects/elements/src/lib/lazy-elements/lazy-elements.providers.spec.ts
@@ -0,0 +1,81 @@
+import { provideRouter, Router } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import {
+  provideAxLazyElements,
+  provideAxLazyElementsConfigs,
+} from './lazy-elements.providers';
+
+const config = {
+  elementConfigs: [
+    { tag: 'some-element', url: 'http://elements.com/some-url' },
+    { tag: 'some-element', url: 'http://elements.com/some-url' },
+    {
+      tag: 'some-other-element',
+      url: 'http://elements.com/some-other-url',
+    },
+    {
+      tag: 'some-module-element',
+      url: 'http://elements.com/some-module-url',
+      isModule: true,
+    },
+  ],
+};
+
+@NgModule({
+  providers: [provideAxLazyElementsConfigs([])],
+})
+class LazyFeature {}
+
+@NgModule({
+  providers: [provideAxLazyElements({})],
+})
+class LazyFeatureToTestRootConfig {}
+
+describe('provideAxLazyElements', () => {
+  let router: Router;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideAxLazyElements(config),
+        provideRouter([
+          {
+            path: 'feature',
+            loadChildren: () => LazyFeature,
+          },
+          {
+            path: 'root',
+            loadChildren: () => LazyFeatureToTestRootConfig,
+          },
+        ]),
+      ],
+    });
+    router = TestBed.inject(Router);
+    router.initialNavigation();
+  });
+
+  it('provideAxLazyElementsConfigs() can be called twice', async () => {
+    let caughtError: Error | null = null;
+    try {
+      await router.navigate(['/feature']);
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBeNull();
+  });
+
+  it('provideAxLazyElements() cannot be called twice', async () => {
+    let caughtError: Error | null = null;
+    try {
+      await router.navigate(['/root']);
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBeDefined();
+    expect(caughtError.message).toContain(
+      'provideAxLazyElements() called twice. Lazy feature modules should use provideAxLazyElementsConfigs() instead.',
+    );
+  });
+});
diff --git a/projects/elements/src/lib/lazy-elements/lazy-elements.providers.ts b/projects/elements/src/lib/lazy-elements/lazy-elements.providers.ts
new file mode 100644
index 0000000..a467316
--- /dev/null
+++ b/projects/elements/src/lib/lazy-elements/lazy-elements.providers.ts
@@ -0,0 +1,106 @@
+import {
+  ENVIRONMENT_INITIALIZER,
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  Optional,
+  SkipSelf,
+} from '@angular/core';
+
+import {
+  ElementConfig,
+  LazyElementOptions,
+  LazyElementRootOptions,
+} from './lazy-elements.interface';
+import {
+  LAZY_ELEMENT_CONFIGS,
+  LAZY_ELEMENT_ROOT_OPTIONS,
+  LAZY_ELEMENT_ROOT_GUARD,
+} from './lazy-elements.tokens';
+import { LazyElementsLoaderService } from './lazy-elements-loader.service';
+
+import './ng-dev-mode';
+
+export function createProvideLazyElementsGuard(
+  rootOptions: LazyElementRootOptions,
+) {
+  if (ngDevMode && rootOptions) {
+    throw new TypeError(
+      `provideAxLazyElements() called twice. Lazy feature modules should use provideAxLazyElementsConfigs() instead.`,
+    );
+  }
+  return 'provideAxLazyElements() multiple execution guard';
+}
+
+export function provideAxLazyElements(
+  options: LazyElementOptions,
+): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: LAZY_ELEMENT_CONFIGS,
+      useValue: options && options.elementConfigs ? options.elementConfigs : [],
+      multi: true,
+    },
+    {
+      provide: LAZY_ELEMENT_ROOT_OPTIONS,
+      useValue: options.rootOptions ? options.rootOptions : {},
+    },
+    {
+      provide: LAZY_ELEMENT_ROOT_GUARD,
+      useFactory: createProvideLazyElementsGuard,
+      deps: [[LAZY_ELEMENT_ROOT_OPTIONS, new Optional(), new SkipSelf()]],
+    },
+    {
+      multi: true,
+      provide: ENVIRONMENT_INITIALIZER,
+      useValue: () => {
+        inject(LAZY_ELEMENT_ROOT_GUARD, { optional: true });
+
+        const lazyElementsLoaderService = inject(LazyElementsLoaderService);
+        const elementConfigsMultiProvider = inject<ElementConfig[][]>(
+          LAZY_ELEMENT_CONFIGS,
+          { optional: true },
+        );
+
+        if (elementConfigsMultiProvider && elementConfigsMultiProvider.length) {
+          elementConfigsMultiProvider
+            .filter((configs) => configs.some((config) => !config.isAdded))
+            .forEach((configs) =>
+              lazyElementsLoaderService.addConfigs(configs),
+            );
+        }
+      },
+    },
+  ]);
+}
+
+export function provideAxLazyElementsConfigs(configs: ElementConfig[]) {
+  return makeEnvironmentProviders([
+    {
+      provide: LAZY_ELEMENT_CONFIGS,
+      useValue: configs && configs.length ? configs : [],
+      multi: true,
+    },
+    {
+      multi: true,
+      provide: ENVIRONMENT_INITIALIZER,
+      useValue: () => {
+        inject(LAZY_ELEMENT_ROOT_GUARD, { optional: true });
+
+        const lazyElementsLoaderService = inject(LazyElementsLoaderService);
+        const elementConfigsMultiProvider = inject<ElementConfig[][]>(
+          LAZY_ELEMENT_CONFIGS,
+          { optional: true },
+        );
+
+        if (elementConfigsMultiProvider && elementConfigsMultiProvider.length) {
+          elementConfigsMultiProvider
+            .filter((configs) => configs.some((config) => !config.isAdded))
+            .forEach((configs) =>
+              lazyElementsLoaderService.addConfigs(configs),
+            );
+        }
+      },
+    },
+  ]);
+}
diff --git a/projects/elements/src/lib/lazy-elements/public_api.ts b/projects/elements/src/lib/lazy-elements/public_api.ts
index d6c6d3b..de633f1 100644
--- a/projects/elements/src/lib/lazy-elements/public_api.ts
+++ b/projects/elements/src/lib/lazy-elements/public_api.ts
@@ -1,6 +1,7 @@
 export * from './lazy-elements.interface';
 export * from './lazy-elements.tokens';
 export * from './lazy-elements.module';
+export * from './lazy-elements.providers';
 export * from './lazy-elements-loader.service';
 export * from './lazy-element/lazy-element.directive';
 export * from './lazy-element-dynamic/lazy-element-dynamic.directive';