Ngx-bootstrap: AlertModule imported in a SharedModule issue

Created on 10 Mar 2017 · 9Comments · Source: valor-software/ngx-bootstrap

I'm moving all shared modules into a named SharedModule module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { AlertModule } from 'ng2-bootstrap';
import { Select2Module } from 'ng2-select2';

export const modules = [
  CommonModule,
  ReactiveFormsModule,
  FormsModule,
  HttpModule,
  RouterModule,
  StoreModule,
  StoreDevtoolsModule,
  AlertModule,
  Select2Module
];

export const declarations = [];

@NgModule({
  imports: modules,
  exports: [...modules, ...declarations],
  declarations
})
export class SharedModule { }

As you can see, I'm using AlertModule. Nevertheless I'm getting an issue in my LoginComponent when it's loaded:

caused by: No provider for AlertConfig!

LoginModule is:

export const routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' }
];

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    SharedModule,
    RouterModule.forChild(routes),
  ]
})
export default class LoginModule {
  static routes = routes;
}

and it's loaded lazily using Router. The routes are:

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
}, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'signin', loadChildren: () => System.import('./signin/signin.module')
  }, {
    path: 'validate', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

related html code in login.template.html:

<div class="clearfix">
    <alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
        <div [innerHTML]="alert.msg"></div>
    </alert>
</div>

If I import AlertModule using AlertModule.forRoot() in my app.module.ts I'm getting this template parse error:

Error: Template parse errors:
Can't bind to 'type' since it isn't a known property of 'alert'. ("

<alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">

                  <div"): LoginComponent@35:67
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
              </div>

              <div class="clearfix">

                [ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAl"): LoginComponent@35:16
BaseError@http://localhost:3002/vendor.bundle.js:15859:9 [angular]
SyntaxError@http://localhost:3002/vendor.bundle.js:35689:9 [angular]
ac_vendor<["./node_modules/@angular/compiler/src/template_parser/template_parser.js"]/TemplateParser.prototype.parse@http://localhost:3002/vendor.bundle.js:34130:19 [angular]

Source

jeusdi

Most helpful comment

Import with forRoot()
Export without

valorkin on 19 Jul 2017

👍9 🎉2 ❤1

All 9 comments

I have same issue to you. Anyone can help. Thanks in advance

lamemmv on 1 Apr 2017

you need to export AlertModule.forRoot()
or call it in app module

valorkin on 7 Apr 2017

👎3

@valorkin is import not export?

alanhg on 17 May 2017

I'm trying to create a similar setup for my tests by having my ngx-bootstrap modules declared in a shared module. If I try exporting the bootstrap module I'm using, I get the exception

Error: No provider for ComponentLoaderFactory!

If I add .forRoot() onto the export declaration, I get

ERROR in ./src/main/javascript/shared/test/shared.module.ts
[INFO] (15,11): error TS2345: Argument of type '{ exports: ModuleWithProviders[]; }' is not assignable to parameter of type 'NgModule'.
[INFO] Types of property 'exports' are incompatible.
[INFO] Type 'ModuleWithProviders[]' is not assignable to type '(any[] | Type)[]'.
[INFO] Type 'ModuleWithProviders' is not assignable to type 'any[] | Type'.
[INFO] Type 'ModuleWithProviders' is not assignable to type 'Type'.
[INFO] Property 'name' is missing in type 'ModuleWithProviders'.

ahettlin on 6 Jun 2017

🎉3

I have a similar Issue:

when I add .forRoot() to the export declaration I get

ERROR in [at-loader] ./src/app/shared/shared.module.ts:92:11 TS2345: Argument of type '{ imports: (ModuleWithProviders | typeof CommonModule | typeof RouterModule)[]; declarations: (ty...' is not assignable to parameter of type 'NgModule'. Types of property 'exports' are incompatible. Type '(ModuleWithProviders | typeof CommonModule | typeof RouterModule | typeof AddressComponent | type...' is not assignable to type '(any[] | Type<any>)[]'. Type 'ModuleWithProviders | typeof CommonModule | typeof RouterModule | typeof AddressComponent | typeo...' is not assignable to type 'any[] | Type<any>'. Type 'ModuleWithProviders' is not assignable to type 'any[] | Type<any>'. Type 'ModuleWithProviders' is not assignable to type 'Type<a

any Idea?

I'm using angular 4.0.0

crebuh on 19 Jul 2017

Import with forRoot()
Export without

valorkin on 19 Jul 2017

👍9 🎉2 ❤1

its have the same bug as in BsDatepickerModule - it must be importedin the same module where you declare the component you use it.......
i also have this bug and this change solve the problem

yoni333 on 7 May 2018

@valorkin hi can u please help me, i have migrated one project from angular 4 to 6 .... but for ng2 bootstrap it is giving error this one : zone.js:672 Uncaught Error: Template parse errors:
Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.

If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component. .... Please help me out how to do it