获取错误“没有AlertIconAndTypesService提供程序！”

我使用清晰度模块与我的角度4代码。在使用他们的alert box例子，我收到上述错误获取错误“没有AlertIconAndTypesService提供程序！”

示例代码

<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

来源

2017-09-02 netuser

由于错误提示，导入AlertIconAndTypesService服务的模块中

所以在你的app.module.ts档案

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

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

来源

2017-09-02 06:02:53 Santosh

但是在他们的文档中没有提到 – netuser

对文档不太了解，但是错误是非常明显的。您只需在providers数组中输入AlertIconAndTypesService，并且可视代码编辑器将从正确的路径导入它:-) – Santosh

导入后，错误得到解决。谢谢你的解释。 – netuser

确保您已经添加AlertIconAndTypesService下提供内部app.module.ts

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

然后，

@NgModule({ 
providers: [ 
     AlertIconAndTypesService 
    ] 
})

来源

2017-09-02 06:03:06 Sajeetharan

这个问题实际上是在大红色的框下描述“代码&示例”标题为the alerts documentation on the Clarity website。

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

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>

来源

2017-09-03 15:07:14 Scott

获取错误“没有AlertIconAndTypesService提供程序！”

回答

相关问题