獲取錯誤「沒有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提供程序！」

回答

相關問題