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

Unexpected directive 'XXX' imported by the module 'AppMoode'的更多相关文章

  1. Angular4.0 项目报错:Unexpected value xxxComponent' declared by the module 'xxxxModule'. Please add a @Pipe...

    最近刚刚开始学习angular 4.0,在网上找了一个小项目教程学习,然而学习的过程有点艰辛,,各种报错,我明明就是按照博主的步骤老老实实走的呀!!话不多说,上bug-  .- Uncaught Er ...

  2. Refused to execute inline event handler because it violates the following Content Security Policy directive: "xxx". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...')

    /********************************************************************************* * Refused to exec ...

  3. Angular5 import interface 报错:XXX is not a module

    在项目里定义了一个interface,device.ts.然后在component.ts中要使用这个interface,import之后,VSCode报错:‘xxx/xxx/xxx/device.ts ...

  4. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  5. Angular2-------Error: Unexpected value ‘undefined’ declared by the module ‘模块名

    请检查[app.module.ts]文件中的[declarations]模块最后是否多了一个逗号 (完)

  6. python学习笔记之module && package

    个人总结: import module,module就是文件名,导入那个python文件 import package,package就是一个文件夹,导入的文件夹下有一个__init__.py的文件, ...

  7. node.js中module.export与export的区别。

    对module.exports和exports的一些理解 可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了. exports = module.exports ...

  8. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  9. [AngularJS] Directive using another directive by 'require'

    Directive can use another directive though 'require' keyword. angular.module('docsTabsExample', []) ...

随机推荐

  1. linux下hex转ascii

    场景: 在wireshark里面提取response包的值. echo -n "1f8b08000000000000030cd335b2e580014" | xxd -r -p & ...

  2. JS常用工具函数(持续记录)

    1.设置获取cookie //方式1 //设置cookie function SetCookie(name, value)//两个参数,一个是cookie的名字,一个是值 { var Days = 3 ...

  3. spring boot 中使用swagger 来自动生成接口文档

    1.依赖包 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swa ...

  4. Java 多线程学习笔记:生产者消费者问题

    前言:最近在学习Java多线程,看到ImportNew网上有网友翻译的一篇文章<阻塞队列实现生产者消费者模式>.在文中,使用的是Java的concurrent包中的阻塞队列来实现.在看完后 ...

  5. C#基础篇三流程控制1

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P01R ...

  6. 根据js来判断手机是操作系安卓还是ios

    平常开发很常见的功能,在移动端需要根据javaScript来判断手机是安卓还是ios进行应用市场跳转. 通过js提供的Navigator可以来判断手机是安卓还是ios系统,代码如下 1.js判断是否为 ...

  7. 轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  8. Prim Algoritm(最小生成树)

    Prim Algorithm.这个算法可以分为下面几个步骤: 将顶点集V分成两个集合A和B,其中集合A表示目前已经在MST中的顶点,而集合B则表示目前不在MST中的顶点. 在B寻找与集合A连通的最短的 ...

  9. linux编译找不到aprt apr-util

    Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure: WARNING: APR not found The Apache Portable Runtime (AP ...

  10. java RMI原理详解

    java本身提供了一种RPC框架——RMI(即Remote Method Invoke 远程方法调用),在编写一个接口需要作为远程调用时,都需要继承了Remote,Remote 接口用于标识其方法可以 ...