diff --git a/.editorconfig b/.editorconfig
index 6e87a003da..e89330a618 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-# Editor configuration, see http://editorconfig.org
+# Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
diff --git a/README.md b/README.md
index bdff34ff81..8891c7de6a 100644
--- a/README.md
+++ b/README.md
@@ -101,19 +101,19 @@ npm install ngx-bootstrap --save
 
 Add wanted package to NgModule imports:
 
-```
+```ts
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   ...
-  imports: [TooltipModule.forRoot(),...]
+  imports: [TooltipModule,...]
   ...
 })
 ```
 
 Add component to your page:
 
-```
+```html
 <button type="button" class="btn btn-primary"
         tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Simple demo
@@ -126,14 +126,14 @@ This can be done with the css file directly in the index.html, or alternatively
 
 - `Bootstrap 5`
 
-```
+```html
 <!--- index.html -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 ```
 
 - `Bootstrap 4`
 
-```
+```html
 <!--- index.html -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2">
 ```
@@ -148,7 +148,7 @@ have a customized version of bootstrap. The consequence is that the process of d
 be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the bootstrapping
 component (i.e. `AppComponent`):
 
-```
+```ts
 import { setTheme } from 'ngx-bootstrap/utils';
 
 @Component({...})
diff --git a/apps/ngx-bootstrap-docs/src/app/app.module.ts b/apps/ngx-bootstrap-docs/src/app/app.module.ts
index 92a30bc309..09cf7ab7b9 100644
--- a/apps/ngx-bootstrap-docs/src/app/app.module.ts
+++ b/apps/ngx-bootstrap-docs/src/app/app.module.ts
@@ -1,7 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { environment } from '../environments/environment';
@@ -15,8 +14,8 @@ import { routes } from './app.routing';
     ],
     bootstrap: [AppComponent], imports: [BrowserAnimationsModule,
         DocsModule,
-        RouterModule.forRoot(routes, { useHash: environment.useHash }),
-        BsDropdownModule.forRoot()], providers: [
+        RouterModule.forRoot(routes, { useHash: environment.useHash })
+        ], providers: [
         { provide: NgApiDoc, useValue: ngdoc },
         { provide: DOCS_TOKENS, useValue: routes },
         { provide: SIDEBAR_ROUTES, useValue: SidebarRoutesStructure },
diff --git a/apps/ngx-bootstrap-docs/src/assets/css/style.scss b/apps/ngx-bootstrap-docs/src/assets/css/style.scss
index 8020c1da36..3db1f2272a 100644
--- a/apps/ngx-bootstrap-docs/src/assets/css/style.scss
+++ b/apps/ngx-bootstrap-docs/src/assets/css/style.scss
@@ -2,7 +2,9 @@
 @import "bs-datepicker";
 
 /* HEADER */
-
+.bs-datepicker-head {
+  width: 150px;
+}
 header {
   padding: 10px 50px 10px 30px;
   height: $header-height;
diff --git a/apps/ngx-bootstrap-docs/src/assets/json/current-version.json b/apps/ngx-bootstrap-docs/src/assets/json/current-version.json
index fba18155b3..7f9a58507d 100644
--- a/apps/ngx-bootstrap-docs/src/assets/json/current-version.json
+++ b/apps/ngx-bootstrap-docs/src/assets/json/current-version.json
@@ -1,3 +1,3 @@
 {
-  "version": "18.0.0"
+  "version": "18.1.2"
 }
diff --git a/libs/common-docs/src/lib/common/documentation/documentation.component.html b/libs/common-docs/src/lib/common/documentation/documentation.component.html
index ae40a3d03a..332a04922f 100644
--- a/libs/common-docs/src/lib/common/documentation/documentation.component.html
+++ b/libs/common-docs/src/lib/common/documentation/documentation.component.html
@@ -112,6 +112,22 @@ <h2 id="installation">
         <a class="anchor-link" routerLink="." fragment="installation">#</a>
       </h2>
       <h4>Angular CLI way</h4>
+      <p>Make sure that your app uses modular approach and you have app.module.ts set as your starting point before you proceed</p>
+      <pre class="prettyprint lang-js prettyprinted">
+<span class="kwd">import</span><span class="pln"> </span><span class="pun">{{'{'}}</span><span class="kwd"> platformBrowser </span><span
+        class="pun">{{'}'}}</span><span class="pln"> from </span><span class="str">'&#64;angular/platform-browser'</span><span
+        class="pun">;</span>
+<span class="kwd">import</span><span class="pln"> </span><span class="pun">{{'{'}}</span><span class="kwd"> AppModule </span><span
+        class="pun">{{'}'}}</span><span class="pln"> from </span><span class="str">'./app.module'</span><span
+class="pun">;</span>
+<span class="pln">&nbsp;</span>
+<span class="pun">platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));</span>
+      </pre>
+<!--          // main.ts-->
+<!--          import { platformBrowser } from '&#64;angular/platform-browser';-->
+<!--          import { AppModule } from './app.module';-->
+
+<!--          platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));-->
       <p>Use the Angular CLI ng add command for updating your Angular project.</p>
       <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx-bootstrap</span></pre>
 
@@ -233,7 +249,7 @@ <h2 id="compatibility">
         </thead>
         <tbody>
           <tr>
-            <th>13.x.x</th>
+            <th>18.x.x</th>
             <th>18.x.x</th>
             <th>5.x.x or 4.x.x</th>
           </tr>
diff --git a/libs/common-docs/src/lib/common/schematics/schematics.component.html b/libs/common-docs/src/lib/common/schematics/schematics.component.html
index e3c89fbff3..bee3230604 100644
--- a/libs/common-docs/src/lib/common/schematics/schematics.component.html
+++ b/libs/common-docs/src/lib/common/schematics/schematics.component.html
@@ -138,7 +138,7 @@ <h2 id="getting-started">Schematics</h2>
     ],
     <span class="kwd">imports</span>: [
         <span class="pln">  &hellip;</span>
-        <span class="lit">AccordionModule.forRoot()</span>,
+        <span class="lit">AccordionModule</span>,
     ],
         bootstrap: [AppComponent]
     <span class="pun">{{'}'}}</span>)
diff --git a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts
index ba874f9e36..916aa27eb2 100644
--- a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts
+++ b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts
@@ -20,7 +20,7 @@ export { ExamplesComponent } from './examples.component';
     CommonModule,
     NgApiDocModule,
     RouterModule,
-    TabsModule.forRoot(),
+    TabsModule,
   ],
   exports: [
     ExamplesComponent,
diff --git a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts
index bcc6c66c87..99d8fbfde8 100644
--- a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts
+++ b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts
@@ -25,8 +25,8 @@ import { ${className === 'DemoModalServiceFromComponent' ? `${className}, ModalC
   declarations: [${className === 'DemoModalServiceFromComponent' ? `${className}, ModalContentComponent` : className}],
   imports: [
     ${moduleData.moduleName}.forRoot(),
-    ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule.forRoot(),
-    PopoverModule.forRoot(),` : ''}
+    ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule,
+    PopoverModule,` : ''}
     BrowserAnimationsModule,
     CommonModule,
     FormsModule,
diff --git a/libs/common-docs/src/lib/docs.module.ts b/libs/common-docs/src/lib/docs.module.ts
index c5ebec82ef..63d909c472 100644
--- a/libs/common-docs/src/lib/docs.module.ts
+++ b/libs/common-docs/src/lib/docs.module.ts
@@ -79,8 +79,8 @@ export { ThemesComponent } from './common/themes/themes.component';
     NgApiDocModule,
     ExamplesComponentModule,
     ApiSectionsComponentModule,
-    TabsModule.forRoot(),
-    BsDropdownModule.forRoot(),
+    TabsModule,
+    BsDropdownModule,
     RouterModule
   ],
   exports: [
diff --git a/libs/doc-pages/accordion/src/lib/accordion.module.ts b/libs/doc-pages/accordion/src/lib/accordion.module.ts
index 8cdc8ced3e..06e856a2d8 100644
--- a/libs/doc-pages/accordion/src/lib/accordion.module.ts
+++ b/libs/doc-pages/accordion/src/lib/accordion.module.ts
@@ -17,7 +17,7 @@ export { AccordionSectionComponent } from './accordion-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AccordionModule.forRoot(),
+        AccordionModule,
         CommonModule,
         FormsModule,
         DocsModule,
diff --git a/libs/doc-pages/accordion/src/lib/docs/usage.md b/libs/doc-pages/accordion/src/lib/docs/usage.md
index 7f803207de..e27b73912e 100644
--- a/libs/doc-pages/accordion/src/lib/docs/usage.md
+++ b/libs/doc-pages/accordion/src/lib/docs/usage.md
@@ -1,3 +1,21 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AccordionComponent, AccordionPanelComponent } from 'ngx-bootstrap/accordion';
+
+@Component({
+  standalone: true,
+  imports: [
+    BrowserAnimationsModule,
+    AccordionComponent,
+    AccordionPanelComponent
+    ...
+  ]
+})
+export class AppComponent(){}
+
+Also should be added web-animations-js polyfill for IE browser (Edge)
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AccordionModule } from 'ngx-bootstrap/accordion';
@@ -5,7 +23,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    AccordionModule.forRoot(),
+    AccordionModule,
     ...
   ]
 })
diff --git a/libs/doc-pages/alerts/src/lib/alerts.module.ts b/libs/doc-pages/alerts/src/lib/alerts.module.ts
index 61b8bfe9ae..b706ee6b07 100644
--- a/libs/doc-pages/alerts/src/lib/alerts.module.ts
+++ b/libs/doc-pages/alerts/src/lib/alerts.module.ts
@@ -15,7 +15,7 @@ export { AlertsSectionComponent } from './alerts-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AlertModule.forRoot(),
+        AlertModule,
         CommonModule,
         DocsModule,
         RouterModule.forChild(routes)
diff --git a/libs/doc-pages/alerts/src/lib/docs/usage.md b/libs/doc-pages/alerts/src/lib/docs/usage.md
index 9377ee9726..2538714a2d 100644
--- a/libs/doc-pages/alerts/src/lib/docs/usage.md
+++ b/libs/doc-pages/alerts/src/lib/docs/usage.md
@@ -1,6 +1,17 @@
+### Standalone component usage
+import { AlertComponent } from 'ngx-bootstrap/alert';
+
+@Components({
+  standalone: true,
+  imports: [AlertComponent,...]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { AlertModule } from 'ngx-bootstrap/alert';
 
 @NgModule({
-  imports: [AlertModule.forRoot(),...]
+  imports: [AlertModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/buttons/src/lib/buttons.module.ts b/libs/doc-pages/buttons/src/lib/buttons.module.ts
index f5c2d6ce69..dc843fcb4e 100644
--- a/libs/doc-pages/buttons/src/lib/buttons.module.ts
+++ b/libs/doc-pages/buttons/src/lib/buttons.module.ts
@@ -22,7 +22,7 @@ export { ButtonsSectionComponent } from './buttons-section.component';
         CommonModule,
         DocsModule,
         RouterModule.forChild(routes),
-        ButtonsModule.forRoot()
+        ButtonsModule
     ],
     exports: [ButtonsSectionComponent]
 })
diff --git a/libs/doc-pages/buttons/src/lib/docs/usage.md b/libs/doc-pages/buttons/src/lib/docs/usage.md
index e2f35603f9..1dcb59c41d 100644
--- a/libs/doc-pages/buttons/src/lib/docs/usage.md
+++ b/libs/doc-pages/buttons/src/lib/docs/usage.md
@@ -1,6 +1,19 @@
+### Standalone component usage
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
+
+@Component({
+  imports: [
+    ButtonsModule,
+    ...
+  ]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 
 @NgModule({
-  imports: [ButtonsModule.forRoot(),...]
+  imports: [ButtonsModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/carousel/src/lib/carousel.module.ts b/libs/doc-pages/carousel/src/lib/carousel.module.ts
index 331b263cce..b25d084e33 100644
--- a/libs/doc-pages/carousel/src/lib/carousel.module.ts
+++ b/libs/doc-pages/carousel/src/lib/carousel.module.ts
@@ -16,7 +16,7 @@ export { CarouselSectionComponent } from './carousel-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        CarouselModule.forRoot(),
+        CarouselModule,
         CommonModule,
         FormsModule,
         DocsModule,
diff --git a/libs/doc-pages/carousel/src/lib/docs/usage.md b/libs/doc-pages/carousel/src/lib/docs/usage.md
index 771bca859f..c08c4f3ac1 100644
--- a/libs/doc-pages/carousel/src/lib/docs/usage.md
+++ b/libs/doc-pages/carousel/src/lib/docs/usage.md
@@ -1,6 +1,19 @@
+### Standalone component usage
+import { CarouselModule } from 'ngx-bootstrap/carousel';
+
+@Component({
+  imports: [
+    CarouselModule,
+    ...
+]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 
 @NgModule({
-  imports: [CarouselModule.forRoot(),...]
+  imports: [CarouselModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/collapse/src/lib/collapse.module.ts b/libs/doc-pages/collapse/src/lib/collapse.module.ts
index 0608a8280a..3fc120c352 100644
--- a/libs/doc-pages/collapse/src/lib/collapse.module.ts
+++ b/libs/doc-pages/collapse/src/lib/collapse.module.ts
@@ -17,7 +17,7 @@ export { CollapseSectionComponent } from './collapse-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        CollapseModule.forRoot(),
+        CollapseModule,
         CommonModule,
         FormsModule,
         DocsModule,
diff --git a/libs/doc-pages/collapse/src/lib/docs/usage.md b/libs/doc-pages/collapse/src/lib/docs/usage.md
index 0a93782a8d..9294e7d0c8 100644
--- a/libs/doc-pages/collapse/src/lib/docs/usage.md
+++ b/libs/doc-pages/collapse/src/lib/docs/usage.md
@@ -1,3 +1,19 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CollapseDirective } from 'ngx-bootstrap/collapse';
+
+@Component({
+  imports: [
+    BrowserAnimationsModule,
+    CollapseDirective,
+    ...
+  ]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { CollapseModule } from 'ngx-bootstrap/collapse';
@@ -5,7 +21,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    CollapseModule.forRoot(),
+    CollapseModule,
     ...
   ]
 })
diff --git a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts
index 6b096a1b80..35920e95b0 100644
--- a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts
+++ b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts
@@ -10,7 +10,7 @@ import {
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esUsLocale, etLocale, frLocale, heLocale,
   hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale, nbLocale,
   nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale, trLocale, viLocale,
-  zhCnLocale, ukLocale
+  zhCnLocale, ukLocale, frCaLocale
 } from 'ngx-bootstrap/locale';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -26,7 +26,7 @@ const locales = [
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esUsLocale, etLocale, frLocale,
   heLocale, hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale,
   nbLocale, nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale,
-  trLocale, ukLocale, viLocale, zhCnLocale
+  trLocale, ukLocale, viLocale, zhCnLocale, frCaLocale
 ];
 
 locales.forEach((locale: LocaleData) => {
@@ -43,8 +43,8 @@ locales.forEach((locale: LocaleData) => {
         ...DEMO_COMPONENTS
     ],
     imports: [
-        BsDatepickerModule.forRoot(),
-        TabsModule.forRoot(),
+        BsDatepickerModule,
+        TabsModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
diff --git a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts
index 72c4f5ba41..4c6894e684 100644
--- a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts
+++ b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts
@@ -10,7 +10,7 @@ import {
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esPrLocale, esUsLocale, etLocale, frLocale, heLocale,
   hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale, nbLocale,
   nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale, trLocale, viLocale,
-  zhCnLocale, ukLocale
+  zhCnLocale, ukLocale, frCaLocale
 } from 'ngx-bootstrap/locale';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -24,7 +24,7 @@ const locales = [
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esPrLocale, esUsLocale, etLocale, frLocale,
   heLocale, hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale,
   nbLocale, nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale,
-  trLocale, ukLocale, viLocale, zhCnLocale
+  trLocale, ukLocale, viLocale, zhCnLocale, frCaLocale
 ];
 
 locales.forEach((locale: LocaleData) => {
@@ -41,8 +41,8 @@ locales.forEach((locale: LocaleData) => {
         ...DEMO_COMPONENTS
     ],
     imports: [
-        BsDatepickerModule.forRoot(),
-        TabsModule.forRoot(),
+        BsDatepickerModule,
+        TabsModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
diff --git a/libs/doc-pages/datepicker/src/lib/docs/usage.md b/libs/doc-pages/datepicker/src/lib/docs/usage.md
index a2799ce796..dbd68f24fd 100644
--- a/libs/doc-pages/datepicker/src/lib/docs/usage.md
+++ b/libs/doc-pages/datepicker/src/lib/docs/usage.md
@@ -1,3 +1,19 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+
+@Components({
+  imports: [
+    BrowserAnimationsModule,
+    BsDatepickerModule,
+    ...
+  ]
+})
+export class AppComponents(){}
+
+
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -5,7 +21,7 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    BsDatepickerModule.forRoot(),
+    BsDatepickerModule,
     ...
   ]
 })
diff --git a/libs/doc-pages/dropdown/src/lib/docs/usage.md b/libs/doc-pages/dropdown/src/lib/docs/usage.md
index da282ecc1b..d553ac89b7 100644
--- a/libs/doc-pages/dropdown/src/lib/docs/usage.md
+++ b/libs/doc-pages/dropdown/src/lib/docs/usage.md
@@ -1,3 +1,20 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { BsDropdownModule } from 'ngx-bootstrap/datepicker';
+
+@Components({
+  standalone: true,
+  imports: [
+    BrowserAnimationsModule,
+    BsDropdownModule,
+    ...
+  ]
+})
+export class AppComponents(){}
+
+
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -5,7 +22,7 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    BsDropdownModule.forRoot()
+    BsDropdownModule
   ]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/dropdown/src/lib/dropdown.module.ts b/libs/doc-pages/dropdown/src/lib/dropdown.module.ts
index 008a79d149..5e80244baf 100644
--- a/libs/doc-pages/dropdown/src/lib/dropdown.module.ts
+++ b/libs/doc-pages/dropdown/src/lib/dropdown.module.ts
@@ -17,7 +17,7 @@ export { DropdownSectionComponent } from './dropdown-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        BsDropdownModule.forRoot(),
+        BsDropdownModule,
         CommonModule,
         FormsModule,
         DocsModule,
diff --git a/libs/doc-pages/modal/src/lib/docs/usage.md b/libs/doc-pages/modal/src/lib/docs/usage.md
index 179a43940c..15a3beadd5 100644
--- a/libs/doc-pages/modal/src/lib/docs/usage.md
+++ b/libs/doc-pages/modal/src/lib/docs/usage.md
@@ -1,6 +1,18 @@
+### Standalone component usage
+import { ModalModule, BsModalService } from 'ngx-bootstrap/modal';
+
+@Component({
+  standalone: true,
+  imports: [ModalModule,...], // module can be optional
+  providers: [BsModalService]
+})
+export class AppComponent(){}
+
+### Module usage
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 @NgModule({
-  imports: [ModalModule.forRoot(),...]
+  imports: [ModalModule,...],
+  providers: [BsModalService]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/modal/src/lib/modal.module.ts b/libs/doc-pages/modal/src/lib/modal.module.ts
index cb0498270f..cad8420865 100644
--- a/libs/doc-pages/modal/src/lib/modal.module.ts
+++ b/libs/doc-pages/modal/src/lib/modal.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { ModalModule } from 'ngx-bootstrap/modal';
+import { BsModalService, ModalModule } from 'ngx-bootstrap/modal';
 
 import { DocsModule } from '@ngx-bootstrap-doc/docs';
 import { ModalSectionComponent } from './modal-section.component';
@@ -24,14 +24,15 @@ export { ModalSectionComponent } from './modal-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        ModalModule.forRoot(),
-        PopoverModule.forRoot(),
-        TooltipModule.forRoot(),
+        ModalModule,
+        PopoverModule,
+        TooltipModule,
         CommonModule,
         FormsModule,
         DocsModule,
         RouterModule.forChild(routes)
     ],
-    exports: [ModalSectionComponent]
+    exports: [ModalSectionComponent],
+    providers: [BsModalService]
 })
 export class DemoModalModule {}
diff --git a/libs/doc-pages/pagination/src/lib/docs/usage.md b/libs/doc-pages/pagination/src/lib/docs/usage.md
index 07f1cbb7ee..6e87078c94 100644
--- a/libs/doc-pages/pagination/src/lib/docs/usage.md
+++ b/libs/doc-pages/pagination/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { PaginationModule } from 'ngx-bootstrap/pagination';
+
+@Component({
+  standalone: true,
+  imports: [PaginationModule,...],
+})
+export class AppComponent(){}
+
+### Module usage
 import { PaginationModule } from 'ngx-bootstrap/pagination';
 
 @NgModule({
-  imports: [PaginationModule.forRoot(),...]
+  imports: [PaginationModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/pagination/src/lib/pagination.module.ts b/libs/doc-pages/pagination/src/lib/pagination.module.ts
index 1b1fb1900b..10b7ce1c2d 100644
--- a/libs/doc-pages/pagination/src/lib/pagination.module.ts
+++ b/libs/doc-pages/pagination/src/lib/pagination.module.ts
@@ -17,7 +17,7 @@ export { PaginationSectionComponent } from './pagination-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        PaginationModule.forRoot(),
+        PaginationModule,
         CommonModule,
         FormsModule,
         DocsModule,
diff --git a/libs/doc-pages/popover/src/lib/docs/usage.md b/libs/doc-pages/popover/src/lib/docs/usage.md
index 249cf11056..8fcd116a33 100644
--- a/libs/doc-pages/popover/src/lib/docs/usage.md
+++ b/libs/doc-pages/popover/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { PopoverModule } from 'ngx-bootstrap/popover';
+
+@Component({
+  standalone: true,
+  imports: [PopoverModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
 @NgModule({
-  imports: [PopoverModule.forRoot(),...]
+  imports: [PopoverModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/popover/src/lib/popover.module.ts b/libs/doc-pages/popover/src/lib/popover.module.ts
index 29db72567b..a4993a19df 100644
--- a/libs/doc-pages/popover/src/lib/popover.module.ts
+++ b/libs/doc-pages/popover/src/lib/popover.module.ts
@@ -20,7 +20,7 @@ export { PopoverSectionComponent } from './popover-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        PopoverModule.forRoot(),
+        PopoverModule,
         RouterModule.forChild(routes)
     ],
     exports: [PopoverSectionComponent]
diff --git a/libs/doc-pages/progressbar/src/lib/docs/usage.md b/libs/doc-pages/progressbar/src/lib/docs/usage.md
index 4e07857dcf..cfd43bec3e 100644
--- a/libs/doc-pages/progressbar/src/lib/docs/usage.md
+++ b/libs/doc-pages/progressbar/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
+
+@Component({
+  standalone: true,
+  imports: [ProgressbarModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 
 @NgModule({
-  imports: [ProgressbarModule.forRoot(),...]
+  imports: [ProgressbarModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/progressbar/src/lib/progressbar.module.ts b/libs/doc-pages/progressbar/src/lib/progressbar.module.ts
index 3fa7493cca..9de9163afa 100644
--- a/libs/doc-pages/progressbar/src/lib/progressbar.module.ts
+++ b/libs/doc-pages/progressbar/src/lib/progressbar.module.ts
@@ -20,7 +20,7 @@ export { ProgressbarSectionComponent } from './progressbar-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        ProgressbarModule.forRoot(),
+        ProgressbarModule,
         RouterModule.forChild(routes)
     ],
     exports: [ProgressbarSectionComponent]
diff --git a/libs/doc-pages/rating/src/lib/docs/usage.md b/libs/doc-pages/rating/src/lib/docs/usage.md
index 5d87d36b73..a3c6fce690 100644
--- a/libs/doc-pages/rating/src/lib/docs/usage.md
+++ b/libs/doc-pages/rating/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { RatingModule } from 'ngx-bootstrap/rating';
+
+@Component({
+  standalone: true,
+  imports: [RatingModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { RatingModule } from 'ngx-bootstrap/rating';
 
 @NgModule({
-  imports: [RatingModule.forRoot(),...]
+  imports: [RatingModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/rating/src/lib/rating.module.ts b/libs/doc-pages/rating/src/lib/rating.module.ts
index b6d50d84d5..6c5977037f 100644
--- a/libs/doc-pages/rating/src/lib/rating.module.ts
+++ b/libs/doc-pages/rating/src/lib/rating.module.ts
@@ -20,7 +20,7 @@ export { RatingSectionComponent } from './rating-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        RatingModule.forRoot(),
+        RatingModule,
         RouterModule.forChild(routes)
     ],
     exports: [RatingSectionComponent]
diff --git a/libs/doc-pages/sortable/src/lib/docs/usage.md b/libs/doc-pages/sortable/src/lib/docs/usage.md
index 9e361d631d..fcb9091a9a 100644
--- a/libs/doc-pages/sortable/src/lib/docs/usage.md
+++ b/libs/doc-pages/sortable/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { SortableModule } from 'ngx-bootstrap/sortable';
+
+@Component({
+  standalone: true,
+  imports: [SortableModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { SortableModule } from 'ngx-bootstrap/sortable';
 
 @NgModule({
-  imports: [SortableModule.forRoot(),...]
+  imports: [SortableModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/sortable/src/lib/sortable.module.ts b/libs/doc-pages/sortable/src/lib/sortable.module.ts
index 3f0c51ff49..0d0c837d25 100644
--- a/libs/doc-pages/sortable/src/lib/sortable.module.ts
+++ b/libs/doc-pages/sortable/src/lib/sortable.module.ts
@@ -20,7 +20,7 @@ export { SortableSectionComponent } from './sortable-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        SortableModule.forRoot(),
+        SortableModule,
         RouterModule.forChild(routes)
     ],
     exports: [SortableSectionComponent]
diff --git a/libs/doc-pages/tabs/src/lib/docs/usage.md b/libs/doc-pages/tabs/src/lib/docs/usage.md
index 338fa69b36..2bac90e16f 100644
--- a/libs/doc-pages/tabs/src/lib/docs/usage.md
+++ b/libs/doc-pages/tabs/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { TabsModule } from 'ngx-bootstrap/tabs';
+
+@Component({
+  standalone: true,
+  imports: [TabsModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
 @NgModule({
-  imports: [TabsModule.forRoot(),...]
+  imports: [TabsModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/tabs/src/lib/tabs.module.ts b/libs/doc-pages/tabs/src/lib/tabs.module.ts
index 595e725bb3..68824a2545 100644
--- a/libs/doc-pages/tabs/src/lib/tabs.module.ts
+++ b/libs/doc-pages/tabs/src/lib/tabs.module.ts
@@ -20,7 +20,7 @@ export { TabsSectionComponent } from './tabs-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        TabsModule.forRoot(),
+        TabsModule,
         RouterModule.forChild(routes)
     ],
     exports: [TabsSectionComponent]
diff --git a/libs/doc-pages/timepicker/src/lib/docs/usage.md b/libs/doc-pages/timepicker/src/lib/docs/usage.md
index 1ccef910f7..3a4b5b8c2b 100644
--- a/libs/doc-pages/timepicker/src/lib/docs/usage.md
+++ b/libs/doc-pages/timepicker/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+
+@Component({
+  standalone: true,
+  imports: [TimepickerModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 
 @NgModule({
-  imports: [TimepickerModule.forRoot(),...]
+  imports: [TimepickerModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/timepicker/src/lib/timepicker.module.ts b/libs/doc-pages/timepicker/src/lib/timepicker.module.ts
index 2079b441cb..85bdf36048 100644
--- a/libs/doc-pages/timepicker/src/lib/timepicker.module.ts
+++ b/libs/doc-pages/timepicker/src/lib/timepicker.module.ts
@@ -21,7 +21,7 @@ export { TimepickerSectionComponent } from './timepicker-section.component';
         FormsModule,
         ReactiveFormsModule,
         DocsModule,
-        TimepickerModule.forRoot(),
+        TimepickerModule,
         RouterModule.forChild(routes)
     ],
     exports: [TimepickerSectionComponent]
diff --git a/libs/doc-pages/tooltip/src/lib/docs/usage.md b/libs/doc-pages/tooltip/src/lib/docs/usage.md
index f35fe98d1d..c89ad98ffc 100644
--- a/libs/doc-pages/tooltip/src/lib/docs/usage.md
+++ b/libs/doc-pages/tooltip/src/lib/docs/usage.md
@@ -1,6 +1,16 @@
+### Standalone component usage
+import { TooltipModule } from 'ngx-bootstrap/timepicker';
+
+@Component({
+  standalone: true,
+  imports: [TooltipModule,...]
+})
+export class AppComponent(){}
+
+### Module usage
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
-  imports: [TooltipModule.forRoot(),...]
+  imports: [TooltipModule,...]
 })
 export class AppModule(){}
diff --git a/libs/doc-pages/tooltip/src/lib/tooltip.module.ts b/libs/doc-pages/tooltip/src/lib/tooltip.module.ts
index 8ee443d1b1..a63adde26f 100644
--- a/libs/doc-pages/tooltip/src/lib/tooltip.module.ts
+++ b/libs/doc-pages/tooltip/src/lib/tooltip.module.ts
@@ -20,7 +20,7 @@ export { TooltipSectionComponent } from './tooltip-section.component';
         CommonModule,
         FormsModule,
         DocsModule,
-        TooltipModule.forRoot(),
+        TooltipModule,
         RouterModule.forChild(routes)
     ],
     exports: [TooltipSectionComponent]
diff --git a/libs/doc-pages/typeahead/src/lib/docs/usage.md b/libs/doc-pages/typeahead/src/lib/docs/usage.md
index 843de6f716..5a7c9bb6b7 100644
--- a/libs/doc-pages/typeahead/src/lib/docs/usage.md
+++ b/libs/doc-pages/typeahead/src/lib/docs/usage.md
@@ -1,3 +1,18 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
+@Component({
+  standalone: true,
+  imports: [
+    BrowserAnimationsModule,
+    TypeaheadModule,
+    ...
+  ]
+})
+export class AppComponent(){}
+
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
@@ -5,7 +20,7 @@ import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    TypeaheadModule.forRoot(),
+    TypeaheadModule,
     ...
   ]
 })
diff --git a/libs/doc-pages/typeahead/src/lib/typeahead.module.ts b/libs/doc-pages/typeahead/src/lib/typeahead.module.ts
index e7c76c37c9..0a8ea17691 100644
--- a/libs/doc-pages/typeahead/src/lib/typeahead.module.ts
+++ b/libs/doc-pages/typeahead/src/lib/typeahead.module.ts
@@ -21,7 +21,7 @@ export { TypeaheadSectionComponent } from './typeahead-section.component';
         FormsModule,
         ReactiveFormsModule,
         DocsModule,
-        TypeaheadModule.forRoot(),
+        TypeaheadModule,
         RouterModule.forChild(routes)
     ],
     exports: [TypeaheadSectionComponent]
diff --git a/package-lock.json b/package-lock.json
index 6a18751841..ffb88e7452 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ngx-bootstrap-base",
-      "version": "18.0.0",
+      "version": "18.1.2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 86078f6343..ed0b68be09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap-base",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "license": "MIT",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "schematics": "./schematics/src/collection.json",
diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts
index f0dbc8ecd7..20e01f29a4 100644
--- a/src/accordion/accordion-group.component.ts
+++ b/src/accordion/accordion-group.component.ts
@@ -2,6 +2,8 @@ import {
   Component, HostBinding, Inject, Input, OnDestroy, OnInit, Output, EventEmitter
 } from '@angular/core';
 import { AccordionComponent } from './accordion.component';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { NgClass, NgIf } from '@angular/common';
 
 /**
  * ### Accordion heading
@@ -10,14 +12,16 @@ import { AccordionComponent } from './accordion.component';
  * will be used as group's header template.
  */
 @Component({
-  selector: 'accordion-group, accordion-panel',
-  templateUrl: './accordion-group.component.html',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    class: 'panel',
-    style: 'display: block'
-  },
-  styleUrls: ['./accordion.scss']
+    selector: 'accordion-group, accordion-panel',
+    templateUrl: './accordion-group.component.html',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        class: 'panel',
+        style: 'display: block'
+    },
+    styleUrls: ['./accordion.scss'],
+    standalone: true,
+    imports: [NgClass, NgIf, CollapseModule]
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
   /** turn on/off animation */
diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
index 6fd63d7cfa..c6782fa87a 100644
--- a/src/accordion/accordion.component.ts
+++ b/src/accordion/accordion.component.ts
@@ -4,15 +4,16 @@ import { AccordionConfig } from './accordion.config';
 
 /** Displays collapsible content panels for presenting information in a limited amount of space. */
 @Component({
-  selector: 'accordion',
-  template: `<ng-content></ng-content>`,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[attr.aria-multiselectable]': 'closeOthers',
-    role: 'tablist',
-    class: 'panel-group',
-    style: 'display: block'
-  }
+    selector: 'accordion',
+    template: `<ng-content></ng-content>`,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[attr.aria-multiselectable]': 'closeOthers',
+        role: 'tablist',
+        class: 'panel-group',
+        style: 'display: block'
+    },
+    standalone: true
 })
 export class AccordionComponent {
   /** turn on/off animation */
diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts
index 667f85686d..23541e2d23 100644
--- a/src/accordion/accordion.module.ts
+++ b/src/accordion/accordion.module.ts
@@ -1,17 +1,18 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { AccordionComponent } from './accordion.component';
 import { AccordionPanelComponent } from './accordion-group.component';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
 
 @NgModule({
-  imports: [CommonModule, CollapseModule],
-  declarations: [AccordionComponent, AccordionPanelComponent],
-  exports: [AccordionComponent, AccordionPanelComponent]
+    imports: [AccordionComponent, AccordionPanelComponent],
+    exports: [AccordionComponent, AccordionPanelComponent]
 })
 export class AccordionModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<AccordionModule> {
-    return { ngModule: AccordionModule, providers: [] };
+    return {
+      ngModule: AccordionModule,
+      providers: []
+    };
   }
 }
diff --git a/src/accordion/package.json b/src/accordion/package.json
index d69e0fea79..e79f72b000 100644
--- a/src/accordion/package.json
+++ b/src/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/accordion",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/accordion/testing/accordion.component.spec.ts b/src/accordion/testing/accordion.component.spec.ts
index 335a2c0eee..f2b097925f 100644
--- a/src/accordion/testing/accordion.component.spec.ts
+++ b/src/accordion/testing/accordion.component.spec.ts
@@ -4,8 +4,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AccordionConfig, AccordionModule } from '../index';
 
 @Component({
-  selector: 'accordion-test',
-  template: ''
+    selector: 'accordion-test',
+    template: ''
 })
 class TestAccordionComponent {
   oneAtATime = true;
@@ -77,10 +77,10 @@ describe('Component: Accordion', () => {
     TestBed.configureTestingModule({
       declarations: [TestAccordionComponent],
       imports: [
-        AccordionModule.forRoot(),
+        AccordionModule,
         BrowserAnimationsModule
       ]
-    });
+});
     TestBed.overrideComponent(TestAccordionComponent, {
       set: { template: html }
     });
diff --git a/src/alert/alert.component.ts b/src/alert/alert.component.ts
index 07885ae597..47b1c92176 100644
--- a/src/alert/alert.component.ts
+++ b/src/alert/alert.component.ts
@@ -9,11 +9,14 @@ import {
 } from '@angular/core';
 import { AlertConfig } from './alert.config';
 import { OnChange } from 'ngx-bootstrap/utils';
+import { NgIf, NgClass } from '@angular/common';
 
 @Component({
-  selector: 'alert,bs-alert',
-  templateUrl: './alert.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'alert,bs-alert',
+    templateUrl: './alert.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgIf, NgClass]
 })
 export class AlertComponent implements OnInit {
   /** Alert type.
diff --git a/src/alert/alert.module.ts b/src/alert/alert.module.ts
index c43aeb56bf..2cfca0257a 100644
--- a/src/alert/alert.module.ts
+++ b/src/alert/alert.module.ts
@@ -1,14 +1,16 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { AlertComponent } from './alert.component';
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [AlertComponent],
+    imports: [AlertComponent],
     exports: [AlertComponent]
 })
 export class AlertModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<AlertModule> {
-    return { ngModule: AlertModule, providers: [] };
+    return {
+      ngModule: AlertModule,
+      providers: []
+    };
   }
 }
diff --git a/src/alert/package.json b/src/alert/package.json
index 32b5f4f581..7d8c90b81c 100644
--- a/src/alert/package.json
+++ b/src/alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/alert",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/alert/testing/alert.component.spec.ts b/src/alert/testing/alert.component.spec.ts
index d589800d6d..e247d4888b 100644
--- a/src/alert/testing/alert.component.spec.ts
+++ b/src/alert/testing/alert.component.spec.ts
@@ -3,7 +3,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AlertComponent, AlertConfig, AlertModule  } from '../index';
 
-@Component({selector: 'alert-test', template: ''})
+@Component({
+    selector: 'alert-test', template: '',
+    standalone: true
+})
 class TestAlertComponent extends AlertComponent {
   constructor(config: AlertConfig, changeDetection: ChangeDetectorRef) {
     super(config, changeDetection);
@@ -25,9 +28,8 @@ describe('Component: Alert', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestAlertComponent],
-      imports: [AlertModule.forRoot()]
-    });
+    imports: [AlertModule, TestAlertComponent]
+});
     TestBed.overrideComponent(TestAlertComponent, {
       set: {template: overTemplate}
     });
diff --git a/src/buttons/button-checkbox.directive.ts b/src/buttons/button-checkbox.directive.ts
index fa60148960..7bd2a6552b 100644
--- a/src/buttons/button-checkbox.directive.ts
+++ b/src/buttons/button-checkbox.directive.ts
@@ -22,8 +22,9 @@ type AvailableValues = boolean | string | number;
  * Add checkbox functionality to any element
  */
 @Directive({
-  selector: '[btnCheckbox]',
-  providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR]
+    selector: '[btnCheckbox]',
+    providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR],
+    standalone: true
 })
 export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
   /** Truthy value, will be set to ngModel */
diff --git a/src/buttons/button-radio-group.directive.ts b/src/buttons/button-radio-group.directive.ts
index d4ad61c9d5..7e18ca1fc5 100644
--- a/src/buttons/button-radio-group.directive.ts
+++ b/src/buttons/button-radio-group.directive.ts
@@ -22,8 +22,9 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: Provider = {
  * A value of a selected button is bound to a variable specified via ngModel.
  */
 @Directive({
-  selector: '[btnRadioGroup]',
-  providers: [RADIO_CONTROL_VALUE_ACCESSOR]
+    selector: '[btnRadioGroup]',
+    providers: [RADIO_CONTROL_VALUE_ACCESSOR],
+    standalone: true
 })
 export class ButtonRadioGroupDirective implements ControlValueAccessor {
   onChange = Function.prototype;
diff --git a/src/buttons/button-radio.directive.ts b/src/buttons/button-radio.directive.ts
index 4a477a66ba..5f8004282e 100644
--- a/src/buttons/button-radio.directive.ts
+++ b/src/buttons/button-radio.directive.ts
@@ -27,8 +27,9 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: Provider = {
  * A value of a selected button is bound to a variable specified via ngModel.
  */
 @Directive({
-  selector: '[btnRadio]',
-  providers: [RADIO_CONTROL_VALUE_ACCESSOR]
+    selector: '[btnRadio]',
+    providers: [RADIO_CONTROL_VALUE_ACCESSOR],
+    standalone: true
 })
 export class ButtonRadioDirective implements ControlValueAccessor, OnChanges {
   onChange = Function.prototype;
diff --git a/src/buttons/buttons.module.ts b/src/buttons/buttons.module.ts
index 7c59bbe825..f2a4854d52 100644
--- a/src/buttons/buttons.module.ts
+++ b/src/buttons/buttons.module.ts
@@ -1,15 +1,19 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { ButtonCheckboxDirective } from './button-checkbox.directive';
 import { ButtonRadioDirective } from './button-radio.directive';
 import { ButtonRadioGroupDirective } from './button-radio-group.directive';
 
 @NgModule({
-  declarations: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective],
-  exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective]
+    imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective],
+    exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective]
 })
 export class ButtonsModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<ButtonsModule> {
-    return { ngModule: ButtonsModule, providers: [] };
+    return {
+      ngModule: ButtonsModule,
+      providers: []
+    };
   }
 }
diff --git a/src/buttons/package.json b/src/buttons/package.json
index fee7f3d4fd..a7c2292e0a 100644
--- a/src/buttons/package.json
+++ b/src/buttons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/buttons",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/buttons/testing/button.directive.spec.ts b/src/buttons/testing/button.directive.spec.ts
index 838a954020..618520f884 100644
--- a/src/buttons/testing/button.directive.spec.ts
+++ b/src/buttons/testing/button.directive.spec.ts
@@ -3,7 +3,11 @@ import { ComponentFixture, ComponentFixtureAutoDetect, fakeAsync, TestBed, tick
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonsModule } from '../index';
 
-@Component({ selector: 'buttons-test', template: '' })
+@Component({
+    selector: 'buttons-test', template: '',
+    standalone: true,
+    imports: [ButtonsModule, FormsModule, ReactiveFormsModule]
+})
 class TestButtonsComponent implements OnInit {
   singleModel = '0';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -136,10 +140,9 @@ describe('Directive: Buttons', () => {
   beforeEach(
     fakeAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TestButtonsComponent],
-        imports: [ButtonsModule, FormsModule, ReactiveFormsModule],
-        providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
-      });
+    imports: [ButtonsModule, FormsModule, ReactiveFormsModule, TestButtonsComponent],
+    providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
+});
     })
   );
 
diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts
index 366ed1ac82..c47e370251 100644
--- a/src/carousel/carousel.component.ts
+++ b/src/carousel/carousel.component.ts
@@ -18,7 +18,7 @@
 import {
   Component, EventEmitter, Input, NgZone, OnDestroy, Output, AfterViewInit, Inject, PLATFORM_ID
 } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, NgIf, NgFor, NgStyle } from '@angular/common';
 
 import { LinkedList, getBsVer, IBsVersion } from 'ngx-bootstrap/utils';
 import { SlideComponent } from './slide.component';
@@ -38,8 +38,10 @@ let _currentId = 1;
  * Base element to create carousel
  */
 @Component({
-  selector: 'carousel',
-  templateUrl: './carousel.component.html'
+    selector: 'carousel',
+    templateUrl: './carousel.component.html',
+    standalone: true,
+    imports: [NgIf, NgFor, NgStyle]
 })
 export class CarouselComponent implements AfterViewInit, OnDestroy {
   /* If `true` — carousel will not cycle continuously and will have hard stops (prevent looping) */
diff --git a/src/carousel/carousel.module.ts b/src/carousel/carousel.module.ts
index 03a86e0389..4bf02720f8 100644
--- a/src/carousel/carousel.module.ts
+++ b/src/carousel/carousel.module.ts
@@ -1,16 +1,18 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { CarouselComponent } from './carousel.component';
 import { SlideComponent } from './slide.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [SlideComponent, CarouselComponent],
-  exports: [SlideComponent, CarouselComponent]
+    imports: [SlideComponent, CarouselComponent],
+    exports: [SlideComponent, CarouselComponent]
 })
 export class CarouselModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<CarouselModule> {
-    return { ngModule: CarouselModule, providers: [] };
+    return {
+      ngModule: CarouselModule,
+      providers: []
+    };
   }
 }
diff --git a/src/carousel/package.json b/src/carousel/package.json
index b0c315151e..fd6ea5c7bf 100644
--- a/src/carousel/package.json
+++ b/src/carousel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/carousel",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/carousel/slide.component.ts b/src/carousel/slide.component.ts
index 87c310cc5b..3f4940904a 100644
--- a/src/carousel/slide.component.ts
+++ b/src/carousel/slide.component.ts
@@ -9,18 +9,18 @@ import {
 import { CarouselComponent } from './carousel.component';
 
 @Component({
-  selector: 'slide',
-  template: `
+    selector: 'slide',
+    template: `
     <div [class.active]="active" class="item">
       <ng-content></ng-content>
     </div>
   `,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[attr.aria-hidden]': '!active',
-    '[class.multilist-margin]': 'multilist'
-  },
-  styles: [`
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[attr.aria-hidden]': '!active',
+        '[class.multilist-margin]': 'multilist'
+    },
+    styles: [`
     :host.carousel-animation {
        transition: opacity 0.6s ease, visibility 0.6s ease;
        float: left;
@@ -41,7 +41,8 @@ import { CarouselComponent } from './carousel.component';
     :host.carousel-item {
       perspective: 1000px;
     }
-  `]
+  `],
+    standalone: true
 })
 export class SlideComponent implements OnInit, OnDestroy {
   /** Is current slide active */
diff --git a/src/carousel/testing/carousel.component.spec.ts b/src/carousel/testing/carousel.component.spec.ts
index f910e07310..332d6857e0 100644
--- a/src/carousel/testing/carousel.component.spec.ts
+++ b/src/carousel/testing/carousel.component.spec.ts
@@ -4,8 +4,13 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import '../../../scripts/jest/toHaveCssClass';
 import { CarouselModule } from '../index';
 import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils';
+import { CommonModule } from '@angular/common';
 
-@Component({ selector: 'carousel-test', template: '' })
+@Component({
+    selector: 'carousel-test', template: '',
+    standalone: true,
+    imports: [CommonModule, CarouselModule]
+})
 class TestCarouselComponent {
   myInterval = 5000;
   noWrapSlides = false;
@@ -84,9 +89,8 @@ describe('Component: Carousel', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestCarouselComponent],
-      imports: [CarouselModule]
-    });
+    imports: [CarouselModule, TestCarouselComponent]
+});
     TestBed.overrideComponent(TestCarouselComponent, {
       set: { template: html }
     });
diff --git a/src/chronos/i18n/fa.ts b/src/chronos/i18n/fa.ts
new file mode 100644
index 0000000000..d2a31df237
--- /dev/null
+++ b/src/chronos/i18n/fa.ts
@@ -0,0 +1,138 @@
+//! moment.js locale configuration
+//! locale : Persian [fa]
+//! author : Meysam Bahadori: https://github.com/MeysamBahadori
+
+import { LocaleData } from '../locale/locale.class';
+
+const symbolMap: {[key: string]: string} = {
+    1: '١',
+    2: '٢',
+    3: '٣',
+    4: '٤',
+    5: '٥',
+    6: '٦',
+    7: '٧',
+    8: '٨',
+    9: '٩',
+    0: '٠'
+  };
+
+const numberMap: {[key: string]: string} = {
+  '١': '1',
+  '٢': '2',
+  '٣': '3',
+  '٤': '4',
+  '٥': '5',
+  '٦': '6',
+  '٧': '7',
+  '٨': '8',
+  '٩': '9',
+  '٠': '0'
+};
+
+const pluralForm = function (num: number): number {
+    return num === 0 ? 0 : num === 1 ? 1 : num === 2 ? 2 : num % 100 >= 3 && num % 100 <= 10 ? 3 : num % 100 >= 11 ? 4 : 5;
+  };
+  
+var plurals : {[key: string]: [string, string, [string, string], string, string, string]} = {
+    s: ['کمتر از یک ثانیه', 'یک ثانیه', ['دو ثانیه', 'دو ثانیه'], '%d ثانیه', '%d ثانیه', '%d ثانیه'],
+    m: ['کمتر از یک دقیقه', 'یک دقیقه', ['دو دقیقه', 'دو دقیقه'], '%d دقیقه', '%d دقیقه', '%d دقیقه'],
+    h: ['کمتر از یک ساعت', 'یک ساعت', ['دو ساعت', 'دو ساعت'], '%d ساعت', '%d ساعت', '%d ساعت'],
+    d: ['کمتر از یک روز', 'یک روز', ['دو روز', 'دو روز'], '%d روز', '%d روز', '%d روز'],
+    M: ['کمتر از یک ماه', 'یک ماه', ['دو ماه', 'دو ماه'], '%d ماه', '%d ماه', '%d ماه'],
+    y: ['کمتر از یک سال', 'یک سال', ['دو سال', 'دو سال'], '%d سال', '%d سال', '%d سال']
+};
+
+const pluralize = function (u: string) {
+    return function (num: number, withoutSuffix: boolean): string {
+      const f = pluralForm(num);
+      let str = plurals[u][pluralForm(num)];
+      if (f === 2) {
+        str = str[withoutSuffix ? 0 : 1];
+      }
+  
+      return (str as string).replace(/%d/i, num.toString());
+    };
+  };
+
+  const months: string[] = [
+    'ژانویه',
+    'فوریه',
+    'مارس',
+    'آوریل',
+    'می',
+    'ژوئن',
+    'جولای',
+    'آگوست',
+    'سپتامبر',
+    'اکتبر',
+    'نوامبر',
+    'دسامبر'
+];
+
+export const faLocale: LocaleData = {
+    abbr: 'fa',
+    months: months,
+    monthsShort: months,
+    weekdays: 'یکشنبه_دوشنبه_سه شنبه_چهارشنبه_پنج شنبه_جمعه_شنبه'.split('_'),
+    weekdaysShort: 'یکشنبه_دو‌شنبه_سه‌شنبه_چهار‌شنبه_پنج‌شنبه_جمعه_شنبه'.split('_'),
+    weekdaysMin: 'ی_د_س_چ_پ_ج_ش'.split('_'),
+    weekdaysParseExact: true,
+    longDateFormat: {
+        LT: 'HH:mm',
+        LTS: 'HH:mm:ss',
+        L: 'D/\u200FM/\u200FYYYY',
+        LL: 'D MMMM YYYY',
+        LLL: 'D MMMM YYYY HH:mm',
+        LLLL: 'dddd D MMMM YYYY HH:mm'
+    },
+    meridiemParse: /ص|م/,
+    isPM(input) {
+        return 'م' === input;
+      },
+      meridiem(hour, minute, isLower) {
+        if (hour < 12) {
+          return 'ص';
+        } else {
+          return 'م';
+        }
+      },
+    calendar: {
+        sameDay: '[امروز در ساعت] LT',
+        nextDay: '[فردا در ساعت] LT',
+        nextWeek: 'dddd [در ساعت] LT',
+        lastDay: '[دیروز در ساعت] LT',
+        lastWeek: 'dddd [در ساعت] LT',
+        sameElse: 'L'
+    },
+    relativeTime: {
+        future: 'بعد %s',
+        past: 'پیش %s',
+        s: pluralize('s'),
+        ss: pluralize('s'),
+        m: pluralize('m'),
+        mm: pluralize('m'),
+        h: pluralize('h'),
+        hh: pluralize('h'),
+        d: pluralize('d'),
+        dd: pluralize('d'),
+        M: pluralize('M'),
+        MM: pluralize('M'),
+        y: pluralize('y'),
+        yy: pluralize('y')
+    },
+    preparse(str: string): string {
+        return str.replace(/[١٢٣٤٥٦٧٨٩٠]/g, function (match) {
+          return numberMap[match];
+        }).replace(/،/g, ',');
+      },
+      postformat(str: string) {
+        return str.replace(/\d/g, function (match) {
+          return symbolMap[match];
+        }).replace(/,/g, '،');
+      },
+    week: {
+        dow: 6, // Saturday is the first day of the week.
+        doy: 80 // The week that contains March 21th is the first week of the year.
+    }
+};
diff --git a/src/chronos/i18n/fr-ca.ts b/src/chronos/i18n/fr-ca.ts
new file mode 100644
index 0000000000..00a9fa86cb
--- /dev/null
+++ b/src/chronos/i18n/fr-ca.ts
@@ -0,0 +1,73 @@
+import { LocaleData } from '../locale/locale.class';
+
+//! moment.js locale configuration
+//! locale : French Canadian [fr-ca]
+//! author : Ali Hasan : https://github.com/alihasan00
+
+export const frCaLocale: LocaleData = {
+  abbr: 'fr-ca',
+  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
+  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
+  monthsParseExact: true,
+  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
+  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
+  weekdaysMin: 'di_lu_ma_me_je_ve_sa'.split('_'),
+  weekdaysParseExact: true,
+  longDateFormat: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'YYYY-MM-DD',
+    LL: 'D MMMM YYYY',
+    LLL: 'D MMMM YYYY HH:mm',
+    LLLL: 'dddd D MMMM YYYY HH:mm'
+  },
+  calendar: {
+    sameDay: '[Aujourd’hui à] LT',
+    nextDay: '[Demain à] LT',
+    nextWeek: 'dddd [à] LT',
+    lastDay: '[Hier à] LT',
+    lastWeek: 'dddd [dernier à] LT',
+    sameElse: 'L'
+  },
+  relativeTime: {
+    future: 'dans %s',
+    past: 'il y a %s',
+    s: 'quelques secondes',
+    ss: '%d secondes',
+    m: 'une minute',
+    mm: '%d minutes',
+    h: 'une heure',
+    hh: '%d heures',
+    d: 'un jour',
+    dd: '%d jours',
+    M: 'un mois',
+    MM: '%d mois',
+    y: 'un an',
+    yy: '%d ans'
+  },
+  dayOfMonthOrdinalParse: /\d{1,2}(er|e|)/,
+  ordinal(_num: number, period: string): string {
+    const num = Number(_num);
+    switch (period) {
+      case 'D':
+        return num + (num === 1 ? 'er' : '');
+
+      // Words with masculine grammatical gender: mois, trimestre, jour
+      default:
+      case 'M':
+      case 'Q':
+      case 'DDD':
+      case 'd':
+        return num + (num === 1 ? 'er' : 'e');
+
+      // Words with feminine grammatical gender: semaine
+      case 'w':
+      case 'W':
+        return num + (num === 1 ? 're' : 'e');
+    }
+  },
+  week: {
+    dow: 1, // Monday is the first day of the week.
+    doy: 4  // The week that contains Jan 4th is the first week of the year.
+  }
+};
diff --git a/src/chronos/i18n/hr.ts b/src/chronos/i18n/hr.ts
index 8fdc6ca019..ae38a672e2 100644
--- a/src/chronos/i18n/hr.ts
+++ b/src/chronos/i18n/hr.ts
@@ -14,7 +14,7 @@ export const hrLocale: LocaleData = {
   longDateFormat: {
     LT: 'HH:mm',
     LTS: 'HH:mm:ss',
-    L: 'DD/MM/YYYY',
+    L: 'DD.MM.YYYY.',
     LL: 'D MMMM YYYY',
     LLL: 'D MMMM YYYY HH:mm',
     LLLL: 'dddd, D MMMM YYYY HH:mm'
diff --git a/src/chronos/package.json b/src/chronos/package.json
index 8efd7d4fea..55d2a31046 100644
--- a/src/chronos/package.json
+++ b/src/chronos/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/chronos",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/chronos/public_api.ts b/src/chronos/public_api.ts
index 3e72eccbc3..d5f67b54a7 100644
--- a/src/chronos/public_api.ts
+++ b/src/chronos/public_api.ts
@@ -48,6 +48,7 @@ export { esUsLocale } from './i18n/es-us';
 export { etLocale } from './i18n/et';
 export { fiLocale } from './i18n/fi';
 export { frLocale } from './i18n/fr';
+export {frCaLocale} from './i18n/fr-ca';
 export { glLocale } from './i18n/gl';
 export { heLocale } from './i18n/he';
 export { hiLocale } from './i18n/hi';
@@ -79,3 +80,4 @@ export { trLocale } from './i18n/tr';
 export { ukLocale } from './i18n/uk';
 export { viLocale } from './i18n/vi';
 export { zhCnLocale } from './i18n/zh-cn';
+export { faLocale } from './i18n/fa';
\ No newline at end of file
diff --git a/src/chronos/testing/locale/fa.Spec.ts b/src/chronos/testing/locale/fa.Spec.ts
new file mode 100644
index 0000000000..e0d4924448
--- /dev/null
+++ b/src/chronos/testing/locale/fa.Spec.ts
@@ -0,0 +1,269 @@
+// tslint:disable:max-line-length max-file-line-count prefer-const forin prefer-template one-variable-per-declaration newline-before-return
+// tslint:disable:binary-expression-operand-order comment-format one-line no-var-keyword object-literal-shorthand
+// tslint:disable:variable-name no-shadowed-variable
+
+import { assertEq, assertDeepEq } from '../test-helpers';
+import { moment } from '../chain';
+import { faLocale } from '../../i18n/fa';
+
+// localeModule('fa');
+
+var months = [
+    'ژانویه',
+    'فوریه',
+    'مارس',
+    'آوریل',
+    'می',
+    'ژوئن',
+    'جولای',
+    'آگوست',
+    'سپتامبر',
+    'اکتبر',
+    'نوامبر',
+    'دسامبر'
+];
+describe('locale: fa', () => {
+    beforeAll(() => {
+        moment.locale('fa', faLocale);
+    });
+
+    afterAll(() => {
+        moment.locale('en');
+    });
+
+    it('parse', function () {
+        var tests = months, i;
+
+        function equalit(input, mmm, i) {
+            assertEq(moment(input, mmm).month(), i, input + ' should be month ' + (i + 1) + ' instead is month ' + moment(input, mmm).month());
+        }
+
+        for (i = 0; i < 12; i++) {
+            equalit(tests[i], 'MMM', i);
+            equalit(tests[i], 'MMM', i);
+            equalit(tests[i], 'MMMM', i);
+            equalit(tests[i], 'MMMM', i);
+            equalit(tests[i].toLocaleLowerCase(), 'MMMM', i);
+            equalit(tests[i].toLocaleLowerCase(), 'MMMM', i);
+            equalit(tests[i].toLocaleUpperCase(), 'MMMM', i);
+            equalit(tests[i].toLocaleUpperCase(), 'MMMM', i);
+        }
+    });
+
+    it('format', function () {
+        var a = [
+            ['dddd, MMMM Do YYYY, h:mm:ss a', 'یکشنبه، فوریه ١٤ ٢٠١٠، ٣:٢٥:٥٠ م'],
+            ['ddd, hA', 'یکشنبه، ٣م'],
+            ['M Mo MM MMMM MMM', '٢ ٢ ٠٢ فوریه فوریه'],
+            ['YYYY YY', '٢٠١٠ ١٠'],
+            ['D Do DD', '١٤ ١٤ ١٤'],
+            ['d do dddd ddd dd', '٠ ٠ یکشنبه یکشنبه ی'],
+            ['DDD DDDo DDDD', '٤٥ ٤٥ ٠٤٥'],
+            ['w wo ww', '٨ ٨ ٠٨'],
+            ['h hh', '٣ ٠٣'],
+            ['H HH', '١٥ ١٥'],
+            ['m mm', '٢٥ ٢٥'],
+            ['s ss', '٥٠ ٥٠'],
+            ['a A', 'م م'],
+            ['[the] DDDo [day of the year]', 'the ٤٥ day of the year'],
+            ['LT', '١٥:٢٥'],
+            ['LTS', '١٥:٢٥:٥٠'],
+            ['L', '١٤/\u200f٢/\u200f٢٠١٠'],
+            ['LL', '١٤ فوریه ٢٠١٠'],
+            ['LLL', '١٤ فوریه ٢٠١٠ ١٥:٢٥'],
+            ['LLLL', 'یکشنبه ١٤ فوریه ٢٠١٠ ١٥:٢٥'],
+            ['l', '١٤/\u200f٢/\u200f٢٠١٠'],
+            ['ll', '١٤ فوریه ٢٠١٠'],
+            ['lll', '١٤ فوریه ٢٠١٠ ١٥:٢٥'],
+            ['llll', 'یکشنبه ١٤ فوریه ٢٠١٠ ١٥:٢٥']
+        ],
+            b = moment(new Date(2010, 1, 14, 15, 25, 50, 125)),
+            i;
+        for (i = 0; i < a.length; i++) {
+            assertEq(b.format(a[i][0]), a[i][1], a[i][0] + ' ---> ' + a[i][1]);
+        }
+    });
+
+    it('format ordinal', function () {
+        assertEq(moment([2011, 0, 1]).format('DDDo'), '١', '1');
+        assertEq(moment([2011, 0, 2]).format('DDDo'), '٢', '2');
+        assertEq(moment([2011, 0, 3]).format('DDDo'), '٣', '3');
+        assertEq(moment([2011, 0, 4]).format('DDDo'), '٤', '4');
+        assertEq(moment([2011, 0, 5]).format('DDDo'), '٥', '5');
+        assertEq(moment([2011, 0, 6]).format('DDDo'), '٦', '6');
+        assertEq(moment([2011, 0, 7]).format('DDDo'), '٧', '7');
+        assertEq(moment([2011, 0, 8]).format('DDDo'), '٨', '8');
+        assertEq(moment([2011, 0, 9]).format('DDDo'), '٩', '9');
+        assertEq(moment([2011, 0, 10]).format('DDDo'), '١٠', '10');
+
+        assertEq(moment([2011, 0, 11]).format('DDDo'), '١١', '11');
+        assertEq(moment([2011, 0, 12]).format('DDDo'), '١٢', '12');
+        assertEq(moment([2011, 0, 13]).format('DDDo'), '١٣', '13');
+        assertEq(moment([2011, 0, 14]).format('DDDo'), '١٤', '14');
+        assertEq(moment([2011, 0, 15]).format('DDDo'), '١٥', '15');
+        assertEq(moment([2011, 0, 16]).format('DDDo'), '١٦', '16');
+        assertEq(moment([2011, 0, 17]).format('DDDo'), '١٧', '17');
+        assertEq(moment([2011, 0, 18]).format('DDDo'), '١٨', '18');
+        assertEq(moment([2011, 0, 19]).format('DDDo'), '١٩', '19');
+        assertEq(moment([2011, 0, 20]).format('DDDo'), '٢٠', '20');
+
+        assertEq(moment([2011, 0, 21]).format('DDDo'), '٢١', '21');
+        assertEq(moment([2011, 0, 22]).format('DDDo'), '٢٢', '22');
+        assertEq(moment([2011, 0, 23]).format('DDDo'), '٢٣', '23');
+        assertEq(moment([2011, 0, 24]).format('DDDo'), '٢٤', '24');
+        assertEq(moment([2011, 0, 25]).format('DDDo'), '٢٥', '25');
+        assertEq(moment([2011, 0, 26]).format('DDDo'), '٢٦', '26');
+        assertEq(moment([2011, 0, 27]).format('DDDo'), '٢٧', '27');
+        assertEq(moment([2011, 0, 28]).format('DDDo'), '٢٨', '28');
+        assertEq(moment([2011, 0, 29]).format('DDDo'), '٢٩', '29');
+        assertEq(moment([2011, 0, 30]).format('DDDo'), '٣٠', '30');
+
+        assertEq(moment([2011, 0, 31]).format('DDDo'), '٣١', '31');
+    });
+
+    it('format month', function () {
+        var expected = months, i;
+        for (i = 0; i < expected.length; i++) {
+            assertEq(moment([2011, i, 1]).format('MMMM'), expected[i], expected[i]);
+            assertEq(moment([2011, i, 1]).format('MMM'), expected[i], expected[i]);
+        }
+    });
+
+    it('format week', function () {
+        var expected = 'یکشنبه یکشنبه ی_دوشنبه دوشنبه د_سه‌شنبه سه‌شنبه س_چهارشنبه چهارشنبه چ_پنج‌شنبه پنج‌شنبه پ_جمعه جمعه ج_شنبه شنبه ش'.split('_'),
+            i;
+        for (i = 0; i < expected.length; i++) {
+            assertEq(moment([2011, 0, 2 + i]).format('dddd ddd dd'), expected[i], expected[i]);
+        }
+    });
+
+    it('from', function () {
+        var start = moment([2007, 1, 28]);
+        assertEq(start.from(moment([2007, 1, 28]).add({ s: 44 }), true), '٤٤ ثانیه', '44 seconds = a few seconds');
+        assertEq(start.from(moment([2007, 1, 28]).add({ s: 45 }), true), 'یک دقیقه', '45 seconds = a minute');
+        assertEq(start.from(moment([2007, 1, 28]).add({ s: 89 }), true), 'یک دقیقه', '89 seconds = a minute');
+        assertEq(start.from(moment([2007, 1, 28]).add({ s: 90 }), true), 'دقیقه', '90 seconds = 2 minutes');
+        assertEq(start.from(moment([2007, 1, 28]).add({ m: 44 }), true), '٤٤ دقیقه', '44 minutes = 44 minutes');
+        assertEq(start.from(moment([2007, 1, 28]).add({ m: 45 }), true), 'یک ساعت', '45 minutes = an hour');
+        assertEq(start.from(moment([2007, 1, 28]).add({ m: 89 }), true), 'یک ساعت', '89 minutes = an hour');
+        assertEq(start.from(moment([2007, 1, 28]).add({ m: 90 }), true), 'ساعت', '90 minutes = 2 hours');
+        assertEq(start.from(moment([2007, 1, 28]).add({ h: 5 }), true), '٥ ساعت', '5 hours = 5 hours');
+        assertEq(start.from(moment([2007, 1, 28]).add({ h: 21 }), true), '٢١ ساعت', '21 hours = 21 hours');
+        assertEq(start.from(moment([2007, 1, 28]).add({ h: 22 }), true), 'یک روز', '22 hours = a day');
+        assertEq(start.from(moment([2007, 1, 28]).add({ h: 35 }), true), 'یک روز', '35 hours = a day');
+        assertEq(start.from(moment([2007, 1, 28]).add({ h: 36 }), true), 'روز', '36 hours = 2 days');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 1 }), true), 'یک روز', '1 day = a day');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 5 }), true), '٥ روز', '5 days = 5 days');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 25 }), true), '٢٥ روز', '25 days = 25 days');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 26 }), true), 'یک ماه', '26 days = a month');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 30 }), true), 'یک ماه', '30 days = a month');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 43 }), true), 'یک ماه', '43 days = a month');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 46 }), true), 'ماه', '46 days = 2 months');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 74 }), true), 'ماه', '75 days = 2 months');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 76 }), true), '٣ ماه', '76 days = 3 months');
+        assertEq(start.from(moment([2007, 1, 28]).add({ M: 1 }), true), 'یک ماه', '1 month = a month');
+        assertEq(start.from(moment([2007, 1, 28]).add({ M: 5 }), true), '٥ ماه', '5 months = 5 months');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 345 }), true), 'یک سال', '345 days = a year');
+        assertEq(start.from(moment([2007, 1, 28]).add({ d: 548 }), true), 'سال', '548 days = 2 years');
+        assertEq(start.from(moment([2007, 1, 28]).add({ y: 1 }), true), 'سال', '1 year = a year');
+        assertEq(start.from(moment([2007, 1, 28]).add({ y: 5 }), true), '٥ سال', '5 years = 5 years');
+    });
+
+    it('suffix', function () {
+        assertEq(moment(30000).from(0), '٣٠ ثانیه بعد', 'prefix');
+        assertEq(moment(0).from(30000), '٣٠ ثانیه پیش', 'suffix');
+    });
+
+    it('now from now', function () {
+        assertEq(moment().fromNow(), 'یک ثانیه پیش', 'now from now should display as in the past');
+    });
+
+    it('fromNow', function () {
+        assertEq(moment().add({ s: 30 }).fromNow(), '٣٠ ثانیه بعد', 'in a few seconds');
+        assertEq(moment().add({ d: 5 }).fromNow(), '٥ روز بعد', 'in 5 days');
+    });
+
+    it('calendar day', function () {
+        var a = moment().hours(12).minutes(0).seconds(0);
+
+        assertEq(moment(a).calendar(), 'اليوم عند الساعة امروز ساعت ١٢:٠٠', 'today at the same time');
+        assertEq(moment(a).add({ m: 25 }).calendar(), 'امروز ساعت ١٢:٢٥', 'Now plus 25 min');
+        assertEq(moment(a).add({ h: 1 }).calendar(), 'امروز ساعت ١٣:٠٠', 'Now plus 1 hour');
+        assertEq(moment(a).add({ d: 1 }).calendar(), 'فردا ساعت ١٢:٠٠', 'tomorrow at the same time');
+        assertEq(moment(a).subtract({ h: 1 }).calendar(), 'امروز ساعت ١١:٠٠', 'Now minus 1 hour');
+        assertEq(moment(a).subtract({ d: 1 }).calendar(), 'دیروز ساعت ١٢:٠٠', 'yesterday at the same time');
+    });
+
+    it('calendar next week', function () {
+        var i, m;
+        for (i = 2; i < 7; i++) {
+            m = moment().add({ d: i });
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today + ' + i + ' days current time');
+            m.hours(0).minutes(0).seconds(0).milliseconds(0);
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today + ' + i + ' days beginning of day');
+            m.hours(23).minutes(59).seconds(59).milliseconds(999);
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today + ' + i + ' days end of day');
+        }
+    });
+
+    it('calendar last week', function () {
+        var i, m;
+        for (i = 2; i < 7; i++) {
+            m = moment().subtract({ d: i });
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today - ' + i + ' days current time');
+            m.hours(0).minutes(0).seconds(0).milliseconds(0);
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today - ' + i + ' days beginning of day');
+            m.hours(23).minutes(59).seconds(59).milliseconds(999);
+            assertEq(m.calendar(), m.format('dddd [در ساعت] LT'), 'Today - ' + i + ' days end of day');
+        }
+    });
+
+    it('calendar all else', function () {
+        var weeksAgo = moment().subtract({ w: 1 }),
+            weeksFromNow = moment().add({ w: 1 });
+
+        assertEq(weeksAgo.calendar(), weeksAgo.format('L'), '1 week ago');
+        assertEq(weeksFromNow.calendar(), weeksFromNow.format('L'), 'in 1 week');
+
+        weeksAgo = moment().subtract({ w: 2 });
+        weeksFromNow = moment().add({ w: 2 });
+
+        assertEq(weeksAgo.calendar(), weeksAgo.format('L'), '2 weeks ago');
+        assertEq(weeksFromNow.calendar(), weeksFromNow.format('L'), 'in 2 weeks');
+    });
+
+    it('weeks year starting wednesday custom', function () {
+        assertEq(moment('2003 1 6', 'gggg w d').format('YYYY-MM-DD'), '٢٠٠٢-١٢-٢٨', 'Week 1 of 2003 should be Dec 28 2002');
+        assertEq(moment('2003 1 0', 'gggg w e').format('YYYY-MM-DD'), '٢٠٠٢-١٢-٢٨', 'Week 1 of 2003 should be Dec 28 2002');
+        assertEq(moment('2003 1 6', 'gggg w d').format('gggg w d'), '٢٠٠٣ ١ ٦', 'Saturday of week 1 of 2003 parsed should be formatted as 2003 1 6');
+        assertEq(moment('2003 1 0', 'gggg w e').format('gggg w e'), '٢٠٠٣ ١ ٠', '1st day of week 1 of 2003 parsed should be formatted as 2003 1 0');
+    });
+
+    it('weeks year starting sunday formatted', function () {
+        assertEq(moment([2011, 11, 31]).format('w ww wo'), '١ ٠١ ١', 'Dec 31 2011 should be week 1');
+        assertEq(moment([2012, 0, 6]).format('w ww wo'), '١ ٠١ ١', 'Jan  6 2012 should be week 1');
+        assertEq(moment([2012, 0, 7]).format('w ww wo'), '٢ ٠٢ ٢', 'Jan  7 2012 should be week 2');
+        assertEq(moment([2012, 0, 13]).format('w ww wo'), '٢ ٠٢ ٢', 'Jan 13 2012 should be week 2');
+        assertEq(moment([2012, 0, 14]).format('w ww wo'), '٣ ٠٣ ٣', 'Jan 14 2012 should be week 3');
+    });
+
+    it('no leading zeros in long date formats', function () {
+        var i, j, longDateStr, shortDateStr;
+        for (i = 1; i <= 9; ++i) {
+            for (j = 1; j <= 9; ++j) {
+                longDateStr = moment([2014, i, j]).format('L');
+                shortDateStr = moment([2014, i, j]).format('l');
+                assertEq(longDateStr, shortDateStr, 'should not have leading zeros in month or day');
+            }
+        }
+    });
+
+    // locale-specific
+    it('fa strict mode parsing works', function () {
+        var m, formattedDate;
+        m = moment().locale('fa');
+        formattedDate = m.format('l');
+        assertEq(moment.utc(formattedDate, 'l', 'fa', false).isValid(), true, 'Non-strict parsing works');
+        assertEq(moment.utc(formattedDate, 'l', 'fa', true).isValid(), true, 'Strict parsing must work');
+    });
+});
\ No newline at end of file
diff --git a/src/chronos/testing/locale/fr-ca.spec.ts b/src/chronos/testing/locale/fr-ca.spec.ts
new file mode 100644
index 0000000000..fcb4499645
--- /dev/null
+++ b/src/chronos/testing/locale/fr-ca.spec.ts
@@ -0,0 +1,243 @@
+
+import { assertEq, assertDeepEq } from '../test-helpers';
+import { moment } from '../chain';
+import { frCaLocale } from '../../i18n/fr-ca';
+
+describe('locale: fr-ca', () => {
+  beforeAll(() => {
+    moment.locale('fr-ca', frCaLocale);
+  });
+
+  afterAll(() => {
+    moment.locale('en');
+  });
+
+  it('parse', function () {
+    var i,
+      _tests = 'janvier janv._février févr._mars mars_avril avr._mai mai_juin juin_juillet juil._août août_septembre sept._octobre oct._novembre nov._décembre déc.'.split('_');
+
+    function equalTest(input, mmm, i) {
+      assertEq(moment(input, mmm).month(), i, input + ' should be month ' + (i + 1));
+    }
+
+    let tests: string[][] = [];
+    for (i = 0; i < 12; i++) {
+      tests[i] = _tests[i].split(' ');
+      equalTest(tests[i][0], 'MMM', i);
+      equalTest(tests[i][1], 'MMM', i);
+      equalTest(tests[i][0], 'MMMM', i);
+      equalTest(tests[i][1], 'MMMM', i);
+      equalTest(tests[i][0].toLocaleLowerCase(), 'MMMM', i);
+      equalTest(tests[i][1].toLocaleLowerCase(), 'MMMM', i);
+      equalTest(tests[i][0].toLocaleUpperCase(), 'MMMM', i);
+      equalTest(tests[i][1].toLocaleUpperCase(), 'MMMM', i);
+    }
+  });
+
+  it('format', function () {
+    var a = [
+        ['dddd, MMMM Do YYYY, h:mm:ss a', 'dimanche, février 14 2010, 3:25:50 pm'],
+        ['ddd, hA', 'dim., 3PM'],
+        ['M Mo MM MMMM MMM', '2 2e 02 février févr.'],
+        ['YYYY YY', '2010 10'],
+        ['D Do DD', '14 14 14'],
+        ['d do dddd ddd dd', '0 0e dimanche dim. di'],
+        ['DDD DDDo DDDD', '45 45e 045'],
+        ['w wo ww', '6 6e 06'],
+        ['h hh', '3 03'],
+        ['H HH', '15 15'],
+        ['m mm', '25 25'],
+        ['s ss', '50 50'],
+        ['a A', 'pm PM'],
+        ['[le] Do [jour du mois]', 'le 14 jour du mois'],
+        ['[le] DDDo [jour de l’année]', 'le 45e jour de l’année'],
+        ['LTS', '15:25:50'],
+        ['L', '2010-02-14'],
+        ['LL', '14 février 2010'],
+        ['LLL', '14 février 2010 15:25'],
+        ['LLLL', 'dimanche 14 février 2010 15:25'],
+        ['l', '2010-2-14'],
+        ['ll', '14 févr. 2010'],
+        ['lll', '14 févr. 2010 15:25'],
+        ['llll', 'dim. 14 févr. 2010 15:25']
+      ],
+      b = moment(new Date(2010, 1, 14, 15, 25, 50, 125)),
+      i;
+
+    for (i = 0; i < a.length; i++) {
+      assertEq(b.format(a[i][0]), a[i][1], a[i][0] + ' ---> ' + a[i][1]);
+    }
+  });
+
+  it('format ordinal', function () {
+    assertEq(moment([2017, 0, 1]).format('Mo'), '1er', '1er');
+    assertEq(moment([2017, 1, 1]).format('Mo'), '2e', '2e');
+
+    assertEq(moment([2017, 0, 1]).format('Qo'), '1er', '1er');
+    assertEq(moment([2017, 3, 1]).format('Qo'), '2e', '2e');
+
+    assertEq(moment([2017, 0, 1]).format('Do'), '1er', '1er');
+    assertEq(moment([2017, 0, 2]).format('Do'), '2', '2');
+
+    assertEq(moment([2011, 0, 1]).format('DDDo'), '1er', '1er');
+    assertEq(moment([2011, 0, 2]).format('DDDo'), '2e', '2e');
+    assertEq(moment([2011, 0, 3]).format('DDDo'), '3e', '3e');
+    assertEq(moment([2011, 0, 4]).format('DDDo'), '4e', '4e');
+    assertEq(moment([2011, 0, 5]).format('DDDo'), '5e', '5e');
+    assertEq(moment([2011, 0, 6]).format('DDDo'), '6e', '6e');
+    assertEq(moment([2011, 0, 7]).format('DDDo'), '7e', '7e');
+    assertEq(moment([2011, 0, 8]).format('DDDo'), '8e', '8e');
+    assertEq(moment([2011, 0, 9]).format('DDDo'), '9e', '9e');
+    assertEq(moment([2011, 0, 10]).format('DDDo'), '10e', '10e');
+
+    assertEq(moment([2011, 0, 11]).format('DDDo'), '11e', '11e');
+    assertEq(moment([2011, 0, 12]).format('DDDo'), '12e', '12e');
+    assertEq(moment([2011, 0, 13]).format('DDDo'), '13e', '13e');
+    assertEq(moment([2011, 0, 14]).format('DDDo'), '14e', '14e');
+    assertEq(moment([2011, 0, 15]).format('DDDo'), '15e', '15e');
+    assertEq(moment([2011, 0, 16]).format('DDDo'), '16e', '16e');
+    assertEq(moment([2011, 0, 17]).format('DDDo'), '17e', '17e');
+    assertEq(moment([2011, 0, 18]).format('DDDo'), '18e', '18e');
+    assertEq(moment([2011, 0, 19]).format('DDDo'), '19e', '19e');
+    assertEq(moment([2011, 0, 20]).format('DDDo'), '20e', '20e');
+
+    assertEq(moment([2011, 0, 21]).format('DDDo'), '21e', '21e');
+    assertEq(moment([2011, 0, 22]).format('DDDo'), '22e', '22e');
+    assertEq(moment([2011, 0, 23]).format('DDDo'), '23e', '23e');
+    assertEq(moment([2011, 0, 24]).format('DDDo'), '24e', '24e');
+    assertEq(moment([2011, 0, 25]).format('DDDo'), '25e', '25e');
+    assertEq(moment([2011, 0, 26]).format('DDDo'), '26e', '26e');
+    assertEq(moment([2011, 0, 27]).format('DDDo'), '27e', '27e');
+    assertEq(moment([2011, 0, 28]).format('DDDo'), '28e', '28e');
+    assertEq(moment([2011, 0, 29]).format('DDDo'), '29e', '29e');
+    assertEq(moment([2011, 0, 30]).format('DDDo'), '30e', '30e');
+
+    assertEq(moment([2011, 0, 31]).format('DDDo'), '31e', '31e');
+
+    assertEq(moment([2017, 0, 1]).format('do'), '0e', '0e');
+    assertEq(moment([2017, 0, 2]).format('do'), '1er', '1er');
+
+    assertEq(moment([2017, 0, 4]).format('wo Wo'), '1re 1re', '1re 1re');
+    assertEq(moment([2017, 0, 11]).format('wo Wo'), '2e 2e', '2e 2e');
+  });
+
+  it('format month', function () {
+    var i,
+      expected = 'janvier janv._février févr._mars mars_avril avr._mai mai_juin juin_juillet juil._août août_septembre sept._octobre oct._novembre nov._décembre déc.'.split('_');
+
+    for (i = 0; i < expected.length; i++) {
+      assertEq(moment([2011, i, 1]).format('MMMM MMM'), expected[i], expected[i]);
+    }
+  });
+
+  it('format week', function () {
+    var i,
+      expected = 'dimanche dim. di_lundi lun. lu_mardi mar. ma_mercredi mer. me_jeudi jeu. je_vendredi ven. ve_samedi sam. sa'.split('_');
+
+    for (i = 0; i < expected.length; i++) {
+      assertEq(moment([2011, 0, 2 + i]).format('dddd ddd dd'), expected[i], expected[i]);
+    }
+  });
+
+  it('from', function () {
+    var start = moment([2007, 1, 28]);
+
+    assertEq(start.from(moment([2007, 1, 28]).add({ s: 44 }), true), 'quelques secondes', '44 seconds = a few seconds');
+    assertEq(start.from(moment([2007, 1, 28]).add({ s: 45 }), true), 'une minute', '45 seconds = a minute');
+    assertEq(start.from(moment([2007, 1, 28]).add({ s: 89 }), true), 'une minute', '89 seconds = a minute');
+    assertEq(start.from(moment([2007, 1, 28]).add({ s: 90 }), true), '2 minutes', '90 seconds = 2 minutes');
+    assertEq(start.from(moment([2007, 1, 28]).add({ m: 44 }), true), '44 minutes', '44 minutes = 44 minutes');
+    assertEq(start.from(moment([2007, 1, 28]).add({ m: 45 }), true), 'une heure', '45 minutes = an hour');
+    assertEq(start.from(moment([2007, 1, 28]).add({ m: 89 }), true), 'une heure', '89 minutes = an hour');
+    assertEq(start.from(moment([2007, 1, 28]).add({ m: 90 }), true), '2 heures', '90 minutes = 2 hours');
+    assertEq(start.from(moment([2007, 1, 28]).add({ h: 5 }), true), '5 heures', '5 hours = 5 hours');
+    assertEq(start.from(moment([2007, 1, 28]).add({ h: 21 }), true), '21 heures', '21 hours = 21 hours');
+    assertEq(start.from(moment([2007, 1, 28]).add({ h: 22 }), true), 'un jour', '22 hours = a day');
+    assertEq(start.from(moment([2007, 1, 28]).add({ h: 35 }), true), 'un jour', '35 hours = a day');
+    assertEq(start.from(moment([2007, 1, 28]).add({ h: 36 }), true), '2 jours', '36 hours = 2 days');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 1 }), true), 'un jour', '1 day = a day');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 5 }), true), '5 jours', '5 days = 5 days');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 25 }), true), '25 jours', '25 days = 25 days');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 26 }), true), 'un mois', '26 days = a month');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 30 }), true), 'un mois', '30 days = a month');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 43 }), true), 'un mois', '43 days = a month');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 46 }), true), '2 mois', '46 days = 2 months');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 74 }), true), '2 mois', '75 days = 2 months');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 76 }), true), '3 mois', '76 days = 3 months');
+    assertEq(start.from(moment([2007, 1, 28]).add({ M: 1 }), true), 'un mois', '1 month = a month');
+    assertEq(start.from(moment([2007, 1, 28]).add({ M: 5 }), true), '5 mois', '5 months = 5 months');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 345 }), true), 'un an', '345 days = a year');
+    assertEq(start.from(moment([2007, 1, 28]).add({ d: 548 }), true), '2 ans', '548 days = 2 years');
+    assertEq(start.from(moment([2007, 1, 28]).add({ y: 1 }), true), 'un an', '1 year = a year');
+    assertEq(start.from(moment([2007, 1, 28]).add({ y: 5 }), true), '5 ans', '5 years = 5 years');
+  });
+
+  it('suffix', function () {
+    assertEq(moment(30000).from(0), 'dans quelques secondes', 'prefix');
+    assertEq(moment(0).from(30000), 'il y a quelques secondes', 'suffix');
+  });
+
+  it('fromNow', function () {
+    assertEq(moment().add({ s: 30 }).fromNow(), 'dans quelques secondes', 'in a few seconds');
+    assertEq(moment().add({ d: 5 }).fromNow(), 'dans 5 jours', 'in 5 days');
+  });
+
+  it('same day', function () {
+    var a = moment().hours(12).minutes(0).seconds(0);
+
+    assertEq(moment(a).calendar(), 'Aujourd’hui à 12:00', 'Today at the same time');
+    assertEq(moment(a).add({ m: 25 }).calendar(), 'Aujourd’hui à 12:25', 'Now plus 25 min');
+    assertEq(moment(a).add({ h: 1 }).calendar(), 'Aujourd’hui à 13:00', 'Now plus 1 hour');
+    assertEq(moment(a).add({ d: 1 }).calendar(), 'Demain à 12:00', 'Tomorrow at the same time');
+    assertEq(moment(a).subtract({ h: 1 }).calendar(), 'Aujourd’hui à 11:00', 'Now minus 1 hour');
+    assertEq(moment(a).subtract({ d: 1 }).calendar(), 'Hier à 12:00', 'Yesterday at the same time');
+  });
+
+  it('same next week', function () {
+    var i, m;
+
+    for (i = 2; i < 7; i++) {
+      m = moment().add({ d: i });
+      assertEq(m.calendar(), m.format('dddd [à] LT'), 'Today + ' + i + ' days current time');
+      m.hours(0).minutes(0).seconds(0).milliseconds(0);
+      assertEq(m.calendar(), m.format('dddd [à] LT'), 'Today + ' + i + ' days beginning of day');
+      m.hours(23).minutes(59).seconds(59).milliseconds(999);
+      assertEq(m.calendar(), m.format('dddd [à] LT'), 'Today + ' + i + ' days end of day');
+    }
+  });
+
+  it('same last week', function () {
+    var i, m;
+
+    for (i = 2; i < 7; i++) {
+      m = moment().subtract({ d: i });
+      assertEq(m.calendar(), m.format('dddd [dernier à] LT'), 'Today - ' + i + ' days current time');
+      m.hours(0).minutes(0).seconds(0).milliseconds(0);
+      assertEq(m.calendar(), m.format('dddd [dernier à] LT'), 'Today - ' + i + ' days beginning of day');
+      m.hours(23).minutes(59).seconds(59).milliseconds(999);
+      assertEq(m.calendar(), m.format('dddd [dernier à] LT'), 'Today - ' + i + ' days end of day');
+    }
+  });
+
+  it('same all else', function () {
+    var weeksAgo = moment().subtract({ w: 1 }),
+      weeksFromNow = moment().add({ w: 1 });
+
+    assertEq(weeksAgo.calendar(), weeksAgo.format('L'), '1 week ago');
+    assertEq(weeksFromNow.calendar(), weeksFromNow.format('L'), 'in 1 week');
+
+    weeksAgo = moment().subtract({ w: 2 });
+    weeksFromNow = moment().add({ w: 2 });
+
+    assertEq(weeksAgo.calendar(), weeksAgo.format('L'), '2 weeks ago');
+    assertEq(weeksFromNow.calendar(), weeksFromNow.format('L'), 'in 2 weeks');
+  });
+
+  it('weeks year starting sunday formatted', function () {
+    assertEq(moment([2012, 0, 1]).format('w ww wo'), '52 52 52e', 'Jan  1 2012 should be week 52');
+    assertEq(moment([2012, 0, 2]).format('w ww wo'), '1 01 1re', 'Jan  2 2012 should be week 1');
+    assertEq(moment([2012, 0, 8]).format('w ww wo'), '1 01 1re', 'Jan  8 2012 should be week 1');
+    assertEq(moment([2012, 0, 9]).format('w ww wo'), '2 02 2e', 'Jan  9 2012 should be week 2');
+    assertEq(moment([2012, 0, 15]).format('w ww wo'), '2 02 2e', 'Jan 15 2012 should be week 2');
+  });
+});
diff --git a/src/chronos/testing/locale/hr.spec.ts b/src/chronos/testing/locale/hr.spec.ts
index ff1f7c0159..679898f3ec 100644
--- a/src/chronos/testing/locale/hr.spec.ts
+++ b/src/chronos/testing/locale/hr.spec.ts
@@ -56,11 +56,11 @@ describe('locale: hr', () => {
         ['a A', 'pm PM'],
         ['[the] DDDo [day of the year]', 'the 45. day of the year'],
         ['LTS', '15:25:50'],
-        ['L', '14/02/2010'],
+        ['L', '14.02.2010.'],
         ['LL', '14 Veljača 2010'],
         ['LLL', '14 Veljača 2010 15:25'],
         ['LLLL', 'Nedjelja, 14 Veljača 2010 15:25'],
-        ['l', '14/2/2010'],
+        ['l', '14.2.2010.'],
         ['ll', '14 Velj 2010'],
         ['lll', '14 Velj 2010 15:25'],
         ['llll', 'Ned, 14 Velj 2010 15:25']
diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts
index 9c9ca36a97..c69338234a 100644
--- a/src/collapse/collapse.directive.ts
+++ b/src/collapse/collapse.directive.ts
@@ -21,12 +21,13 @@ import {
 } from './collapse-animations';
 
 @Directive({
-  selector: '[collapse]',
-  exportAs: 'bs-collapse',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[class.collapse]': 'true'
-  }
+    selector: '[collapse]',
+    exportAs: 'bs-collapse',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[class.collapse]': 'true'
+    },
+    standalone: true
 })
 export class CollapseDirective implements AfterViewChecked {
   /** This event fires as soon as content collapses */
diff --git a/src/collapse/collapse.module.ts b/src/collapse/collapse.module.ts
index 94751fb209..611d9f5aa6 100644
--- a/src/collapse/collapse.module.ts
+++ b/src/collapse/collapse.module.ts
@@ -1,13 +1,17 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { CollapseDirective } from './collapse.directive';
 
 @NgModule({
-  declarations: [CollapseDirective],
-  exports: [CollapseDirective]
+    imports: [CollapseDirective],
+    exports: [CollapseDirective]
 })
 export class CollapseModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<CollapseModule> {
-    return { ngModule: CollapseModule, providers: [] };
+    return {
+      ngModule: CollapseModule,
+      providers: []
+    };
   }
 }
diff --git a/src/collapse/package.json b/src/collapse/package.json
index 929bcef135..c13c7966f1 100644
--- a/src/collapse/package.json
+++ b/src/collapse/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/collapse",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/collapse/testing/collapse.directive.spec.ts b/src/collapse/testing/collapse.directive.spec.ts
index 27d0e25ec1..90c42c8d1a 100644
--- a/src/collapse/testing/collapse.directive.spec.ts
+++ b/src/collapse/testing/collapse.directive.spec.ts
@@ -13,8 +13,10 @@ const template = `
 `;
 
 @Component({
-  selector: 'collapse-test',
-  template
+    selector: 'collapse-test',
+    template,
+    standalone: true,
+    imports: [CollapseModule]
 })
 class TestCollapseComponent {}
 
@@ -28,12 +30,12 @@ describe('Directive: Collapse', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestCollapseComponent],
-      imports: [
+    imports: [
         CollapseModule,
-        BrowserAnimationsModule
-      ]
-    });
+        BrowserAnimationsModule,
+        TestCollapseComponent
+    ]
+});
     fixture = TestBed.createComponent(TestCollapseComponent);
     fixture.detectChanges();
     context = fixture.componentInstance;
diff --git a/src/component-loader/component-loader.class.ts b/src/component-loader/component-loader.class.ts
index 2f60d5f23c..a6e46f5eb5 100644
--- a/src/component-loader/component-loader.class.ts
+++ b/src/component-loader/component-loader.class.ts
@@ -226,6 +226,7 @@ export class ComponentLoader<T extends object> {
       );
     }
     this._contentRef?.viewRef?.destroy();
+    this._componentRef?.destroy();
 
     this._contentRef = void 0;
     this._componentRef = void 0;
@@ -312,12 +313,16 @@ export class ComponentLoader<T extends object> {
     if (!this._componentRef || !this._componentRef.location) {
       return;
     }
+
+    let unsubscribeOutsideClick = Function.prototype;
+    let unsubscribeEscClick = Function.prototype;
+
     // why: should run after first event bubble
     if (this._listenOpts.outsideClick) {
       const target = this._componentRef.location.nativeElement;
       setTimeout(() => {
         if (this._renderer && this._elementRef) {
-          this._globalListener = registerOutsideClick(this._renderer, {
+          unsubscribeOutsideClick = registerOutsideClick(this._renderer, {
             targets: [target, this._elementRef.nativeElement],
             outsideClick: this._listenOpts.outsideClick,
             hide: () => this._listenOpts.hide && this._listenOpts.hide()
@@ -327,12 +332,17 @@ export class ComponentLoader<T extends object> {
     }
     if (this._listenOpts.outsideEsc && this._renderer && this._elementRef) {
       const target = this._componentRef.location.nativeElement;
-      this._globalListener = registerEscClick(this._renderer, {
+      unsubscribeEscClick = registerEscClick(this._renderer, {
         targets: [target, this._elementRef.nativeElement],
         outsideEsc: this._listenOpts.outsideEsc,
         hide: () => this._listenOpts.hide && this._listenOpts.hide()
       });
     }
+
+    this._globalListener = () => {
+      unsubscribeOutsideClick();
+      unsubscribeEscClick();
+    };
   }
 
   getInnerComponent(): ComponentRef<T> | undefined {
diff --git a/src/component-loader/package.json b/src/component-loader/package.json
index ebefd08682..62943895dc 100644
--- a/src/component-loader/package.json
+++ b/src/component-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/component-loader",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts
index d47457dad8..dc41e915c2 100644
--- a/src/datepicker/bs-datepicker-inline.component.ts
+++ b/src/datepicker/bs-datepicker-inline.component.ts
@@ -25,8 +25,10 @@ import { copyTime } from './utils/copy-time-utils';
 import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils';
 
 @Directive({
-  selector: 'bs-datepicker-inline',
-  exportAs: 'bsDatepickerInline'
+    selector: 'bs-datepicker-inline',
+    exportAs: 'bsDatepickerInline',
+    standalone: true,
+    providers: [ComponentLoaderFactory]
 })
 export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges {
   /**
diff --git a/src/datepicker/bs-datepicker-input.directive.ts b/src/datepicker/bs-datepicker-input.directive.ts
index dceac0a139..9186cccade 100644
--- a/src/datepicker/bs-datepicker-input.directive.ts
+++ b/src/datepicker/bs-datepicker-input.directive.ts
@@ -49,8 +49,12 @@ const BS_DATEPICKER_VALIDATOR: Provider = {
 };
 
 @Directive({
-  selector: `input[bsDatepicker]`,
-  providers: [BS_DATEPICKER_VALUE_ACCESSOR, BS_DATEPICKER_VALIDATOR]
+    selector: `input[bsDatepicker]`,
+    providers: [
+      BS_DATEPICKER_VALUE_ACCESSOR,
+      BS_DATEPICKER_VALIDATOR
+    ],
+    standalone: true
 })
 export class BsDatepickerInputDirective implements ControlValueAccessor, Validator, OnInit, OnDestroy {
   private _onChange = Function.prototype;
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
index c3a1c69e67..e17cc59516 100644
--- a/src/datepicker/bs-datepicker.component.ts
+++ b/src/datepicker/bs-datepicker.component.ts
@@ -25,8 +25,10 @@ import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-ut
 export let previousDate: Date | Date[] | undefined;
 
 @Directive({
-  selector: '[bsDatepicker]',
-  exportAs: 'bsDatepicker'
+    selector: '[bsDatepicker]',
+    exportAs: 'bsDatepicker',
+    providers: [ComponentLoaderFactory],
+    standalone: true
 })
 export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   /**
diff --git a/src/datepicker/bs-datepicker.module.ts b/src/datepicker/bs-datepicker.module.ts
index 76b6920f14..5677ba96cd 100644
--- a/src/datepicker/bs-datepicker.module.ts
+++ b/src/datepicker/bs-datepicker.module.ts
@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
-import { PositioningService } from 'ngx-bootstrap/positioning';
 
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { TimepickerModule, TimepickerActions } from 'ngx-bootstrap/timepicker';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 
 import { BsDatepickerInputDirective } from './bs-datepicker-input.directive';
 import { BsDatepickerDirective } from './bs-datepicker.component';
@@ -13,10 +11,6 @@ import { BsDaterangepickerDirective } from './bs-daterangepicker.component';
 
 import { BsDatepickerInlineDirective } from './bs-datepicker-inline.component';
 
-import { BsLocaleService } from './bs-locale.service';
-import { BsDatepickerActions } from './reducer/bs-datepicker.actions';
-import { BsDatepickerEffects } from './reducer/bs-datepicker.effects';
-import { BsDatepickerStore } from './reducer/bs-datepicker.store';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
 import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
 
@@ -36,9 +30,7 @@ import { BsTimepickerViewComponent } from './themes/bs/bs-timepicker-view.compon
 import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view.component';
 
 @NgModule({
-    imports: [CommonModule, TooltipModule, TimepickerModule],
-    declarations: [
-        BsCalendarLayoutComponent,
+    imports: [CommonModule, TooltipModule, TimepickerModule, BsCalendarLayoutComponent,
         BsCurrentDateViewComponent,
         BsCustomDatesViewComponent,
         BsDatepickerDayDecoratorComponent,
@@ -56,8 +48,7 @@ import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view
         BsDaterangepickerDirective,
         BsDaterangepickerInlineContainerComponent,
         BsDaterangepickerInlineDirective,
-        BsDaterangepickerInputDirective
-    ],
+        BsDaterangepickerInputDirective],
     exports: [
         BsDatepickerContainerComponent,
         BsDatepickerDirective,
@@ -72,18 +63,11 @@ import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view
     ]
 })
 export class BsDatepickerModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<BsDatepickerModule> {
     return {
       ngModule: BsDatepickerModule,
-      providers: [
-        ComponentLoaderFactory,
-        PositioningService,
-        BsDatepickerStore,
-        BsDatepickerActions,
-        BsDatepickerEffects,
-        BsLocaleService,
-        TimepickerActions
-      ]
+      providers: []
     };
   }
 }
diff --git a/src/datepicker/bs-daterangepicker-inline.component.ts b/src/datepicker/bs-daterangepicker-inline.component.ts
index 2570ced468..0d1e0fd341 100644
--- a/src/datepicker/bs-daterangepicker-inline.component.ts
+++ b/src/datepicker/bs-daterangepicker-inline.component.ts
@@ -20,7 +20,11 @@ import {
 
 @Directive({
     selector: 'bs-daterangepicker-inline',
-    exportAs: 'bsDaterangepickerInline'
+    exportAs: 'bsDaterangepickerInline',
+    standalone: true,
+    providers: [
+      ComponentLoaderFactory
+    ]
 })
 export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnChanges {
     _bsValue?: (Date|undefined)[] | undefined;
diff --git a/src/datepicker/bs-daterangepicker-input.directive.ts b/src/datepicker/bs-daterangepicker-input.directive.ts
index 89a659060f..72c20badcb 100644
--- a/src/datepicker/bs-daterangepicker-input.directive.ts
+++ b/src/datepicker/bs-daterangepicker-input.directive.ts
@@ -49,15 +49,19 @@ const BS_DATERANGEPICKER_VALIDATOR: Provider = {
 
 
 @Directive({
-  selector: `input[bsDaterangepicker]`,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '(change)': 'onChange($event)',
-    '(keyup.esc)': 'hide()',
-    '(keydown)': 'onKeydownEvent($event)',
-    '(blur)': 'onBlur()'
-  },
-  providers: [BS_DATERANGEPICKER_VALUE_ACCESSOR, BS_DATERANGEPICKER_VALIDATOR]
+    selector: `input[bsDaterangepicker]`,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '(change)': 'onChange($event)',
+        '(keyup.esc)': 'hide()',
+        '(keydown)': 'onKeydownEvent($event)',
+        '(blur)': 'onBlur()'
+    },
+    providers: [
+      BS_DATERANGEPICKER_VALUE_ACCESSOR,
+      BS_DATERANGEPICKER_VALIDATOR
+    ],
+    standalone: true
 })
 export class BsDaterangepickerInputDirective
   implements ControlValueAccessor, Validator, OnInit, OnDestroy {
diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
index 7a2773af94..fa7bac9dbf 100644
--- a/src/datepicker/bs-daterangepicker.component.ts
+++ b/src/datepicker/bs-daterangepicker.component.ts
@@ -22,8 +22,12 @@ export let previousDate: (Date | undefined)[] | undefined;
 
 
 @Directive({
-  selector: '[bsDaterangepicker]',
-  exportAs: 'bsDaterangepicker'
+    selector: '[bsDaterangepicker]',
+    exportAs: 'bsDaterangepicker',
+    standalone: true,
+    providers: [
+      ComponentLoaderFactory
+    ]
 })
 export class BsDaterangepickerDirective
   implements OnInit, OnDestroy, OnChanges, AfterViewInit {
diff --git a/src/datepicker/package.json b/src/datepicker/package.json
index b5836c8c1d..d6f9896fd7 100644
--- a/src/datepicker/package.json
+++ b/src/datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/datepicker",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts
index eab3b3d894..d18f46b7cb 100644
--- a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts
+++ b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts
@@ -8,8 +8,8 @@ import { BsDatepickerDayDecoratorComponent } from '../themes/bs/bs-datepicker-da
 import '../../../scripts/jest/toHaveCssClass';
 
 @Component({
-  selector: 'test-cmp',
-  template: `<span bsDatepickerDayDecorator [day]='day'>{{ day.label }}</span>`
+    selector: 'test-cmp',
+    template: `<span bsDatepickerDayDecorator [day]='day'>{{ day.label }}</span>`,
 })
 class TestComponent {
   day: DayViewModel = { date: new Date(), label: '' };
@@ -32,10 +32,11 @@ describe('datepicker: [bsDatepickerDayDecorator]', () => {
 
   beforeEach(waitForAsync(() =>
     TestBed.configureTestingModule({
-      declarations: [TestComponent, BsDatepickerDayDecoratorComponent],
+      declarations: [TestComponent],
+      imports: [BsDatepickerDayDecoratorComponent],
       providers: [BsDatepickerConfig]
-    }).compileComponents()
-  ));
+    }).compileComponents())
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
diff --git a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts
index c7319bb339..20cf6f7b5c 100644
--- a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts
+++ b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts
@@ -5,12 +5,12 @@ import { BsDatepickerNavigationViewComponent } from '../themes/bs/bs-datepicker-
 
 
 @Component({
-  selector: 'test-cmp',
-  template: `
+    selector: 'test-cmp',
+    template: `
     <bs-datepicker-navigation-view
       [calendar]="month"
       (onNavigate)="navTo($event)"
-    ></bs-datepicker-navigation-view>`
+    ></bs-datepicker-navigation-view>`,
 })
 class TestComponent {
   month!: DaysCalendarViewModel;
@@ -54,9 +54,10 @@ describe('datepicker: bs-datepicker-navigation-view', () => {
   let fixture: TestFixture;
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
-        declarations: [TestComponent, BsDatepickerNavigationViewComponent]
-      }).compileComponents()
-    ));
+      declarations: [TestComponent],
+      imports: [BsDatepickerNavigationViewComponent]
+    }).compileComponents())
+  );
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
   });
diff --git a/src/datepicker/testing/bs-datepicker-utils.spec.ts b/src/datepicker/testing/bs-datepicker-utils.spec.ts
index 7a08240f36..5541bb082c 100644
--- a/src/datepicker/testing/bs-datepicker-utils.spec.ts
+++ b/src/datepicker/testing/bs-datepicker-utils.spec.ts
@@ -15,7 +15,7 @@ describe('daterangepicker:', () => {
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
         imports: [
-          BsDatepickerModule.forRoot(),
+          BsDatepickerModule,
           BrowserAnimationsModule
         ]
       }).compileComponents()
diff --git a/src/datepicker/testing/bs-datepicker.spec.ts b/src/datepicker/testing/bs-datepicker.spec.ts
index 560a5abac3..b9bb957a2e 100644
--- a/src/datepicker/testing/bs-datepicker.spec.ts
+++ b/src/datepicker/testing/bs-datepicker.spec.ts
@@ -11,10 +11,10 @@ import { BsDatepickerViewMode, CalendarCellViewModel, WeekViewModel } from '../m
 import { BsDatepickerContainerComponent } from '../themes/bs/bs-datepicker-container.component';
 
 @Component({
-  selector: 'test-cmp',
-  template: `<input type='text'
+    selector: 'test-cmp',
+    template: `<input type='text'
                     bsDatepicker
-                    [bsConfig]='bsConfig'>`
+                    [bsConfig]='bsConfig'>`,
 })
 class TestComponent {
   @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective;
@@ -55,12 +55,12 @@ describe('datepicker:', () => {
   let fixture: TestFixture;
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
-        declarations: [TestComponent],
-        imports: [
-          BsDatepickerModule.forRoot(),
-          BrowserAnimationsModule
-        ]
-      }).compileComponents()
+      declarations: [TestComponent],
+      imports: [
+        BsDatepickerModule,
+        BrowserAnimationsModule
+    ]
+}).compileComponents()
     ));
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
diff --git a/src/datepicker/testing/bs-daterangepicker.spec.ts b/src/datepicker/testing/bs-daterangepicker.spec.ts
index bb085ab6a2..9fa64bcb8f 100644
--- a/src/datepicker/testing/bs-daterangepicker.spec.ts
+++ b/src/datepicker/testing/bs-daterangepicker.spec.ts
@@ -7,12 +7,13 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { BsCustomDates } from '../themes/bs/bs-custom-dates-view.component';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
     selector: 'test-cmp',
     template: `<input type="text"
     bsDaterangepicker
-    [bsConfig]="bsConfig">`
+    [bsConfig]="bsConfig">`,
 })
 class TestComponent {
     @ViewChild(BsDaterangepickerDirective, { static: false }) daterangepicker: BsDaterangepickerDirective;
@@ -53,13 +54,13 @@ describe('daterangepicker:', () => {
     let fixture: TestFixture;
     beforeEach(
       waitForAsync(() => TestBed.configureTestingModule({
-            declarations: [TestComponent],
-            imports: [
-                BsDatepickerModule.forRoot(),
-                BrowserAnimationsModule
-            ]
-        }).compileComponents()
-        ));
+        declarations: [TestComponent],
+        imports: [
+          BsDatepickerModule,
+          BrowserAnimationsModule
+        ]
+      }).compileComponents())
+    );
     beforeEach(() => {
         fixture = TestBed.createComponent(TestComponent);
         fixture.detectChanges();
@@ -87,7 +88,7 @@ describe('daterangepicker:', () => {
     expect(timepickerZone).not.toBeTruthy();
   });
 
-  it('should update time when time is changed in timepicker', () => {
+  it('should update time when time is changed in timepicker', (done) => {
     const directive = getDaterangepickerDirective(fixture);
     directive.bsConfig = {
       withTimepicker: true
@@ -119,6 +120,7 @@ describe('daterangepicker:', () => {
       .subscribe(view => {
         expect(view[0].getMinutes()).toEqual(ranges[1].value[0].getMinutes());
         expect(view[1].getMinutes()).toEqual(ranges[1].value[1].getMinutes());
+        done();
       });
   });
 
@@ -185,7 +187,7 @@ describe('daterangepicker:', () => {
         expect(getDaterangepickerContainer(datepicker)).toBeNull();
     });
 
-    it('should display correct date range in input when selected from ranges', () => {
+    it('should display correct date range in input when selected from ranges', (done) => {
         const datepicker = showDatepicker(fixture);
         const ranges = [
             {
@@ -207,6 +209,7 @@ describe('daterangepicker:', () => {
             .select(state => state.selectedRange)
             .subscribe(view => {
                 expect(view).toEqual(ranges[0].value);
+                done();
             });
     });
 
@@ -230,31 +233,6 @@ describe('daterangepicker:', () => {
 
         const rangesButton = document.querySelector('.bs-datepicker-predefined-btns');
         expect(rangesButton.childElementCount).toEqual(ranges.length);
-
-    });
-
-    it('should display correct date range in input when selected from ranges', () => {
-        const datepicker = showDatepicker(fixture);
-        const ranges = [
-            {
-                label: 'Last 7 days',
-                value: [new Date('12-10-2019'), new Date('12-16-2019')]
-            },
-            {
-                label: 'Next 7 days',
-                value: [new Date('12-16-2019'), new Date('12-22-2019')]
-            }
-        ];
-        datepicker.bsConfig.ranges = ranges;
-        const datepickerContainerInstance = getDaterangepickerContainer(datepicker);
-        datepickerContainerInstance.setRangeOnCalendar(ranges[0]);
-
-        fixture.detectChanges();
-        datepickerContainerInstance[`_store`]
-            .select(state => state.selectedRange)
-            .subscribe(view => {
-                expect(view).toEqual(ranges[0].value);
-            });
     });
 
     it('should correctly display the selected range button with active custom class', () => {
@@ -286,7 +264,7 @@ describe('daterangepicker:', () => {
         expect(activeRangeButton[0].innerHTML.trim()).toEqual(ranges[0].label);
     });
 
-  it('should not allow to select date behind max value', () => {
+  it('should not allow to select date behind max value', async () => {
     const datepicker = showDatepicker(fixture);
     datepicker.bsConfig.maxDate = new Date();
     datepicker.bsConfig.maxDateRange = 10;
@@ -300,15 +278,12 @@ describe('daterangepicker:', () => {
       value: [correctDateStart, correctDateEnd]
     };
 
-    datepickerContainerInstance.setMaxDateRangeOnCalendar(correctDateStart);
+    datepickerContainerInstance.setMaxDateRangeOnCalendar(correctDateEnd);
     datepickerContainerInstance.setRangeOnCalendar(selectedRange);
     fixture.detectChanges();
 
-    datepickerContainerInstance[`_store`]
-      .select(state => state)
-      .subscribe(view => {
-        expect(view.maxDate).toEqual(correctDateEnd);
-      });
+    let view = await firstValueFrom(datepickerContainerInstance[`_store`].select((state) => state));
+    expect(view.maxDate).toEqual(correctDateEnd);
 
     const incorrectCaseStart = new Date(new Date().setDate(new Date().getDate() - 5));
     const incorrectCaseEnd = new Date(new Date().setDate(new Date().getDate() + 15));
@@ -321,10 +296,7 @@ describe('daterangepicker:', () => {
     datepickerContainerInstance.setRangeOnCalendar(selectedRange1);
     fixture.detectChanges();
 
-    datepickerContainerInstance[`_store`]
-      .select(state => state)
-      .subscribe(view => {
-        expect(view.maxDate).not.toEqual(incorrectCaseEnd);
-      });
-  });
+    view = await firstValueFrom(datepickerContainerInstance[`_store`].select((state) => state));
+    expect(view.maxDate).not.toEqual(incorrectCaseEnd);
   });
+});
diff --git a/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts b/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts
index 72bb0d28b5..6b76deb7ed 100644
--- a/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts
+++ b/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts
@@ -13,8 +13,9 @@ import { CalendarCellViewModel } from '../models';
 import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils';
 
 @Component({
-  selector: 'test-cmp',
-  template: `<bs-datepicker-inline [bsConfig]="bsConfig"></bs-datepicker-inline>>`
+    selector: 'test-cmp',
+    template: `<bs-datepicker-inline [bsConfig]="bsConfig"></bs-datepicker-inline>>`,
+    standalone: true
 })
 class TestComponent {
   @ViewChild(BsDatepickerInlineDirective, { static: false }) datepicker: BsDatepickerInlineDirective;
@@ -38,12 +39,12 @@ xdescribe('datepicker inline minMode="year":', () => {
   let fixture: TestFixture;
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
-        declarations: [TestComponent],
-        imports: [
-          BsDatepickerModule.forRoot(),
-          BrowserAnimationsModule
-        ]
-    }).compileComponents()
+    imports: [
+        BsDatepickerModule,
+        BrowserAnimationsModule,
+        TestComponent
+    ]
+}).compileComponents()
     ));
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
diff --git a/src/datepicker/testing/bs-inline-datepicker.spec.ts b/src/datepicker/testing/bs-inline-datepicker.spec.ts
index 9016d2cb8b..87909cd339 100644
--- a/src/datepicker/testing/bs-inline-datepicker.spec.ts
+++ b/src/datepicker/testing/bs-inline-datepicker.spec.ts
@@ -12,8 +12,8 @@ import { take } from 'rxjs/operators';
 import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils';
 
 @Component({
-  selector: 'test-cmp',
-  template: `<bs-datepicker-inline [bsConfig]="bsConfig"></bs-datepicker-inline>>`
+    selector: 'test-cmp',
+    template: `<bs-datepicker-inline [bsConfig]="bsConfig"></bs-datepicker-inline>>`
 })
 class TestComponent {
   @ViewChild(BsDatepickerInlineDirective, { static: false }) datepicker: BsDatepickerInlineDirective;
@@ -39,13 +39,12 @@ describe('datepicker inline:', () => {
   let fixture: TestFixture;
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
-        declarations: [TestComponent],
-        imports: [
-          BsDatepickerModule.forRoot(),
-          BrowserAnimationsModule
-        ]
-    }).compileComponents()
-    ));
+      declarations: [TestComponent],
+      imports: [
+        BsDatepickerModule,
+        BrowserAnimationsModule
+      ]}).compileComponents())
+  );
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
diff --git a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts
index 4f4d4df06a..1a9651a946 100644
--- a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts
+++ b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts
@@ -11,8 +11,8 @@ import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils';
 import { initialYearShift } from '../engine/format-years-calendar';
 
 @Component({
-  selector: 'test-cmp',
-  template: `
+    selector: 'test-cmp',
+    template: `
     <bs-daterangepicker-inline [bsConfig]="bsConfig"></bs-daterangepicker-inline>`
 })
 class TestComponent {
@@ -40,13 +40,13 @@ describe('daterangepicker inline:', () => {
   let fixture: TestFixture;
   beforeEach(
     waitForAsync(() => TestBed.configureTestingModule({
-        declarations: [TestComponent],
-        imports: [
-          BsDatepickerModule.forRoot(),
-          BrowserAnimationsModule
-        ]
-      }).compileComponents()
-    ));
+      declarations: [TestComponent],
+      imports: [
+        BsDatepickerModule,
+        BrowserAnimationsModule
+      ]
+    }).compileComponents())
+  );
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
diff --git a/src/datepicker/themes/bs/bs-calendar-layout.component.ts b/src/datepicker/themes/bs/bs-calendar-layout.component.ts
index a15a4cecb6..5a28eaaad1 100644
--- a/src/datepicker/themes/bs/bs-calendar-layout.component.ts
+++ b/src/datepicker/themes/bs/bs-calendar-layout.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { BsTimepickerViewComponent } from './bs-timepicker-view.component';
+import { BsCurrentDateViewComponent } from './bs-current-date-view.component';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'bs-calendar-layout',
-  template: `
+    selector: 'bs-calendar-layout',
+    template: `
     <!-- current date, will be added in nearest releases -->
     <bs-current-date title="hey there" *ngIf="false"></bs-current-date>
 
@@ -17,6 +20,8 @@ import { Component } from '@angular/core';
 
     <!--timepicker-->
     <bs-timepicker *ngIf="false"></bs-timepicker>
-  `
+  `,
+    standalone: true,
+    imports: [NgIf, BsCurrentDateViewComponent, BsTimepickerViewComponent]
 })
 export class BsCalendarLayoutComponent {}
diff --git a/src/datepicker/themes/bs/bs-current-date-view.component.ts b/src/datepicker/themes/bs/bs-current-date-view.component.ts
index 081839b6bd..530f5e8921 100644
--- a/src/datepicker/themes/bs/bs-current-date-view.component.ts
+++ b/src/datepicker/themes/bs/bs-current-date-view.component.ts
@@ -1,8 +1,9 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'bs-current-date',
-  template: `<div class="current-timedate"><span>{{ title }}</span></div>`
+    selector: 'bs-current-date',
+    template: `<div class="current-timedate"><span>{{ title }}</span></div>`,
+    standalone: true
 })
 export class BsCurrentDateViewComponent {
   @Input() title?: string;
diff --git a/src/datepicker/themes/bs/bs-custom-dates-view.component.ts b/src/datepicker/themes/bs/bs-custom-dates-view.component.ts
index ea84edb1df..9bc17f543b 100644
--- a/src/datepicker/themes/bs/bs-custom-dates-view.component.ts
+++ b/src/datepicker/themes/bs/bs-custom-dates-view.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
+import { NgFor } from '@angular/common';
 
 export interface BsCustomDates {
   label: string;
@@ -6,8 +7,8 @@ export interface BsCustomDates {
 }
 
 @Component({
-  selector: 'bs-custom-date-view',
-  template: `
+    selector: 'bs-custom-date-view',
+    template: `
     <div class="bs-datepicker-predefined-btns">
       <button *ngFor="let range of ranges"
         type="button"
@@ -18,7 +19,9 @@ export interface BsCustomDates {
       </button>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgFor]
 })
 export class BsCustomDatesViewComponent {
   @Input() ranges?: BsCustomDates[];
diff --git a/src/datepicker/themes/bs/bs-datepicker-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-container.component.ts
index 51162c53d0..c2913bfbca 100644
--- a/src/datepicker/themes/bs/bs-datepicker-container.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-container.component.ts
@@ -24,18 +24,28 @@ import { CalendarCellViewModel, DayViewModel } from '../../models';
 import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions';
 import { BsDatepickerEffects } from '../../reducer/bs-datepicker.effects';
 import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
+import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component';
+import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component';
+import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component';
+import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'bs-datepicker-container',
-  providers: [BsDatepickerStore, BsDatepickerEffects],
-  templateUrl: './bs-datepicker-view.html',
-  host: {
-    class: 'bottom',
-    '(click)': '_stopPropagation($event)',
-    role: 'dialog',
-    'aria-label': 'calendar'
-  },
-  animations: [datepickerAnimation]
+    selector: 'bs-datepicker-container',
+    providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService],
+    templateUrl: './bs-datepicker-view.html',
+    host: {
+        class: 'bottom',
+        '(click)': '_stopPropagation($event)',
+        role: 'dialog',
+        'aria-label': 'calendar'
+    },
+    animations: [datepickerAnimation],
+    standalone: true,
+    imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule,
+      BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe
+    ]
 })
 export class BsDatepickerContainerComponent
   extends BsDatepickerAbstractComponent
diff --git a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts
index 2fab4ba25b..3cefe25748 100644
--- a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts
@@ -11,19 +11,20 @@ import { BsDatepickerConfig } from '../../bs-datepicker.config';
 import { DayViewModel } from '../../models';
 
 @Component({
-  selector: '[bsDatepickerDayDecorator]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class.disabled]': 'day.isDisabled',
-    '[class.is-highlighted]': 'day.isHovered',
-    '[class.is-other-month]': 'day.isOtherMonth',
-    '[class.is-active-other-month]': 'day.isOtherMonthHovered',
-    '[class.in-range]': 'day.isInRange',
-    '[class.select-start]': 'day.isSelectionStart',
-    '[class.select-end]': 'day.isSelectionEnd',
-    '[class.selected]': 'day.isSelected'
-  },
-  template: `{{ day && day.label || '' }}`
+    selector: '[bsDatepickerDayDecorator]',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class.disabled]': 'day.isDisabled',
+        '[class.is-highlighted]': 'day.isHovered',
+        '[class.is-other-month]': 'day.isOtherMonth',
+        '[class.is-active-other-month]': 'day.isOtherMonthHovered',
+        '[class.in-range]': 'day.isInRange',
+        '[class.select-start]': 'day.isSelectionStart',
+        '[class.select-end]': 'day.isSelectionEnd',
+        '[class.selected]': 'day.isSelected'
+    },
+    template: `{{ day && day.label || '' }}`,
+    standalone: true
 })
 export class BsDatepickerDayDecoratorComponent implements OnInit {
   @Input() day: DayViewModel = { date: new Date(), label: '' };
diff --git a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts
index 749804be27..184a8eec67 100644
--- a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts
@@ -8,15 +8,23 @@ import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
 
 import { PositioningService } from 'ngx-bootstrap/positioning';
 import { datepickerAnimation } from '../../datepicker-animations';
+import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component';
+import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component';
+import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component';
+import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'bs-datepicker-inline-container',
-  providers: [BsDatepickerStore, BsDatepickerEffects],
-  templateUrl: './bs-datepicker-view.html',
-  host: {
-    '(click)': '_stopPropagation($event)'
-  },
-  animations: [datepickerAnimation]
+    selector: 'bs-datepicker-inline-container',
+    providers: [BsDatepickerStore, BsDatepickerEffects, PositioningService],
+    templateUrl: './bs-datepicker-view.html',
+    host: {
+        '(click)': '_stopPropagation($event)'
+    },
+    animations: [datepickerAnimation],
+    standalone: true,
+    imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe]
 })
 export class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponent
   implements OnInit, OnDestroy {
diff --git a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
index 406db3e13e..415122349d 100644
--- a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
+++ b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { BsDatepickerViewMode, BsNavigationDirection, NavigationViewModel } from '../../models';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'bs-datepicker-navigation-view',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
+    selector: 'bs-datepicker-navigation-view',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
     <button class="previous"
             [disabled]="calendar.disableLeftArrow"
             [style.visibility]="calendar.hideLeftArrow ? 'hidden' : 'visible'"
@@ -46,7 +47,9 @@ import { BsDatepickerViewMode, BsNavigationDirection, NavigationViewModel } from
             type="button"
             (click)="navTo(false)"><span>&rsaquo;</span>
     </button>
-  `
+  `,
+    standalone: true,
+    imports: [NgIf]
 })
 export class BsDatepickerNavigationViewComponent {
   @Input() calendar!: NavigationViewModel;
diff --git a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
index 5dc2c65c26..b930213239 100644
--- a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
+++ b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts
@@ -24,20 +24,39 @@ import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions';
 import { BsDatepickerEffects } from '../../reducer/bs-datepicker.effects';
 import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
 import { datepickerAnimation } from '../../datepicker-animations';
-import { BsCustomDates } from './bs-custom-dates-view.component';
+import { BsCustomDates, BsCustomDatesViewComponent } from './bs-custom-dates-view.component';
 import { dayInMilliseconds } from '../../reducer/_defaults';
+import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component';
+import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component';
+import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'bs-daterangepicker-container',
-  providers: [BsDatepickerStore, BsDatepickerEffects],
-  templateUrl: './bs-datepicker-view.html',
-  host: {
-    class: 'bottom',
-    '(click)': '_stopPropagation($event)',
-    role: 'dialog',
-    'aria-label': 'calendar'
-  },
-  animations: [datepickerAnimation]
+    selector: 'bs-daterangepicker-container',
+    providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService],
+    templateUrl: './bs-datepicker-view.html',
+    host: {
+        class: 'bottom',
+        '(click)': '_stopPropagation($event)',
+        role: 'dialog',
+        'aria-label': 'calendar'
+    },
+    animations: [datepickerAnimation],
+    standalone: true,
+    imports: [
+      NgIf,
+      NgClass,
+      NgSwitch,
+      NgSwitchCase,
+      NgFor,
+      BsDaysCalendarViewComponent,
+      TimepickerModule,
+      BsMonthCalendarViewComponent,
+      BsYearsCalendarViewComponent,
+      BsCustomDatesViewComponent,
+      AsyncPipe
+    ]
 })
 export class BsDaterangepickerContainerComponent
   extends BsDatepickerAbstractComponent
diff --git a/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts b/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts
index 62ec9084b6..df68a3ced9 100644
--- a/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts
+++ b/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts
@@ -8,15 +8,23 @@ import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
 
 import { PositioningService } from 'ngx-bootstrap/positioning';
 import { datepickerAnimation } from '../../datepicker-animations';
+import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component';
+import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component';
+import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component';
+import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'bs-daterangepicker-inline-container',
-  providers: [BsDatepickerStore, BsDatepickerEffects],
-  templateUrl: './bs-datepicker-view.html',
-  host: {
-    '(click)': '_stopPropagation($event)'
-  },
-  animations: [datepickerAnimation]
+    selector: 'bs-daterangepicker-inline-container',
+    providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService],
+    templateUrl: './bs-datepicker-view.html',
+    host: {
+        '(click)': '_stopPropagation($event)'
+    },
+    animations: [datepickerAnimation],
+    standalone: true,
+    imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe]
 })
 export class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContainerComponent
   implements OnInit, OnDestroy {
diff --git a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts
index e4a4ee05bc..5d17b3096f 100644
--- a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts
+++ b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts
@@ -18,11 +18,16 @@ import {
 } from '../../models';
 
 import { BsDatepickerConfig } from '../../bs-datepicker.config';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { BsDatepickerDayDecoratorComponent } from './bs-datepicker-day-decorator.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component';
+import { BsCalendarLayoutComponent } from './bs-calendar-layout.component';
 
 @Component({
-  selector: 'bs-days-calendar-view',
-  // changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
+    selector: 'bs-days-calendar-view',
+    // changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
@@ -76,7 +81,9 @@ import { BsDatepickerConfig } from '../../bs-datepicker.config';
       </table>
 
     </bs-calendar-layout>
-  `
+  `,
+    standalone: true,
+    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgIf, NgFor, BsDatepickerDayDecoratorComponent, TooltipModule]
 })
 export class BsDaysCalendarViewComponent  {
   @Input() calendar!: DaysCalendarViewModel;
diff --git a/src/datepicker/themes/bs/bs-months-calendar-view.component.ts b/src/datepicker/themes/bs/bs-months-calendar-view.component.ts
index be554adc1d..cc7f911eed 100644
--- a/src/datepicker/themes/bs/bs-months-calendar-view.component.ts
+++ b/src/datepicker/themes/bs/bs-months-calendar-view.component.ts
@@ -7,10 +7,13 @@ import {
   MonthsCalendarViewModel,
   CalendarCellViewModel
 } from '../../models';
+import { NgFor } from '@angular/common';
+import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component';
+import { BsCalendarLayoutComponent } from './bs-calendar-layout.component';
 
 @Component({
-  selector: 'bs-month-calendar-view',
-  template: `
+    selector: 'bs-month-calendar-view',
+    template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
@@ -33,7 +36,9 @@ import {
         </tbody>
       </table>
     </bs-calendar-layout>
-  `
+  `,
+    standalone: true,
+    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor]
 })
 export class BsMonthCalendarViewComponent {
   @Input() calendar!: MonthsCalendarViewModel;
diff --git a/src/datepicker/themes/bs/bs-timepicker-view.component.ts b/src/datepicker/themes/bs/bs-timepicker-view.component.ts
index 6b666da4e3..4fa22243d5 100644
--- a/src/datepicker/themes/bs/bs-timepicker-view.component.ts
+++ b/src/datepicker/themes/bs/bs-timepicker-view.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'bs-timepicker',
-  template: `
+    selector: 'bs-timepicker',
+    template: `
     <div class="bs-timepicker-container">
       <div class="bs-timepicker-controls">
         <button class="bs-decrease" type="button">-</button>
@@ -20,7 +20,8 @@ import { Component } from '@angular/core';
           alt="">
       </button>
     </div>
-  `
+  `,
+    standalone: true
 })
 export class BsTimepickerViewComponent {
   ampm = 'ok';
diff --git a/src/datepicker/themes/bs/bs-years-calendar-view.component.ts b/src/datepicker/themes/bs/bs-years-calendar-view.component.ts
index 5b0a658c29..7641aeb478 100644
--- a/src/datepicker/themes/bs/bs-years-calendar-view.component.ts
+++ b/src/datepicker/themes/bs/bs-years-calendar-view.component.ts
@@ -8,10 +8,13 @@ import {
   CellHoverEvent,
   YearsCalendarViewModel
 } from '../../models';
+import { NgFor } from '@angular/common';
+import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component';
+import { BsCalendarLayoutComponent } from './bs-calendar-layout.component';
 
 @Component({
-  selector: 'bs-years-calendar-view',
-  template: `
+    selector: 'bs-years-calendar-view',
+    template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
@@ -34,7 +37,9 @@ import {
         </tbody>
       </table>
     </bs-calendar-layout>
-  `
+  `,
+    standalone: true,
+    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor]
 })
 export class BsYearsCalendarViewComponent {
   @Input() calendar!: YearsCalendarViewModel;
diff --git a/src/dropdown/bs-dropdown-container.component.ts b/src/dropdown/bs-dropdown-container.component.ts
index e24ce958aa..981cd0e6ff 100644
--- a/src/dropdown/bs-dropdown-container.component.ts
+++ b/src/dropdown/bs-dropdown-container.component.ts
@@ -12,12 +12,15 @@ import { BsDropdownState } from './bs-dropdown.state';
 import { dropdownAnimation } from './dropdown-animations';
 import { AnimationBuilder, AnimationFactory } from '@angular/animations';
 import { Subscription } from 'rxjs';
+import { NgClass } from '@angular/common';
 
 // todo: revert ngClass to [class] when false positive angular-cli issue is fixed
 //          [class.dropdown]="direction === 'down'"-->
 @Component({
   selector: 'bs-dropdown-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgClass],
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     style: 'display:block;position: absolute;z-index: 1040'
@@ -28,7 +31,7 @@ import { Subscription } from 'rxjs';
          [class.show]="isOpen"
          [class.open]="isOpen"><ng-content></ng-content>
     </div>
-  `
+  `,
 })
 export class BsDropdownContainerComponent implements OnDestroy {
   isOpen = false;
diff --git a/src/dropdown/bs-dropdown-menu.directive.ts b/src/dropdown/bs-dropdown-menu.directive.ts
index 2fdc8898cd..5bc064e579 100644
--- a/src/dropdown/bs-dropdown-menu.directive.ts
+++ b/src/dropdown/bs-dropdown-menu.directive.ts
@@ -3,7 +3,8 @@ import { BsDropdownState } from './bs-dropdown.state';
 
 @Directive({
   selector: '[bsDropdownMenu],[dropdownMenu]',
-  exportAs: 'bs-dropdown-menu'
+  exportAs: 'bs-dropdown-menu',
+  standalone: true
 })
 export class BsDropdownMenuDirective {
   constructor(
diff --git a/src/dropdown/bs-dropdown-toggle.directive.ts b/src/dropdown/bs-dropdown-toggle.directive.ts
index a42ec9d076..68566d0e95 100644
--- a/src/dropdown/bs-dropdown-toggle.directive.ts
+++ b/src/dropdown/bs-dropdown-toggle.directive.ts
@@ -18,7 +18,8 @@ import { BsDropdownDirective } from './bs-dropdown.directive';
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     '[attr.aria-haspopup]': 'true'
-  }
+  },
+  standalone: true
 })
 export class BsDropdownToggleDirective implements OnDestroy {
   @HostBinding('attr.disabled') isDisabled: undefined | true;
diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts
index e4bff6932e..dd6f4f3578 100644
--- a/src/dropdown/bs-dropdown.directive.ts
+++ b/src/dropdown/bs-dropdown.directive.ts
@@ -25,7 +25,8 @@ import { dropdownAnimation } from './dropdown-animations';
 @Directive({
   selector: '[bsDropdown], [dropdown]',
   exportAs: 'bs-dropdown',
-  providers: [BsDropdownState],
+  providers: [BsDropdownState, ComponentLoaderFactory, BsDropdownConfig],
+  standalone: true,
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     '[class.dropup]': 'dropup',
diff --git a/src/dropdown/bs-dropdown.module.ts b/src/dropdown/bs-dropdown.module.ts
index d7b0d8010a..7f7624ea4c 100644
--- a/src/dropdown/bs-dropdown.module.ts
+++ b/src/dropdown/bs-dropdown.module.ts
@@ -1,22 +1,17 @@
-import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 
-import { PositioningService } from 'ngx-bootstrap/positioning';
 import { BsDropdownContainerComponent } from './bs-dropdown-container.component';
 import { BsDropdownMenuDirective } from './bs-dropdown-menu.directive';
 import { BsDropdownToggleDirective } from './bs-dropdown-toggle.directive';
 
 import { BsDropdownDirective } from './bs-dropdown.directive';
-import { BsDropdownState } from './bs-dropdown.state';
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [
-        BsDropdownMenuDirective,
-        BsDropdownToggleDirective,
-        BsDropdownContainerComponent,
-        BsDropdownDirective
+    imports: [
+      BsDropdownDirective,
+      BsDropdownContainerComponent,
+      BsDropdownMenuDirective,
+      BsDropdownToggleDirective
     ],
     exports: [
         BsDropdownMenuDirective,
@@ -25,14 +20,11 @@ import { BsDropdownState } from './bs-dropdown.state';
     ]
 })
 export class BsDropdownModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<BsDropdownModule> {
     return {
       ngModule: BsDropdownModule,
-      providers: [
-        ComponentLoaderFactory,
-        PositioningService,
-        BsDropdownState
-      ]
+      providers: []
     };
   }
 }
diff --git a/src/dropdown/package.json b/src/dropdown/package.json
index 4592b8e8df..8242ab9142 100644
--- a/src/dropdown/package.json
+++ b/src/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/dropdown",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/dropdown/testing/bs-dropdown-container.component.spec.ts b/src/dropdown/testing/bs-dropdown-container.component.spec.ts
index be541cfcbb..d9ff630454 100644
--- a/src/dropdown/testing/bs-dropdown-container.component.spec.ts
+++ b/src/dropdown/testing/bs-dropdown-container.component.spec.ts
@@ -17,7 +17,7 @@ describe('BsDropdownContainerComponent tests', () => {
     };
     TestBed.configureTestingModule({
       imports: [
-        BsDropdownModule.forRoot(),
+        BsDropdownModule,
         BrowserAnimationsModule
       ],
       providers: [{ provide: BsDropdownState, useValue: fakeService }]
diff --git a/src/dropdown/testing/bs-dropdown.directive.spec.ts b/src/dropdown/testing/bs-dropdown.directive.spec.ts
index 52cab11926..173ed3fdff 100644
--- a/src/dropdown/testing/bs-dropdown.directive.spec.ts
+++ b/src/dropdown/testing/bs-dropdown.directive.spec.ts
@@ -50,7 +50,7 @@ describe('Directive: Dropdown', () => {
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
       imports: [
-        BsDropdownModule.forRoot(),
+        BsDropdownModule,
         BrowserAnimationsModule
       ]
     });
diff --git a/src/focus-trap/focus-trap.module.ts b/src/focus-trap/focus-trap.module.ts
index 4fec94fc00..509b87439b 100644
--- a/src/focus-trap/focus-trap.module.ts
+++ b/src/focus-trap/focus-trap.module.ts
@@ -1,25 +1,18 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { FocusTrapManager } from './focus-trap-manager';
-import { InteractivityChecker } from './interactivity-checker';
 import { FocusTrapDirective } from './focus-trap';
-import { Platform } from './platform';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [FocusTrapDirective],
-  exports: [FocusTrapDirective]
+    imports: [CommonModule, FocusTrapDirective],
+    exports: [FocusTrapDirective]
 })
 export class FocusTrapModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<FocusTrapModule> {
     return {
       ngModule: FocusTrapModule,
-      providers: [
-        FocusTrapManager,
-        Platform,
-        InteractivityChecker
-      ]
+      providers: []
     };
   }
 }
diff --git a/src/focus-trap/focus-trap.ts b/src/focus-trap/focus-trap.ts
index 42daa06875..bd0c43dc49 100644
--- a/src/focus-trap/focus-trap.ts
+++ b/src/focus-trap/focus-trap.ts
@@ -25,6 +25,8 @@ import {
 } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { InteractivityChecker } from './interactivity-checker';
+import { FocusTrapManager } from './focus-trap-manager';
+import { Platform } from './platform';
 
 
 /**
@@ -386,8 +388,14 @@ export class FocusTrapFactory {
 
 /** Directive for trapping focus within a region. */
 @Directive({
-  selector: '[focusTrap]',
-  exportAs: 'focusTrap'
+    selector: '[focusTrap]',
+    exportAs: 'focusTrap',
+    standalone: true,
+    providers: [
+      FocusTrapManager,
+      Platform,
+      InteractivityChecker
+    ]
 })
 export class FocusTrapDirective implements OnDestroy, AfterContentInit, OnChanges, DoCheck {
   private _document: Document;
diff --git a/src/focus-trap/package.json b/src/focus-trap/package.json
index d40cd175a2..4b2264a1b0 100644
--- a/src/focus-trap/package.json
+++ b/src/focus-trap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/focus-trap",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/locale/package.json b/src/locale/package.json
index 100734411d..0addb735c1 100644
--- a/src/locale/package.json
+++ b/src/locale/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/locale",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/locale/public_api.ts b/src/locale/public_api.ts
index cde050c766..c3932ae907 100644
--- a/src/locale/public_api.ts
+++ b/src/locale/public_api.ts
@@ -12,6 +12,7 @@ export { esUsLocale } from 'ngx-bootstrap/chronos';
 export { etLocale } from 'ngx-bootstrap/chronos';
 export { fiLocale } from 'ngx-bootstrap/chronos';
 export { frLocale } from 'ngx-bootstrap/chronos';
+export {frCaLocale} from 'ngx-bootstrap/chronos';
 export { glLocale } from 'ngx-bootstrap/chronos';
 export { heLocale } from 'ngx-bootstrap/chronos';
 export { hiLocale } from 'ngx-bootstrap/chronos';
diff --git a/src/mini-ngrx/package.json b/src/mini-ngrx/package.json
index 74a40c3bfc..ec51e945d2 100644
--- a/src/mini-ngrx/package.json
+++ b/src/mini-ngrx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/mini-ngrx",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/modal/bs-modal.service.ts b/src/modal/bs-modal.service.ts
index a5a253b24a..490bf2b4cd 100644
--- a/src/modal/bs-modal.service.ts
+++ b/src/modal/bs-modal.service.ts
@@ -42,6 +42,7 @@ export class BsModalService {
   protected backdropRef?: ComponentRef<ModalBackdropComponent>;
   private _backdropLoader: ComponentLoader<ModalBackdropComponent>;
   private modalsCount = 0;
+  private lastHiddenId: number | string | undefined = 0;
   private lastDismissReason?: string;
 
   private loaders: ComponentLoader<ModalContainerComponent>[] = [];
@@ -83,6 +84,10 @@ export class BsModalService {
   }
 
   hide(id?: number | string) {
+    if (this.lastHiddenId === id) {
+      return;
+    }
+    this.lastHiddenId = id;
     if (this.modalsCount === 1 || id == null) {
       this._hideBackdrop();
       this.resetScrollbar();
diff --git a/src/modal/modal-backdrop.component.ts b/src/modal/modal-backdrop.component.ts
index 3ae8796015..4271a25cf8 100644
--- a/src/modal/modal-backdrop.component.ts
+++ b/src/modal/modal-backdrop.component.ts
@@ -6,10 +6,11 @@ import { Utils } from 'ngx-bootstrap/utils';
 
 /** This component will be added as background layout for modals if enabled */
 @Component({
-  selector: 'bs-modal-backdrop',
-  template: ' ',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: { class: CLASS_NAME.BACKDROP }
+    selector: 'bs-modal-backdrop',
+    template: ' ',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: { class: CLASS_NAME.BACKDROP },
+    standalone: true
 })
 export class ModalBackdropComponent implements OnInit {
   get isAnimated(): boolean {
diff --git a/src/modal/modal-container.component.ts b/src/modal/modal-container.component.ts
index fd3f09ccb8..5f09ecdd73 100644
--- a/src/modal/modal-container.component.ts
+++ b/src/modal/modal-container.component.ts
@@ -14,10 +14,11 @@ import {
 } from './modal-options.class';
 import { BsModalService } from './bs-modal.service';
 import { document } from 'ngx-bootstrap/utils';
+import { FocusTrapDirective } from 'ngx-bootstrap/focus-trap';
 
 @Component({
-  selector: 'modal-container',
-  template: `
+    selector: 'modal-container',
+    template: `
     <div [class]="'modal-dialog' + (config.class ? ' ' + config.class : '')"
          role="document"
          focusTrap>
@@ -26,15 +27,18 @@ import { document } from 'ngx-bootstrap/utils';
       </div>
     </div>
   `,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    class: 'modal',
-    role: 'dialog',
-    tabindex: '-1',
-    '[attr.aria-modal]': 'true',
-    '[attr.aria-labelledby]': 'config.ariaLabelledBy',
-    '[attr.aria-describedby]': 'config.ariaDescribedby'
-  }
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        class: 'modal',
+        role: 'dialog',
+        tabindex: '-1',
+        '[attr.aria-modal]': 'true',
+        '[attr.aria-labelledby]': 'config.ariaLabelledBy',
+        '[attr.aria-describedby]': 'config.ariaDescribedby'
+    },
+    standalone: true,
+    imports: [FocusTrapDirective],
+    providers: [BsModalService]
 })
 export class ModalContainerComponent implements OnInit, OnDestroy {
   config: ModalOptions;
diff --git a/src/modal/modal.directive.ts b/src/modal/modal.directive.ts
index 0d72bccf62..9093448ca1 100644
--- a/src/modal/modal.directive.ts
+++ b/src/modal/modal.directive.ts
@@ -20,8 +20,9 @@ const BACKDROP_TRANSITION_DURATION = 150;
 
 /** Mark any code with directive to show it's content in modal */
 @Directive({
-  selector: '[bsModal]',
-  exportAs: 'bs-modal'
+    selector: '[bsModal]',
+    exportAs: 'bs-modal',
+    standalone: true
 })
 export class ModalDirective implements OnDestroy, OnInit {
   /** allows to set modal configuration via element property */
diff --git a/src/modal/modal.module.ts b/src/modal/modal.module.ts
index 85f0a91b6d..76b5b06e6f 100644
--- a/src/modal/modal.module.ts
+++ b/src/modal/modal.module.ts
@@ -1,32 +1,33 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
-import { PositioningService } from 'ngx-bootstrap/positioning';
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { FocusTrapModule } from 'ngx-bootstrap/focus-trap';
 
 import { ModalBackdropComponent } from './modal-backdrop.component';
 import { ModalDirective } from './modal.directive';
 import { ModalContainerComponent } from './modal-container.component';
 import { BsModalService } from './bs-modal.service';
-
-export const focusTrapModule = FocusTrapModule.forRoot();
+import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
+import { PositioningService } from 'ngx-bootstrap/positioning';
 
 @NgModule({
-    imports: [FocusTrapModule],
-    declarations: [
-        ModalBackdropComponent,
-        ModalDirective,
-        ModalContainerComponent
+    imports: [
+      FocusTrapModule,
+      ModalBackdropComponent,
+      ModalDirective,
+      ModalContainerComponent
     ],
     exports: [ModalBackdropComponent, ModalDirective]
 })
 export class ModalModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<ModalModule> {
     return {
       ngModule: ModalModule,
       providers: [BsModalService, ComponentLoaderFactory, PositioningService]
     };
   }
+
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forChild(): ModuleWithProviders<ModalModule> {
     return {
       ngModule: ModalModule,
diff --git a/src/modal/package.json b/src/modal/package.json
index 4116d7c4e2..135b931931 100644
--- a/src/modal/package.json
+++ b/src/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/modal",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/modal/testing/modal-backdrop.component.spec.ts b/src/modal/testing/modal-backdrop.component.spec.ts
index 15afb57292..0a65861a8f 100644
--- a/src/modal/testing/modal-backdrop.component.spec.ts
+++ b/src/modal/testing/modal-backdrop.component.spec.ts
@@ -6,8 +6,8 @@ describe('ModalBackdropComponent tests', () => {
   let component: ModalBackdropComponent;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ModalBackdropComponent]
-    });
+    imports: [ModalBackdropComponent]
+});
     fixture = TestBed.createComponent(ModalBackdropComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
diff --git a/src/modal/testing/modal.default-setting.spec.ts b/src/modal/testing/modal.default-setting.spec.ts
index 22639672c3..5ec395d1f5 100644
--- a/src/modal/testing/modal.default-setting.spec.ts
+++ b/src/modal/testing/modal.default-setting.spec.ts
@@ -29,7 +29,7 @@ describe('Modal service', () => {
     TestBed.configureTestingModule({
       declarations: [DummyComponent],
       providers: [BsModalService],
-      imports: [ModalModule.forRoot(), TestModule]
+      imports: [ModalModule, TestModule]
     });
     fixture = TestBed.createComponent(DummyComponent);
     modalService = fixture.debugElement.injector.get(BsModalService);
diff --git a/src/modal/testing/modal.service.spec.ts b/src/modal/testing/modal.service.spec.ts
index 5e827167cc..c40b8f3e1f 100644
--- a/src/modal/testing/modal.service.spec.ts
+++ b/src/modal/testing/modal.service.spec.ts
@@ -28,7 +28,7 @@ describe('Modal service', () => {
     TestBed.configureTestingModule({
       declarations: [DummyComponent],
       providers: [BsModalService],
-      imports: [ModalModule.forRoot(), TestModule]
+      imports: [ModalModule, TestModule]
     });
     fixture = TestBed.createComponent(DummyComponent);
     modalService = fixture.debugElement.injector.get(BsModalService);
diff --git a/src/pagination/package.json b/src/pagination/package.json
index 901e067682..965757b409 100644
--- a/src/pagination/package.json
+++ b/src/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/pagination",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/pagination/pager.component.ts b/src/pagination/pager.component.ts
index 92e3e923fb..04347cac08 100644
--- a/src/pagination/pager.component.ts
+++ b/src/pagination/pager.component.ts
@@ -15,6 +15,7 @@ import { ConfigModel, PagesModel } from './models';
 
 import { PageChangedEvent } from './pagination.component';
 import { PaginationConfig } from './pagination.config';
+import { NgClass } from '@angular/common';
 
 export const PAGER_CONTROL_VALUE_ACCESSOR: Provider = {
   provide: NG_VALUE_ACCESSOR,
@@ -23,9 +24,11 @@ export const PAGER_CONTROL_VALUE_ACCESSOR: Provider = {
 };
 
 @Component({
-  selector: 'pager',
-  templateUrl: './pager.component.html',
-  providers: [PAGER_CONTROL_VALUE_ACCESSOR]
+    selector: 'pager',
+    templateUrl: './pager.component.html',
+    providers: [PAGER_CONTROL_VALUE_ACCESSOR],
+    standalone: true,
+    imports: [NgClass]
 })
 export class PagerComponent implements ControlValueAccessor, OnInit {
   config?: Partial<ConfigModel>;
diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts
index abfdb1c3f2..9bb0fdee0e 100644
--- a/src/pagination/pagination.component.ts
+++ b/src/pagination/pagination.component.ts
@@ -14,6 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ConfigModel, PagesModel, PaginationLinkContext, PaginationNumberLinkContext } from './models';
 
 import { PaginationConfig } from './pagination.config';
+import { NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
 
 export interface PageChangedEvent {
   itemsPerPage: number;
@@ -27,9 +28,11 @@ export const PAGINATION_CONTROL_VALUE_ACCESSOR: Provider = {
 };
 
 @Component({
-  selector: 'pagination',
-  templateUrl: './pagination.component.html',
-  providers: [PAGINATION_CONTROL_VALUE_ACCESSOR]
+    selector: 'pagination',
+    templateUrl: './pagination.component.html',
+    providers: [PAGINATION_CONTROL_VALUE_ACCESSOR],
+    standalone: true,
+    imports: [NgClass, NgIf, NgTemplateOutlet, NgFor]
 })
 export class PaginationComponent implements ControlValueAccessor, OnInit {
   config?: Partial<ConfigModel>;
diff --git a/src/pagination/pagination.module.ts b/src/pagination/pagination.module.ts
index ff9c1a926e..a7c377f4af 100644
--- a/src/pagination/pagination.module.ts
+++ b/src/pagination/pagination.module.ts
@@ -1,16 +1,19 @@
 import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { PagerComponent } from './pager.component';
 import { PaginationComponent } from './pagination.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [PagerComponent, PaginationComponent],
-  exports: [PagerComponent, PaginationComponent]
+    imports: [CommonModule, PagerComponent, PaginationComponent],
+    exports: [PagerComponent, PaginationComponent]
 })
 export class PaginationModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<PaginationModule> {
-    return { ngModule: PaginationModule, providers: [] };
+    return {
+      ngModule: PaginationModule,
+      providers: []
+    };
   }
 }
diff --git a/src/pagination/testing/pager.component.spec.ts b/src/pagination/testing/pager.component.spec.ts
index ebbab050ac..b91ed275ba 100644
--- a/src/pagination/testing/pager.component.spec.ts
+++ b/src/pagination/testing/pager.component.spec.ts
@@ -16,7 +16,7 @@ describe('Component: Pager:', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [PaginationModule.forRoot()]
+      imports: [PaginationModule]
     });
     fixture = TestBed.createComponent(PagerComponent);
     context = fixture.debugElement.componentInstance;
diff --git a/src/pagination/testing/pagination.component.spec.ts b/src/pagination/testing/pagination.component.spec.ts
index f7633d267b..a48dce7f27 100644
--- a/src/pagination/testing/pagination.component.spec.ts
+++ b/src/pagination/testing/pagination.component.spec.ts
@@ -14,7 +14,7 @@ describe('Component: Pagination:', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [PaginationModule.forRoot()]
+      imports: [PaginationModule]
     });
     fixture = TestBed.createComponent(PaginationComponent);
     context = fixture.debugElement.componentInstance;
diff --git a/src/popover/package.json b/src/popover/package.json
index 18292a548c..5b18c017de 100644
--- a/src/popover/package.json
+++ b/src/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/popover",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts
index be845b9693..44fe02989c 100644
--- a/src/popover/popover-container.component.ts
+++ b/src/popover/popover-container.component.ts
@@ -2,22 +2,22 @@ import { ChangeDetectionStrategy, Input, Component } from '@angular/core';
 import { PopoverConfig } from './popover.config';
 import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils';
 import { PlacementForBs5, checkMargins, AvailableBSPositions } from 'ngx-bootstrap/positioning';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'popover-container',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[attr.id]': 'popoverId',
-    '[class]':
-      '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + " " + checkMarginNecessity()',
-    '[class.show]': '!_bsVersions.isBs3',
-    '[class.bs3]': '_bsVersions.isBs3',
-    role: 'tooltip',
-    style: 'display:block; position:absolute'
-  },
-  styles: [
-    `
+    selector: 'popover-container',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[attr.id]': 'popoverId',
+        '[class]': '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + " " + checkMarginNecessity()',
+        '[class.show]': '!_bsVersions.isBs3',
+        '[class.bs3]': '_bsVersions.isBs3',
+        role: 'tooltip',
+        style: 'display:block; position:absolute'
+    },
+    styles: [
+        `
       :host.popover.bottom > .arrow {
         margin-left: -4px;
       }
@@ -26,8 +26,10 @@ import { PlacementForBs5, checkMargins, AvailableBSPositions } from 'ngx-bootstr
         position: absolute;
       }
     `
-  ],
-  templateUrl: './popover-container.component.html'
+    ],
+    templateUrl: './popover-container.component.html',
+    standalone: true,
+    imports: [NgIf]
 })
 export class PopoverContainerComponent {
   @Input() set placement(value: AvailableBSPositions) {
diff --git a/src/popover/popover.directive.ts b/src/popover/popover.directive.ts
index 2a99169143..cb9d953d95 100644
--- a/src/popover/popover.directive.ts
+++ b/src/popover/popover.directive.ts
@@ -22,7 +22,12 @@ let id = 0;
 /**
  * A lightweight, extensible directive for fancy popover creation.
  */
-@Directive({ selector: '[popover]', exportAs: 'bs-popover' })
+@Directive({
+  selector: '[popover]',
+  exportAs: 'bs-popover',
+  standalone: true,
+  providers: [ PositioningService, ComponentLoaderFactory ]
+})
 export class PopoverDirective implements OnInit, OnDestroy {
   /** unique id popover - use for aria-describedby */
   popoverId = id++;
diff --git a/src/popover/popover.module.ts b/src/popover/popover.module.ts
index ef030556f7..d69a1f8864 100644
--- a/src/popover/popover.module.ts
+++ b/src/popover/popover.module.ts
@@ -1,21 +1,19 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
-import { PositioningService } from 'ngx-bootstrap/positioning';
 import { PopoverDirective } from './popover.directive';
 import { PopoverContainerComponent } from './popover-container.component';
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [PopoverDirective, PopoverContainerComponent],
+    imports: [CommonModule, PopoverDirective, PopoverContainerComponent],
     exports: [PopoverDirective]
 })
 export class PopoverModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<PopoverModule> {
     return {
       ngModule: PopoverModule,
-      providers: [ComponentLoaderFactory, PositioningService]
+      providers: []
     };
   }
 }
diff --git a/src/positioning/package.json b/src/positioning/package.json
index dd538d52dd..e8407dfc6c 100644
--- a/src/positioning/package.json
+++ b/src/positioning/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/positioning",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/progressbar/bar.component.ts b/src/progressbar/bar.component.ts
index 35a8a86907..23fd07a5dc 100644
--- a/src/progressbar/bar.component.ts
+++ b/src/progressbar/bar.component.ts
@@ -11,22 +11,23 @@ import {
 import { ProgressbarType } from './progressbar-type.interface';
 
 @Component({
-  selector: 'bar',
-  templateUrl: './bar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    role: 'progressbar',
-    'aria-valuemin': '0',
-    '[class.progress-bar]': 'true',
-    '[class.progress-bar-animated]': 'animate',
-    '[class.progress-bar-striped]': 'striped',
-    '[attr.aria-valuenow]': 'value',
-    '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""',
-    '[attr.aria-valuemax]': 'max',
-    '[style.height.%]': '"100"',
-    '[style.width.%]': 'percent'
-  }
+    selector: 'bar',
+    templateUrl: './bar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        role: 'progressbar',
+        'aria-valuemin': '0',
+        '[class.progress-bar]': 'true',
+        '[class.progress-bar-animated]': 'animate',
+        '[class.progress-bar-striped]': 'striped',
+        '[attr.aria-valuenow]': 'value',
+        '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""',
+        '[attr.aria-valuemax]': 'max',
+        '[style.height.%]': '"100"',
+        '[style.width.%]': 'percent'
+    },
+    standalone: true
 })
 export class BarComponent implements OnChanges {
   /** maximum total value of progress element */
diff --git a/src/progressbar/package.json b/src/progressbar/package.json
index 5a863a19b5..d1ec324032 100644
--- a/src/progressbar/package.json
+++ b/src/progressbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/progressbar",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/progressbar/progressbar.component.ts b/src/progressbar/progressbar.component.ts
index 4e78dc1f10..b8967f9ae7 100644
--- a/src/progressbar/progressbar.component.ts
+++ b/src/progressbar/progressbar.component.ts
@@ -1,21 +1,25 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { BarValue, ProgressbarType } from './progressbar-type.interface';
 import { ProgressbarConfig } from './progressbar.config';
+import { BarComponent } from './bar.component';
+import { NgIf, NgFor } from '@angular/common';
 
 @Component({
-  selector: 'progressbar',
-  templateUrl: './progressbar.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[class.progress]': 'true',
-    '[attr.max]': 'max'
-  },
-  styles: [`
+    selector: 'progressbar',
+    templateUrl: './progressbar.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[class.progress]': 'true',
+        '[attr.max]': 'max'
+    },
+    styles: [`
     :host {
       width: 100%;
       display: flex;
-    } `]
+    } `],
+    standalone: true,
+    imports: [NgIf, BarComponent, NgFor]
 })
 export class ProgressbarComponent {
   /** maximum total value of progress element */
diff --git a/src/progressbar/progressbar.module.ts b/src/progressbar/progressbar.module.ts
index 207ed17a45..27385314b9 100644
--- a/src/progressbar/progressbar.module.ts
+++ b/src/progressbar/progressbar.module.ts
@@ -1,16 +1,18 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { BarComponent } from './bar.component';
 import { ProgressbarComponent } from './progressbar.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [BarComponent, ProgressbarComponent],
-  exports: [BarComponent, ProgressbarComponent]
+    imports: [BarComponent, ProgressbarComponent],
+    exports: [BarComponent, ProgressbarComponent]
 })
 export class ProgressbarModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<ProgressbarModule> {
-    return { ngModule: ProgressbarModule, providers: [] };
+    return {
+      ngModule: ProgressbarModule,
+      providers: []
+    };
   }
 }
diff --git a/src/progressbar/testing/progressbar.component.spec.ts b/src/progressbar/testing/progressbar.component.spec.ts
index 273545d29b..7028dbe435 100644
--- a/src/progressbar/testing/progressbar.component.spec.ts
+++ b/src/progressbar/testing/progressbar.component.spec.ts
@@ -20,7 +20,7 @@ describe('Component: Progress Bar', () => {
   it('check animate setter when _animate is equal to setter\'s argument', () => {
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     fixture = TestBed.createComponent(TestProgressbarComponent);
     component = fixture.componentInstance;
@@ -33,7 +33,7 @@ describe('Component: Progress Bar', () => {
   it('check striped setter when _striped is equal to setter\'s argument', () => {
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     fixture = TestBed.createComponent(TestProgressbarComponent);
     component = fixture.componentInstance;
@@ -47,7 +47,7 @@ describe('Component: Progress Bar', () => {
     const tpl = `<progressbar></progressbar>`;
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     TestBed.overrideComponent(TestProgressbarComponent, {
       set: { template: tpl }
@@ -65,7 +65,7 @@ describe('Component: Progress Bar', () => {
     const tpl = `<progressbar [type]="typeValue"></progressbar>`;
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     TestBed.overrideComponent(TestProgressbarComponent, {
       set: { template: tpl }
@@ -85,7 +85,7 @@ describe('Component: Progress Bar', () => {
     const tpl = `<progressbar [max]="100" [value]="60"></progressbar>`;
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     TestBed.overrideComponent(TestProgressbarComponent, {
       set: { template: tpl }
@@ -113,7 +113,7 @@ describe('Component: Progress Bar', () => {
     const tpl = `<progressbar [type]="typeValue" [value]="valueValue" [animate]="true" [max]="maxValue"></progressbar>`;
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     TestBed.overrideComponent(TestProgressbarComponent, {
       set: { template: tpl }
@@ -147,7 +147,7 @@ describe('progress bar', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestProgressbarComponent],
-      imports: [ProgressbarModule.forRoot()]
+      imports: [ProgressbarModule]
     });
     fixture = TestBed.overrideComponent(TestProgressbarComponent, {
       set: { template: tpl }
diff --git a/src/rating/package.json b/src/rating/package.json
index bf4f414597..2c2049d0d0 100644
--- a/src/rating/package.json
+++ b/src/rating/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/rating",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/rating/rating.component.ts b/src/rating/rating.component.ts
index e382b7d9b3..e1fd2a3285 100644
--- a/src/rating/rating.component.ts
+++ b/src/rating/rating.component.ts
@@ -14,6 +14,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { RatingResults } from './models';
 import { RatingConfig } from './rating.config';
+import { NgFor, NgTemplateOutlet } from '@angular/common';
 
 export const RATING_CONTROL_VALUE_ACCESSOR: Provider = {
   provide: NG_VALUE_ACCESSOR,
@@ -22,10 +23,12 @@ export const RATING_CONTROL_VALUE_ACCESSOR: Provider = {
 };
 
 @Component({
-  selector: 'rating',
-  templateUrl: './rating.component.html',
-  providers: [RATING_CONTROL_VALUE_ACCESSOR],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'rating',
+    templateUrl: './rating.component.html',
+    providers: [RATING_CONTROL_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgFor, NgTemplateOutlet]
 })
 export class RatingComponent implements ControlValueAccessor, OnInit {
   /** number of icons */
diff --git a/src/rating/rating.module.ts b/src/rating/rating.module.ts
index eb6df14b6d..0c85ba15c6 100644
--- a/src/rating/rating.module.ts
+++ b/src/rating/rating.module.ts
@@ -1,14 +1,13 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { RatingComponent } from './rating.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [RatingComponent],
-  exports: [RatingComponent]
+    imports: [RatingComponent],
+    exports: [RatingComponent]
 })
 export class RatingModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<RatingModule> {
     return {
       ngModule: RatingModule,
diff --git a/src/rating/testing/rating.component.spec.ts b/src/rating/testing/rating.component.spec.ts
index b22cedca8d..21cc76245a 100644
--- a/src/rating/testing/rating.component.spec.ts
+++ b/src/rating/testing/rating.component.spec.ts
@@ -26,7 +26,7 @@ describe('Component: Rating. Init:', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [RatingComponent],
+      imports: [RatingComponent],
       providers: [RatingConfig]
     });
     fixture = TestBed.createComponent(RatingComponent);
@@ -90,7 +90,7 @@ describe('Component: Rating. Custom template:', () => {
     fakeAsync(() => {
       TestBed.configureTestingModule({
         declarations: [TestRatingComponent],
-        imports: [RatingModule.forRoot(), FormsModule]
+        imports: [RatingModule, FormsModule]
       });
       TestBed.overrideComponent(TestRatingComponent, {
         set: { template: `
@@ -126,7 +126,7 @@ describe('Component: Rating. Clicks:', () => {
     fakeAsync(() => {
       TestBed.configureTestingModule({
         declarations: [TestRatingComponent],
-        imports: [RatingModule.forRoot(), FormsModule]
+        imports: [RatingModule, FormsModule]
       });
       TestBed.overrideComponent(TestRatingComponent, {
         set: {template: tpl}
diff --git a/src/root/README.md b/src/root/README.md
index d3f4aab4e0..9816ae7b90 100644
--- a/src/root/README.md
+++ b/src/root/README.md
@@ -98,7 +98,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   ...
-  imports: [TooltipModule.forRoot(),...]
+  imports: [TooltipModule,...]
   ...
 })
 ```
diff --git a/src/root/package.json b/src/root/package.json
index e7c21d8e33..4cd5008c30 100644
--- a/src/root/package.json
+++ b/src/root/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "description": "Angular Bootstrap",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT",
diff --git a/src/schematics/package.json b/src/schematics/package.json
index 5804886b53..2fb67140af 100644
--- a/src/schematics/package.json
+++ b/src/schematics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "schematics",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "schematics": "./collection.json",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
diff --git a/src/schematics/src/ng-add/index.ts b/src/schematics/src/ng-add/index.ts
index d370565385..e1f37d7a41 100644
--- a/src/schematics/src/ng-add/index.ts
+++ b/src/schematics/src/ng-add/index.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { workspaces } from '@angular-devkit/core';
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
+import { getAppModulePath, isStandaloneApp } from '@schematics/angular/utility/ng-ast-utils';
 import { addModuleImportToRootModule, addPackageToPackageJson } from '../utils';
 import { hasNgModuleImport } from '../utils/ng-module-imports';
 import { getProjectMainFile } from '../utils/project-main-file';
@@ -85,6 +85,11 @@ function addModuleOfComponent(project: workspaces.ProjectDefinition, host: Tree,
     return;
   }
 
+  if (isStandaloneApp(host, getProjectMainFile(project))) {
+    throw new SchematicsException(`ngx-bootstrap doesn't support moduleless approach if we couldn't find
+    your starting *.module.ts learn more here https://valor-software.com/ngx-bootstrap/#/documentation#installation`);
+  }
+
   const appModulePath = getAppModulePath(host, getProjectMainFile(project));
   if (componentName && components[componentName]) {
     if (hasNgModuleImport(host, appModulePath, components[componentName].moduleName)) {
diff --git a/src/schematics/src/utils/current_dependency_versions.json b/src/schematics/src/utils/current_dependency_versions.json
index d027466700..47c322c2d5 100644
--- a/src/schematics/src/utils/current_dependency_versions.json
+++ b/src/schematics/src/utils/current_dependency_versions.json
@@ -1,4 +1,4 @@
 {
-  "NGX_BOOTSTRAP_VERSION": "18.0.0",
+  "NGX_BOOTSTRAP_VERSION": "18.1.2",
   "BOOTSTRAP_VERSION": "^5.2.3"
 }
diff --git a/src/schematics/src/utils/index.ts b/src/schematics/src/utils/index.ts
index c577271b94..e1486adf20 100644
--- a/src/schematics/src/utils/index.ts
+++ b/src/schematics/src/utils/index.ts
@@ -9,7 +9,7 @@ import { SchematicsException, Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { addImportToModule } from '@schematics/angular/utility/ast-utils';
 import { Change, InsertChange } from '@schematics/angular/utility/change';
-import { getAppModulePath } from '@schematics/angular/utility/ng-ast-utils';
+import { getAppModulePath, isStandaloneApp } from '@schematics/angular/utility/ng-ast-utils';
 import * as ts from 'typescript';
 import { getProjectMainFile } from './project-main-file';
 import { workspaces } from '@angular-devkit/core';
@@ -87,6 +87,11 @@ export function addModuleImportToRootModule(
   src: string,
   project: workspaces.ProjectDefinition
 ) {
+  if (isStandaloneApp(host, getProjectMainFile(project))) {
+    throw new SchematicsException(`ngx-bootstrap doesn't support moduleless approach if we couldn't find
+    your starting *.module.ts learn more here https://valor-software.com/ngx-bootstrap/#/documentation#installation`);
+  }
+
   const modulePath = getAppModulePath(host, getProjectMainFile(project));
   const moduleSource = getSourceFile(host, modulePath);
   if (!moduleSource) {
diff --git a/src/schematics/src/utils/project-main-file.ts b/src/schematics/src/utils/project-main-file.ts
index f55135f2ee..c739ac7ec8 100644
--- a/src/schematics/src/utils/project-main-file.ts
+++ b/src/schematics/src/utils/project-main-file.ts
@@ -13,10 +13,10 @@ import { workspaces } from '@angular-devkit/core';
 /** Looks for the main TypeScript file in the given project and returns its path. */
 export function getProjectMainFile(project: workspaces.ProjectDefinition): string {
   const buildOptions = getProjectTargetOptions(project, 'build');
-  if (!buildOptions.main) {
+  if (!buildOptions.main && !buildOptions.browser) {
     throw new SchematicsException(`Could not find the project main file inside of the ` +
       `workspace config (${project.sourceRoot})`);
   }
 
-  return buildOptions.main.toString();
+  return buildOptions.main?.toString() ?? buildOptions.browser.toString();
 }
diff --git a/src/sortable/package.json b/src/sortable/package.json
index a1051849b9..7bd5818b93 100644
--- a/src/sortable/package.json
+++ b/src/sortable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/sortable",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/sortable/sortable.component.ts b/src/sortable/sortable.component.ts
index 7761bc6394..4440d05c80 100644
--- a/src/sortable/sortable.component.ts
+++ b/src/sortable/sortable.component.ts
@@ -9,11 +9,12 @@ import {
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { DraggableItem } from './draggable-item';
 import { DraggableItemService } from './draggable-item.service';
+import { NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 
 @Component({
-  selector: 'bs-sortable',
-  exportAs: 'bs-sortable',
-  template: `
+    selector: 'bs-sortable',
+    exportAs: 'bs-sortable',
+    template: `
 <div
     [ngClass]="wrapperClass"
     [ngStyle]="wrapperStyle"
@@ -45,13 +46,16 @@ import { DraggableItemService } from './draggable-item.service';
 
 <ng-template #defItemTemplate let-item="item">{{item.value}}</ng-template>
 `,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SortableComponent),
-      multi: true
-    }
-  ]
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SortableComponent),
+            multi: true
+        },
+      DraggableItemService
+    ],
+    standalone: true,
+    imports: [NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet]
 })
 export class SortableComponent implements ControlValueAccessor {
   private static globalZoneIndex = 0;
diff --git a/src/sortable/sortable.module.ts b/src/sortable/sortable.module.ts
index ab4ef68b4d..29cda7c63c 100644
--- a/src/sortable/sortable.module.ts
+++ b/src/sortable/sortable.module.ts
@@ -1,16 +1,17 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { SortableComponent } from './sortable.component';
-import { DraggableItemService } from './draggable-item.service';
 
 @NgModule({
-  declarations: [SortableComponent],
-  imports: [CommonModule],
-  exports: [SortableComponent]
+    imports: [SortableComponent],
+    exports: [SortableComponent]
 })
 export class SortableModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<SortableModule> {
-    return { ngModule: SortableModule, providers: [DraggableItemService] };
+    return {
+      ngModule: SortableModule,
+      providers: []
+    };
   }
 }
diff --git a/src/sortable/testing/draggable-item.service.spec.ts b/src/sortable/testing/draggable-item.service.spec.ts
index c302addf32..a447be91a4 100644
--- a/src/sortable/testing/draggable-item.service.spec.ts
+++ b/src/sortable/testing/draggable-item.service.spec.ts
@@ -3,7 +3,8 @@ import { fakeAsync, inject, TestBed } from '@angular/core/testing';
 import { DraggableItem, DraggableItemService, SortableItem } from '../index';
 
 @Component({
-  template: `<h1>Test</h1>`
+    template: `<h1>Test</h1>`,
+    standalone: true
 })
 class TestComponent {}
 
@@ -14,9 +15,9 @@ describe('Service: DraggableItem', () => {
   beforeEach(
     fakeAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [TestComponent],
-        providers: [DraggableItemService]
-      }).createComponent(TestComponent);
+    imports: [TestComponent],
+    providers: [DraggableItemService]
+}).createComponent(TestComponent);
     })
   );
 
diff --git a/src/sortable/testing/sortable.component.spec.ts b/src/sortable/testing/sortable.component.spec.ts
index 2647868a0c..d409d1a431 100644
--- a/src/sortable/testing/sortable.component.spec.ts
+++ b/src/sortable/testing/sortable.component.spec.ts
@@ -14,7 +14,7 @@ const HEROES_OBJ: { id: number; name: string }[] = [
 ];
 
 @Component({
-  template: `
+    template: `
     <bs-sortable
       id="sort1"
       [(ngModel)]="heroes"
@@ -23,7 +23,9 @@ const HEROES_OBJ: { id: number; name: string }[] = [
       [itemActiveStyle]="{ 'background-color': 'lightgray' }"
     ></bs-sortable>
     <bs-sortable id="sort2" [(ngModel)]="heroesObj" [fieldName]="'name'" [placeholderItem]="'empty'"></bs-sortable>
-  `
+  `,
+    standalone: true,
+    imports: [FormsModule]
 })
 class TestSortableComponent {
   selectedState?: string;
@@ -38,10 +40,9 @@ xdescribe('Component: Sortable', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [TestSortableComponent],
-      imports: [SortableModule.forRoot(), FormsModule],
-      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
-    }).createComponent(TestSortableComponent);
+    imports: [SortableModule, FormsModule, TestSortableComponent],
+    providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
+}).createComponent(TestSortableComponent);
 
     fixture.detectChanges();
 
diff --git a/src/tabs/ng-transclude.directive.ts b/src/tabs/ng-transclude.directive.ts
index 833549af16..0c99a46ac9 100644
--- a/src/tabs/ng-transclude.directive.ts
+++ b/src/tabs/ng-transclude.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  selector: '[ngTransclude]'
+    selector: '[ngTransclude]',
+    standalone: true
 })
 export class NgTranscludeDirective {
   viewRef: ViewContainerRef;
diff --git a/src/tabs/package.json b/src/tabs/package.json
index 11fecbf5a8..74e986575b 100644
--- a/src/tabs/package.json
+++ b/src/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tabs",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/tabs/tab-heading.directive.ts b/src/tabs/tab-heading.directive.ts
index 15d811b373..10bc975c2a 100644
--- a/src/tabs/tab-heading.directive.ts
+++ b/src/tabs/tab-heading.directive.ts
@@ -3,7 +3,10 @@ import { Directive, TemplateRef } from '@angular/core';
 import { TabDirective } from './tab.directive';
 
 /** Should be used to mark <ng-template> element as a template for tab heading */
-@Directive({ selector: '[tabHeading]' })
+@Directive({
+    selector: '[tabHeading]',
+    standalone: true
+})
 export class TabHeadingDirective {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   templateRef?: TemplateRef<any>;
diff --git a/src/tabs/tab.directive.ts b/src/tabs/tab.directive.ts
index 20a53500c0..e81950a7e9 100644
--- a/src/tabs/tab.directive.ts
+++ b/src/tabs/tab.directive.ts
@@ -12,7 +12,10 @@ import {
 } from '@angular/core';
 import { TabsetComponent } from './tabset.component';
 
-@Directive({ selector: 'tab, [tab]', exportAs: 'tab' })
+@Directive({
+    selector: 'tab, [tab]', exportAs: 'tab',
+    standalone: true
+})
 export class TabDirective implements OnInit, OnDestroy {
   /** tab header text */
   @Input() heading?: string;
diff --git a/src/tabs/tabs.module.ts b/src/tabs/tabs.module.ts
index e407d65304..ce779c96e1 100644
--- a/src/tabs/tabs.module.ts
+++ b/src/tabs/tabs.module.ts
@@ -7,21 +7,19 @@ import { TabDirective } from './tab.directive';
 import { TabsetComponent } from './tabset.component';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [
-    NgTranscludeDirective,
-    TabDirective,
-    TabsetComponent,
-    TabHeadingDirective
-  ],
-  exports: [
-    TabDirective,
-    TabsetComponent,
-    TabHeadingDirective,
-    NgTranscludeDirective
-  ]
+    imports: [CommonModule, NgTranscludeDirective,
+        TabDirective,
+        TabsetComponent,
+        TabHeadingDirective],
+    exports: [
+        TabDirective,
+        TabsetComponent,
+        TabHeadingDirective,
+        NgTranscludeDirective
+    ]
 })
 export class TabsModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<TabsModule> {
     return {
       ngModule: TabsModule,
diff --git a/src/tabs/tabset.component.ts b/src/tabs/tabset.component.ts
index b7a5880480..50060e0ffb 100644
--- a/src/tabs/tabset.component.ts
+++ b/src/tabs/tabset.component.ts
@@ -2,12 +2,16 @@ import { Component, HostBinding, Input, OnDestroy, Renderer2, ElementRef } from
 
 import { TabDirective } from './tab.directive';
 import { TabsetConfig } from './tabset.config';
+import { NgTranscludeDirective } from './ng-transclude.directive';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 // todo: add active event to tab
 // todo: fix? mixing static and dynamic tabs position tabs in order of creation
 @Component({
-  selector: 'tabset',
-  templateUrl: './tabset.component.html',
-  styleUrls: ['./tabs.scss']
+    selector: 'tabset',
+    templateUrl: './tabset.component.html',
+    styleUrls: ['./tabs.scss'],
+    standalone: true,
+    imports: [NgClass, NgFor, NgTranscludeDirective, NgIf]
 })
 export class TabsetComponent implements OnDestroy {
   /** if true tabs will be placed vertically */
diff --git a/src/tabs/testing/tabset.component.spec.ts b/src/tabs/testing/tabset.component.spec.ts
index 18ddb84caa..1e6f2afeb3 100644
--- a/src/tabs/testing/tabset.component.spec.ts
+++ b/src/tabs/testing/tabset.component.spec.ts
@@ -105,7 +105,7 @@ describe('Component: Tabs', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestTabsetComponent],
-      imports: [TabsModule.forRoot()]
+      imports: [TabsModule]
     });
     TestBed.overrideComponent(TestTabsetComponent, { set: { template: html } });
     fixture = TestBed.createComponent(TestTabsetComponent);
diff --git a/src/timepicker/package.json b/src/timepicker/package.json
index 76a5b5892f..908a5e4554 100644
--- a/src/timepicker/package.json
+++ b/src/timepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/timepicker",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/timepicker/testing/timepicker.component.spec.ts b/src/timepicker/testing/timepicker.component.spec.ts
index c9be4b5469..0b4f27823a 100644
--- a/src/timepicker/testing/timepicker.component.spec.ts
+++ b/src/timepicker/testing/timepicker.component.spec.ts
@@ -54,7 +54,7 @@ describe('Component: TimepickerComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [TimepickerModule.forRoot(), FormsModule, ReactiveFormsModule],
+      imports: [TimepickerModule, FormsModule, ReactiveFormsModule],
       providers: [TimepickerConfig, TimepickerActions]
     });
   });
diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts
index 9540912f08..5442e2720a 100644
--- a/src/timepicker/timepicker.component.ts
+++ b/src/timepicker/timepicker.component.ts
@@ -35,6 +35,7 @@ import {
   padNumber,
   parseTime
 } from './timepicker.utils';
+import { NgIf } from '@angular/common';
 
 export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = {
   provide: NG_VALUE_ACCESSOR,
@@ -43,11 +44,11 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = {
 };
 
 @Component({
-  selector: 'timepicker',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore],
-  templateUrl: './timepicker.component.html',
-  styles: [`
+    selector: 'timepicker',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore, TimepickerActions],
+    templateUrl: './timepicker.component.html',
+    styles: [`
     .bs-chevron {
       border-style: solid;
       display: block;
@@ -74,7 +75,9 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = {
       padding: .375rem .55rem;
     }
   `],
-  encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [NgIf]
 })
 export class TimepickerComponent
   implements ControlValueAccessor,
diff --git a/src/timepicker/timepicker.module.ts b/src/timepicker/timepicker.module.ts
index 336bcdf22a..bdb8678a4a 100644
--- a/src/timepicker/timepicker.module.ts
+++ b/src/timepicker/timepicker.module.ts
@@ -1,21 +1,17 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 
 import { TimepickerComponent } from './timepicker.component';
-import { TimepickerActions } from './reducer/timepicker.actions';
-import { TimepickerStore } from './reducer/timepicker.store';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [TimepickerComponent],
-  exports: [TimepickerComponent],
-  providers:[TimepickerStore]
+    imports: [TimepickerComponent],
+    exports: [TimepickerComponent],
 })
 export class TimepickerModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<TimepickerModule> {
     return {
       ngModule: TimepickerModule,
-      providers: [TimepickerActions, TimepickerStore]
+      providers: []
     };
   }
 }
diff --git a/src/tooltip/package.json b/src/tooltip/package.json
index d5ccef2018..06f4e714b4 100644
--- a/src/tooltip/package.json
+++ b/src/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/tooltip",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/tooltip/testing/tooltip.directive.spec.ts b/src/tooltip/testing/tooltip.directive.spec.ts
index 4465ea6e19..eb9b1c5762 100644
--- a/src/tooltip/testing/tooltip.directive.spec.ts
+++ b/src/tooltip/testing/tooltip.directive.spec.ts
@@ -41,7 +41,7 @@ describe('Directives: Tooltips', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestTooltipComponent],
-      imports: [TooltipModule.forRoot(), FormsModule]
+      imports: [TooltipModule, FormsModule]
     });
     TestBed.overrideComponent(TestTooltipComponent, {
       set: {template: overTemplate}
diff --git a/src/tooltip/tooltip-container.component.ts b/src/tooltip/tooltip-container.component.ts
index 3548287f94..e907f4fd53 100644
--- a/src/tooltip/tooltip-container.component.ts
+++ b/src/tooltip/tooltip-container.component.ts
@@ -8,17 +8,16 @@ import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils';
 import { PlacementForBs5 } from 'ngx-bootstrap/positioning';
 
 @Component({
-  selector: 'bs-tooltip-container',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[class]':
-      '"show tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
-    '[attr.id]': 'this.id',
-    role: 'tooltip'
-  },
-  styles: [
-    `
+    selector: 'bs-tooltip-container',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[class]': '"show tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
+        '[attr.id]': 'this.id',
+        role: 'tooltip'
+    },
+    styles: [
+        `
     :host.tooltip {
       display: block;
       pointer-events: none;
@@ -29,11 +28,12 @@ import { PlacementForBs5 } from 'ngx-bootstrap/positioning';
       position: absolute;
     }
   `
-  ],
-  template: `
+    ],
+    template: `
     <div class="tooltip-arrow arrow"></div>
     <div class="tooltip-inner"><ng-content></ng-content></div>
-    `
+    `,
+    standalone: true
 })
 export class TooltipContainerComponent implements AfterViewInit {
   classMap?: { [key: string]: boolean };
diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts
index 263da9325a..a31141acdc 100644
--- a/src/tooltip/tooltip.directive.ts
+++ b/src/tooltip/tooltip.directive.ts
@@ -24,8 +24,12 @@ import { AvailableBSPositions } from 'ngx-bootstrap/positioning';
 let id = 0;
 
 @Directive({
-  selector: '[tooltip], [tooltipHtml]',
-  exportAs: 'bs-tooltip'
+    selector: '[tooltip], [tooltipHtml]',
+    exportAs: 'bs-tooltip',
+    standalone: true,
+    providers: [
+      ComponentLoaderFactory, PositioningService
+    ]
 })
 export class TooltipDirective implements OnInit, OnDestroy {
   tooltipId = id++;
diff --git a/src/tooltip/tooltip.module.ts b/src/tooltip/tooltip.module.ts
index 7fbeef6d2c..6a390afbd8 100644
--- a/src/tooltip/tooltip.module.ts
+++ b/src/tooltip/tooltip.module.ts
@@ -1,20 +1,18 @@
 import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { TooltipContainerComponent } from './tooltip-container.component';
 import { TooltipDirective } from './tooltip.directive';
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
-import { PositioningService } from 'ngx-bootstrap/positioning';
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [TooltipDirective, TooltipContainerComponent],
+    imports: [CommonModule, TooltipDirective, TooltipContainerComponent],
     exports: [TooltipDirective]
 })
 export class TooltipModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<TooltipModule> {
     return {
       ngModule: TooltipModule,
-      providers: [ComponentLoaderFactory, PositioningService]
+      providers: []
     };
   }
 }
diff --git a/src/typeahead/package.json b/src/typeahead/package.json
index e6235176e3..f352e05e24 100644
--- a/src/typeahead/package.json
+++ b/src/typeahead/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/typeahead",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }
diff --git a/src/typeahead/testing/typeahead-container.component.spec.ts b/src/typeahead/testing/typeahead-container.component.spec.ts
index 054d89343c..6bc23400da 100644
--- a/src/typeahead/testing/typeahead-container.component.spec.ts
+++ b/src/typeahead/testing/typeahead-container.component.spec.ts
@@ -34,8 +34,7 @@ describe('Component: TypeaheadContainer', () => {
 
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [TypeaheadContainerComponent],
-      imports: [BrowserAnimationsModule],
+      imports: [BrowserAnimationsModule, TypeaheadContainerComponent],
       providers: [
         {
           provide: TypeaheadOptions,
diff --git a/src/typeahead/testing/typeahead.directive.spec.ts b/src/typeahead/testing/typeahead.directive.spec.ts
index c750486577..203265ae0a 100644
--- a/src/typeahead/testing/typeahead.directive.spec.ts
+++ b/src/typeahead/testing/typeahead.directive.spec.ts
@@ -16,7 +16,7 @@ interface State {
 }
 
 @Component({
-  template: ` <input
+    template: `<input
     [(ngModel)]="selectedState"
     [typeahead]="states"
     [typeaheadOptionField]="'name'"
@@ -52,8 +52,9 @@ describe('Directive: Typeahead', () => {
   beforeEach(waitForAsync(() =>
     TestBed.configureTestingModule({
       declarations: [TestTypeaheadComponent],
-      imports: [TypeaheadModule.forRoot(), BrowserAnimationsModule, FormsModule]
-    }).compileComponents()));
+      imports: [TypeaheadModule, BrowserAnimationsModule, FormsModule]
+    }).compileComponents())
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestTypeaheadComponent);
diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts
index 5220e44621..032fe11a72 100644
--- a/src/typeahead/typeahead-container.component.ts
+++ b/src/typeahead/typeahead-container.component.ts
@@ -22,23 +22,24 @@ import { TypeaheadMatch } from './typeahead-match.class';
 import { TypeaheadDirective } from './typeahead.directive';
 import { typeaheadAnimation } from './typeahead-animations';
 import { TypeaheadOptionItemContext, TypeaheadOptionListContext, TypeaheadTemplateMethods } from './models';
+import { NgTemplateOutlet, NgFor, NgIf } from '@angular/common';
 
 let nextWindowId = 0;
 
 @Component({
-  selector: 'typeahead-container',
-  templateUrl: './typeahead-container.component.html',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    class: 'dropdown open bottom dropdown-menu',
-    '[style.height]': `needScrollbar ? guiHeight: 'auto'`,
-    '[style.visibility]': `'inherit'`,
-    '[class.dropup]': 'dropup',
-    style: 'position: absolute;display: block;',
-    '[attr.role]': `'listbox'`
-  },
-  styles: [
-    `
+    selector: 'typeahead-container',
+    templateUrl: './typeahead-container.component.html',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        class: 'dropdown open bottom dropdown-menu',
+        '[style.height]': `needScrollbar ? guiHeight: 'auto'`,
+        '[style.visibility]': `'inherit'`,
+        '[class.dropup]': 'dropup',
+        style: 'position: absolute;display: block;',
+        '[attr.role]': `'listbox'`
+    },
+    styles: [
+        `
     :host.dropdown {
       z-index: 1000;
     }
@@ -48,8 +49,11 @@ let nextWindowId = 0;
       height: 100px;
     }
   `
-  ],
-  animations: [typeaheadAnimation]
+    ],
+    animations: [typeaheadAnimation],
+    standalone: true,
+    imports: [NgTemplateOutlet, NgFor, NgIf],
+    providers: [PositioningService]
 })
 
 export class TypeaheadContainerComponent implements OnDestroy {
@@ -272,7 +276,7 @@ export class TypeaheadContainerComponent implements OnDestroy {
             `${itemStr.substring(0, startIdx)}<strong>${itemStr.substring(startIdx, startIdx + tokenLen)}</strong>` +
             `${itemStr.substring(startIdx + tokenLen)}`;
           itemStrHelper =
-            `${itemStrHelper.substring(0, startIdx)}        ${' '.repeat(tokenLen)}         ` +
+            `${itemStrHelper.substring(0, startIdx)}????????${'??'.repeat(tokenLen)}??????????` +
             `${itemStrHelper.substring(startIdx + tokenLen)}`;
         }
       }
diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts
index 1722256f12..2296e55ce6 100644
--- a/src/typeahead/typeahead.directive.ts
+++ b/src/typeahead/typeahead.directive.ts
@@ -24,21 +24,24 @@ import { TypeaheadMatch } from './typeahead-match.class';
 import { TypeaheadOrder } from './typeahead-order.class';
 import { getValueFromObject, latinize, tokenize } from './typeahead-utils';
 import { TypeaheadConfig } from './typeahead.config';
+import { PositioningService } from 'ngx-bootstrap/positioning';
 
 // eslint-disable-next-line
 type TypeaheadOption = string | Record<string | number, any>;
 type TypeaheadOptionArr = TypeaheadOption[] | Observable<TypeaheadOption>;
 
 @Directive({
-  selector: '[typeahead]',
-  exportAs: 'bs-typeahead',
-  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-  host: {
-    '[attr.aria-activedescendant]': 'activeDescendant',
-    '[attr.aria-owns]': 'isOpen ? this._container.popupId : null',
-    '[attr.aria-expanded]': 'isOpen',
-    '[attr.aria-autocomplete]': 'list'
-  }
+    selector: '[typeahead]',
+    exportAs: 'bs-typeahead',
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+    host: {
+        '[attr.aria-activedescendant]': 'activeDescendant',
+        '[attr.aria-owns]': 'isOpen ? this._container.popupId : null',
+        '[attr.aria-expanded]': 'isOpen',
+        '[attr.aria-autocomplete]': 'list'
+    },
+    standalone: true,
+    providers: [ComponentLoaderFactory, PositioningService]
 })
 export class TypeaheadDirective implements OnInit, OnDestroy {
   /** options source, can be Array of strings, objects or
diff --git a/src/typeahead/typeahead.module.ts b/src/typeahead/typeahead.module.ts
index f5729decee..334b3df41c 100644
--- a/src/typeahead/typeahead.module.ts
+++ b/src/typeahead/typeahead.module.ts
@@ -1,21 +1,19 @@
 import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { TypeaheadContainerComponent } from './typeahead-container.component';
 import { TypeaheadDirective } from './typeahead.directive';
-import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
-import { PositioningService } from 'ngx-bootstrap/positioning';
 
 @NgModule({
-    imports: [CommonModule],
-    declarations: [TypeaheadContainerComponent, TypeaheadDirective],
+    imports: [CommonModule, TypeaheadContainerComponent, TypeaheadDirective],
     exports: [TypeaheadContainerComponent, TypeaheadDirective]
 })
 export class TypeaheadModule {
+  // @deprecated method not required anymore, will be deleted in v19.0.0
   static forRoot(): ModuleWithProviders<TypeaheadModule> {
     return {
       ngModule: TypeaheadModule,
-      providers: [ComponentLoaderFactory, PositioningService]
+      providers: []
     };
   }
 }
diff --git a/src/utils/package.json b/src/utils/package.json
index 1274afb3ee..9f1924a89c 100644
--- a/src/utils/package.json
+++ b/src/utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-bootstrap/utils",
-  "version": "18.0.0",
+  "version": "18.1.2",
   "author": "Dmitriy Shekhovtsov <valorkin@gmail.com>",
   "license": "MIT"
 }