首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

错误:模块'SharedModule‘导入了意外的指令'DashboardPage’。请添加@NgModule注释

这个错误是由于在模块'SharedModule'中导入了一个意外的指令'DashboardPage'导致的。要解决这个错误,需要在'SharedModule'中添加@NgModule注释。

@NgModule注释是Angular框架中用来标识一个模块的装饰器。它告诉Angular该模块是一个NgModule,并提供了一些元数据,用于配置该模块的行为。

在解决这个错误之前,我们需要了解一下NgModule的概念。NgModule是Angular中的一个核心概念,它用于组织和管理应用中的组件、指令、服务和其他一些相关代码。一个NgModule可以包含多个组件、指令、服务等,并且可以导入和导出其他的NgModule。

在这个具体的错误中,我们需要检查'SharedModule'中是否正确导入了'DashboardPage'指令。如果确实需要在'SharedModule'中使用'DashboardPage'指令,那么我们需要在'SharedModule'中添加@NgModule注释。

下面是一个示例的@NgModule注释的代码:

代码语言:typescript
复制
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardPage } from './dashboard-page.component';

@NgModule({
  declarations: [DashboardPage],
  imports: [CommonModule],
  exports: [DashboardPage]
})
export class SharedModule { }

在上面的代码中,我们通过@NgModule注释将'SharedModule'标识为一个NgModule,并在declarations数组中声明了'DashboardPage'指令。然后,我们使用imports数组导入了CommonModule,这是Angular提供的一个常用模块。最后,我们使用exports数组将'DashboardPage'指令导出,以便其他模块可以使用。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 :从 beta 到 release4.0 版本升级总结

'angular2/commom' => '@angular/forms' 三、新增NgModule 官方说明 Angular 模块能帮你把应用组织成多个内聚功能块。...Angular 模块是带有 @NgModule 装饰器函数类。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。...它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器中添加服务提供商。 具体参考官方文档。...{} 其他模块只需要引入SharedModule import {NgModule} from '@angular/core'; // 引入SharedModule import {SharedModule...路由事件实例,如NavigationEnd表示导航事件变更完毕,等 反正改了挺多自行查询官方API文档…[捂脸] 新增路由模块 路由使用NgModule创建,示例如下: import {NgModule

8.1K00

Angualr2 之 angular模块Angular 模块化提供服务特性模块 - 业务上最佳实践(n)共享模块XxxModule.forRoot配置核心服务知识点

模块没有父子关系,只有引入 ---- 用@NgModule来定义应用中模块。 Angular 模块是带有 @NgModule 装饰器函数。...@NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。...它可以向应用依赖注入器中添加服务提供商。 Angular 模块模块是组织应用程序和使用使用外部程序库最佳途径。 很多Angular库都是模块,e.g.... Angular模块是由一个@NgModule装饰器提供元数据类,元数据包括: 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类,以便其他组件模块可以使用它们...这样可以确保我们显式添加到AppModule 中那些提供商总是优先于从其它模块中导入提供商。

2.2K30

使用Angular8和百度地图api开发《旅游清单》

效果预览 添加旅游规划之后: 1.开始 首先假定你已经安装了node,没有安装移步node官网进行安装。...: 我们知道,一个完整angular应该包括: 模块 Angular 定义了 NgModuleNgModule 为一个组件集声明了编译上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关能力...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中 DOM 连接起来。...添加旅游清单 表单空间我们都用h5原生控件,我们使用angular提供form模块,具体代码如下: import { Component, OnInit } from '@angular/core';...未完善部分:添加清单时,如果添了不符合规范地址或者百度地图查不到地址,因该出现错误提示,这块会在后期优化。

6K30

模块化开发 Angular 应用

就像组件一样,生成结构是一个模块树。 @NgModule 在 @NgModule 操作符里面,我们定义模块所有属性。我们提供了一个简单 JavaScript 对象作为参数。...如果一个组件(或者指令或者管道)你并没有添加到 declarations 中,但是你又在模块或者应用中使用了,angular 应用在运行时报错。此外,一个组件只能在一个模块中声明。...构建自定义模块 我们假装已经构建了一个很棒应用程序。这个程序只有一个模块,就是 AppModule。 现在,为我们应用程序添加登录内容。登录内容将包含一个登录页面和一个注册页面。...我们用惰性加载方式更改下先前例子。为了实现这点,我们要在应用中添加路由。 首先,我们用路由配置来配置路由模块。...,采用是意译方式,其中加上个人理解和注释,原文地址是:malcoded.com/posts/angul…

3K10

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

(polyfill)..有详细注释 typings.d.ts : 全局变量声明文件 testconfig.*.json: 不同模式下调用tsconfig配置文件 app目录下(分很彻底,...'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...,ng2开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定.../app.component'; @NgModule({ declarations: [ // 指令和组件放在这里 AppComponent ],...哦,还少说了服务这块,看着安排,这些说完之后就直接开搞一些小玩意,比如自定义管道,上传组件,自定义指令这些。。。发现文章有错误,或者有更好讲解,请留言指出,我会及时修正,谢谢!

6.2K20

Angular 2 + 折腾记 :(3)初步了解服务及使用

前言 不探究高深理论,只探究实际使用,有更好写法或者经验指出; 有些暂时没涉及到知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理地方; Angular2...服务引入了依赖注入这个概念。.../environments/environment'; // 不可忘记括号,任何装饰器都一样,防止莫名错误 @Injectable() export class VehicleFaultService...大致有那么两种; 模块内注入,整个模块components皆可以使用 import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用...BrowserModule,其他一些模块需要用到一些内置指令(*ngIf,*ngFor这些)必须引入这个 -- 内置 import { CommonModule } from '@angular

1.6K20

Angular性能优化实践——巧用第三方组件和懒加载技术

经过调研,发现在Angular默认中,NgModule都是急性加载,也就是会在应用加载时尽快加载。无论是否要立即使用,所有模块都会一并加载。...在懒加载模块路由模块中,添加一个指向该组件路由。本次demo存在两个懒加载模块。 ? ? 2. 建立导航UI 虽然可以直接在地址栏直接输入URL,但是有导航UI会更好用。...三个a标签分别代表主页以及两个需要懒加载模块。 ? 3. 导入与路由配置 CLI会将每个特性模块自动添加到应用级路由映射表中,最后通过添加默认路由来最终完成。 ? 4. 特性模块内部 ?...@NgModuleimports数组列出了LazyWebExcelRoutingModule,让LazyWebExcelModule可以访问他自己路由模块。...这会让Angular知道AppRoutingModule是一个路由模块,而 forRoot() 表示这是根路由模块。它会配置传入所有路由、让你能访问路由器指令并注册 Router。

4K20

Angular 2 + 折腾记 :(6) 动手实现只有年月小组件

前言 这个组件实现并不是很复杂,我会尽量注释; 这货诞生理由就是项目刚好有一个地方必须只能选择年月,而github上ng2+日期组件都涉及到年月日或时分秒; 效果用gifcam录制,色彩有些失真,将就吧...0 -> 1 就相当于 0% -> 100%复制代码 封装成一个模块给其他使用 import { NgModule } from '@angular/core'; import { CommonModule.../only-year-month-select.component'; @NgModule({ imports: [ CommonModule, // 用用到一些内置指令必须依赖这个,比如...,只要在使用模块引入组件声明下就能使用 反之则需要引入这个模块,方可使用 局部代码 module // 在要使用模块中引入 // 公用组件 import { MitEhartsModule } from...,会及时改进和跟进...; 下一篇文章说下指令或者动画相关。。。。

72910

Angular 6新特性介绍

遵循数据表组件模式,CDK包含核心树指令,而Angular Material则提供与顶层Material Design样式相同体验 Material 运行命令,添加Material ng add...如果要了解更多有关Material信息,点击这里 CLI工作空间 CLI6.0版本现在支持包含多个项目的工作空间,如多个应用程序或库。...点击查看更多关于CLI工作空间信息 Providers改变 为了使我们程序变得轻量,Angular6将模块引入服务模式,改成服务引入模块模式。...6.0之前版本服务注入 // app.module.ts @NgModule({ ......每个主要版本将支持18个月,大约6个月积极开发,接下来是12个月关键错误修正和安全补丁。 如何升级到6.0.0 按照引导对应用进行升级 ?

2.3K21

Angular 快速学习笔记(1) -- 官方示例要点

@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click)="onSelect(hero...Angular <em>的</em>最佳实践之一就是在一个独立<em>的</em>顶级<em>模块</em>中加载和配置路由器,它专注于路由功能,然后由根<em>模块</em> AppModule 导入它 b. ng generate module app-routing...把 RouterModule <em>添加</em>到 @<em>NgModule</em>.imports 数组中,并用 routes 来配置它 c. imports: [ RouterModule.forRoot(routes) ]...它把<em>错误</em>对象传给<em>错误</em>处理器,<em>错误</em>处理器会处理这个<em>错误</em> private handleError (operation = 'operation', result?

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

@NgModule 装饰器 imports导入外部模块 b. declarations 放置组件 @NgModule({ declarations: [ AppComponent,...(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click)="onSelect(hero...Angular <em>的</em>最佳实践之一就是在一个独立<em>的</em>顶级<em>模块</em>中加载和配置路由器,它专注于路由功能,然后由根<em>模块</em> AppModule 导入它 b. ng generate module app-routing...把 RouterModule <em>添加</em>到 @<em>NgModule</em>.imports 数组中,并用 routes 来配置它 c. imports: [ RouterModule.forRoot(routes) ]...它把<em>错误</em>对象传给<em>错误</em>处理器,<em>错误</em>处理器会处理这个<em>错误</em> private handleError (operation = 'operation', result?

3.7K50

Angular学习(01)-架构概览

其他角色包括:组件、指令、管道、服务等等,这些角色必须在模块文件中声明了,才能够被该模块其他角色所使用,而且同一个组件、指令、管道不允许同时在多个模块中进行声明,只能通过模块 exports 给其他模块使用...指令原理也很简单,在模板中某个元素标签上,添加上某个指令后,解析到这个指令时,会进入这个指令相关工作,而指令内部,会获取到一个当前指令挂载元素标签对象,既然都拿到这个对象了,那么,在指令内部想对这个元素做什么...而 Angular 引入了 TypeScript,Scss 等浏览器并不无法识别的语言,自然,要让浏览器运行 Angular 项目之前,需要进行一次编译,一次转换。...在 src 中 index.html 文件就是单页应用页面文件,里面的 body 标签内,自动加入了一行根视图组件: ?...时,会去加载 home 模块,然后看看 home 模块路由配置: //home-routing.module.ts import { NgModule } from '@angular/core';

3.5K50

Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

设计时候,先去 基础知识 大多数带路由应用都要在index.html标签下先添加一个元素,来告诉路由器该如何合成导航用URL。...,重构成我们自己路由模块。...这个使用起来比较简单,只需要在需要守卫子路由配置上添加即可。...如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误上下文环境。 在等待服务器答复时,我们没法阻塞它 —— 这在浏览器中是不可能。...链接参数数组 链接参数数组保存路由导航时所需成分: 指向目标组件那个路由路径(path) 必备路由参数和可选路由参数,它们将进入该路由URL e.g.我们可以把RouterLink指令绑定到一个数组

3.3K10

Angular2 VS Angular4 深度对比:特性、性能

依赖注入在模块化开发和元素隔离方面非常有帮助,但它实现一直受到Angular 1.x困扰。Angular2解决了这个问题,另外还添加了一些缺少功能,如子注入以及生命周期/范围控制。...动态载入: 这是之前Angular版本均不具备功能,Angular2包含了这个功能,即使在开发人员忙碌时,也能够添加指令或控件。 模板: 在Angular2中,模板编译过程是异步。...装饰器指令:可用于装饰元素(例如,通过隐藏/显示元素ng-hide/ng-show或添加工具提示)。 模板指令:可以将HTML转换为可复用模板。...开发人员可以通过为@angular/platform-b​​rowser/animations引入浏览器动画模块,从而实现为主要NgModule添加动画功能。...模板源映射: 每当模板中某些内容出现错误时,都将创建源映射,为原始模板提供有意义说明内容。 结论: 对于仍处于学习阶段的人来说,Angular会有点混乱。

8.7K20
领券