出现错误“AlertIconAndTypesService 没有提供者！”

Question

我在 angular 4 代码中使用清晰度模块。使用他们的 alert box 示例时，出现上述错误

示例代码

<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 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

如错误所示，在您的模块中导入 AlertIconAndTypesService 服务

因此在您的 app.module.ts 文件中

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

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

Answer 2

确保您在 app.module.ts

内的 provides 下添加了 AlertIconAndTypesService

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

然后，

@NgModule({
 providers: [
       AlertIconAndTypesService
    ]
})

Answer 3

这个问题实际上在the alerts documentation on the Clarity website"Code & Examples"header下面的大红框里有描述。

所以你需要做以下两件事之一：

1：将您的提醒变成 clr-alert 组件。

<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：使用 .static 类名让 AlertComponent 忽略直接 HTML 警报。

<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

在 app.module.ts 文件中导入：

从'ngx-device-detector'导入{DeviceDetectorService}；

并添加提供者数组

供应商：[ 设备检测服务 ]

出现错误“AlertIconAndTypesService 没有提供者！”

Getting error " No provider for AlertIconAndTypesService!"

angular

vmware-clarity