Getting error " No provider for AlertIconAndTypesService!"

Question

I am using clarity module with my angular 4 code. When using their alert box example, I am getting the above error

Example Code

<div class="alert alert-info">
    <div class="alert-items">
        <div class="alert-item">
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            </div>
            <span class="alert-text">...</span>
            <div class="alert-actions">
                <a href="..." class="alert-action">Acknowledge</a>
                <a href="..." class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
</div>

Error stack details

ERROR Error: Uncaught (in promise): Error: No provider for AlertIconAndTypesService! Error: No provider for AlertIconAndTypesService! at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9475) at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557) at resolveDep (core.es5.js:11060) at createClass (core.es5.js:10913) at injectionError (core.es5.js:1169) at noProviderError (core.es5.js:1207) at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) at ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) at resolveNgModuleDep (core.es5.js:9475) at NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557) at resolveDep (core.es5.js:11060) at createClass (core.es5.js:10913) at resolvePromise (polyfills.bundle.js:3328) at resolvePromise (polyfills.bundle.js:3299) at polyfills.bundle.js:3376 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2969) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2968) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2736) at drainMicroTaskQueue (polyfills.bundle.js:3140) at

Answer 1

As the error suggests, import the AlertIconAndTypesService service in your module

So in your app.module.ts file

import { AlertIconAndTypesService } from "clarity-angular/emphasis/alert/providers/icon-and-types-service";

....
@NgModule({
...
providers:['AlertIconAndTypesService']
...
})

Answer 2

Make sure you have added AlertIconAndTypesService under provides inside app.module.ts

import { AlertIconAndTypesService } from 'clarity-angular/emphasis/alert/providers/icon-and-types-service';

and then,

@NgModule({
 providers: [
       AlertIconAndTypesService
    ]
})

Answer 3

The issue is actually described in the big red box under the "Code & Examples" header in the alerts documentation on the Clarity website.

So you need to do one of two things:

1: Turn your alert into a clr-alert component.

<clr-alert>
    <!-- "info" is the default -->
    <div clr-alert-item class="alert-item">
        <!-- clr-alert-item is optional at this time; maybe not later... -->
        <!-- note that the .alert-items wrapper is not need with clr-alert -->
        <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
        </div>
        <span class="alert-text">...</span>
        <div class="alert-actions">
            <a href="..." class="alert-action">Acknowledge</a>
            <a href="..." class="alert-action">Reset to green</a>
        </div>
    </div>
    <!-- the close button is also included in the component -->
</clr-alert>

2: Use the .static classname to have the AlertComponent ignore your straight HTML alert.

<div class="alert alert-info">
    <div class="alert-items">
        <div class="alert-item static">
            <!-- .static hides the alert-item from the Angular component lookup -->
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            </div>
            <span class="alert-text">...</span>
            <div class="alert-actions">
                <a href="..." class="alert-action">Acknowledge</a>
                <a href="..." class="alert-action">Reset to green</a>
            </div>
        </div>
    </div>
    <button type="button" class="close" aria-label="Close">
        <clr-icon aria-hidden="true" shape="close"></clr-icon>
    </button>
</div>

Answer 4

Import in app.module.ts file:

import { DeviceDetectorService } from 'ngx-device-detector';

And add in providers array

providers: [ DeviceDetectorService ]