Unexpected directive 'XXX' imported by the module 'AppMoode'

做angular demo報錯: Uncaught Error: Unexpected directive 'ScrollSpyDirective' imported by the module 'AppModule'. Please add a @NgModule annotation。解決問題時發現對@NgModule中import、declarations、providers這三個配置信息理解不是很到位。特此整理下。

 每個模塊的@NgModule中都會包含import、declarations、providers三個配置節，他們的具體含義為：

import：當前模塊導入的其他模塊，import應該導入的是module，而不是compnents或者services

declarations:當前模塊內包含的公共組件、指令信息。declarations生命的是components，而不是module或者services

providers:當前模塊可以使用的公共服務(可以為本模塊內提供的服務，也可以是其他npm包中導入的服務)。provider提供的應該是services，而不是compnents或者modules。

 

了解了以上信息此問題的原因就很清晰了，ScrollSpyDirective屬於本模塊內的組件。引入ScrollSpyDirective應該在declarations中生命而不應該在import中引入。