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中引入。