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

使用两个共享模块的Angular 6: Component不是已知元素:

Angular是一种流行的前端开发框架,用于构建现代化的Web应用程序。在Angular 6中,使用两个共享模块时可能会遇到"Component不是已知元素"的错误。

这个错误通常是由于以下原因之一引起的:

  1. 模块未正确导入:确保在使用组件的模块中正确导入了共享模块。可以使用import语句将共享模块导入到需要使用它的模块中。
  2. 组件未在模块中声明:在使用组件的模块中,确保在@NgModule装饰器的declarations数组中声明了该组件。这样Angular才能识别并正确渲染该组件。
  3. 组件选择器名称错误:检查组件的选择器名称是否正确。在使用组件的模板中,确保使用了正确的选择器名称。
  4. 组件未导出:如果共享模块中的组件需要在其他模块中使用,确保在共享模块的exports数组中导出了该组件。

解决这个错误的方法是:

  1. 确保正确导入共享模块:在使用共享模块的模块中,使用import语句将共享模块导入。
  2. 在模块中声明组件:在使用组件的模块中,将该组件添加到@NgModule装饰器的declarations数组中。
  3. 检查组件选择器名称:确保在使用组件的模板中,使用了正确的选择器名称。
  4. 导出组件(如果需要):如果共享模块中的组件需要在其他模块中使用,将该组件添加到共享模块的exports数组中。

腾讯云提供了一系列与云计算相关的产品和服务,可以帮助开发者构建和部署应用程序。具体推荐的产品和产品介绍链接地址如下:

  1. 云服务器(CVM):提供可扩展的计算能力,支持多种操作系统。产品介绍链接
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的关系型数据库服务。产品介绍链接
  3. 云存储(COS):提供安全可靠的对象存储服务,适用于存储和处理各种类型的数据。产品介绍链接
  4. 人工智能平台(AI Lab):提供丰富的人工智能算法和模型,帮助开发者构建智能化应用。产品介绍链接
  5. 物联网套件(IoT Suite):提供物联网设备管理、数据采集和应用开发的一站式解决方案。产品介绍链接

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

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

相关·内容

【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

运行时编译 Worker服务模板 gRPC模板 Angular模板已更新为Angular 7 SPA认证 SignalR与Endpoint路由集成 SignalR Java客户端支持长轮询 其他详细信息和已知问题...本节将会介绍我们在该预览更新中对Razor组件所做各种改进。 单项目模板 Razor组件项目模板现在是单个项目,而不是同一解决方案中两个项目。...,并指定根组件App应该在匹配选择器AppDOM元素中呈现。...如果要在库中创建可与Blazor和Razor组件应用程序共享组件,仍然需要使用Blazor类库。这写问题会在未来更新中解决。...Angular模块所构建身份验证和授权支持,可以导入到您应用程序中,并提供一套组件和服务来增强主应用程序模块功能。

22.6K10

Angular Provider 作用域

当你注册根级别的服务时,Angular 会创建一个单独共享服务实例。如果在 @Injectable 元数据中注册服务,Angular 会在构建阶段自动剔除无用服务,进而优化我们应用程序。...这表示这两个模块之间是共享同一个 UserService 实例。 为什么会这样呢?...此外,当我们导入两个模块中,共用同一个 Token 来配置 provider, 后面导入模块将会生效。...如果在多个特性模块中,使用同一个 token 注册 provider,此外在根模块中同样也注册了相同 provider,只有根模块中注册 provider 会被添加到根注入器中,此后所有的特性模块将会共享同一个实例...当在懒加载模块使用模块服务时,它将使用根注入器创建服务实例。但如果已经在懒加载模块中注册了 provider,在模块内获取对应服务时,它将从模块子注入器中获取对应服务实例。

1.8K20

AngularDart4.0 指南-体系结构概述 顶

您可以通过使用Angular标记组合HTML 模板,编写组件类来管理这些模板,在服务中添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...= null" [hero]="selectedHero"> 虽然这个模板使用了典型HTML元素,如和,但它也有一些不同之处。...添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - 从DOM到DOM,或者在两个方向。...示例模板使用两个内置结构指令: lib / src / hero_list_component.html(structural) </...通过组件提供服务与应用程序组件树中所有组件后代共享。 引导时注册提供程序情况非常少见。 有关详细信息,请参阅依赖注入页面的配置注入部分。

7.9K30

Angular 从入坑到挖坑 - 组件食用指南

(非必须) 当通过命令行创建一个新组件之后,会自动将新创建组件注册到应用模块(app.module.ts)中 ?...因此,这里应该使用模板引用变量方式获取数据信息。 模板引用变量是对模板中 DOM 元素引用,提供了从模块中直接访问元素能力。...="expr">NgIf 结构型指令 当 expr 属性为 true 时,这个元素则会显示在页面上,当属性值为 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素...NgSwitch 本身是一个属性型指令,它不会直接操作 dom 元素,而是通过它所控制两个结构型指令(NgSwitchCase、ngSwitchDefault)来操作 dom 元素 4.3、管道 在使用模板表达式绑定数据时...4.4.4、非父子组件之间通信 不管组件之间是否具有关联关系,都可以通过共享一个服务方式来进行数据交互,也可以将需要进行共享数据存储到一些存储介质中,通过直接读取这个存储介质中数据进行通信 创建一个服务

15.8K30

AngularJS2.0 教程系列(一)

Rob Eisenberg / Angular 2.0 Team ES6工具链 要让Angular2应用跑起来不是件轻松事,因为它用了太多还不被当前主流浏览器支持 技术。...等各种格式JS模块加载 es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块 traceur - ES6转码器,将ES6代码转换为当前浏览器支持ES5...引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6关键字,用来从模块中引入类型定义...据称,注解功能就是Angular2团队向traceur团队提出,这不是traceur默认选项, 因此你看到,我们配置systemjs在使用traceur模块时打开注解: System.config...以组件为核心 在Angular1.x中,bootstrap是围绕DOM元素展开,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上

2.4K10

Angular8稳定版修改概述

Ivy渲染引擎实验 虽然早在angular 6时候就提出了Ivy,但是Ivy仍处于试验阶段,通过Angular 8版本,您可以通过创建一个enable-ivy标志设置为true 应用程序来测试它,如下所示...Bazel将提供以下优势: 更快构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经在使用它,现在CI在7.5分钟内完成,而不是在Bazel之前60分钟。...懒加载变动 新版本不推荐使用loadChildren:string 懒惰加载模块语法。 在8.0.0之前,懒加载使用方法如下: loadChildren: '....现在它将共享全局实例DomElementSchemaRegistry....包还是跟以前保持一样。 结论 以上就是angular 8版本一些改动。总体来说变化不是很大,延续了angular每年一个稳定版习惯。 原文链接

4.5K20

Angular快速学习笔记(2) -- 架构

但是,任何模块都能包含任意数量其它组件,这些组件可以通过路由器加载,也可以通过模板创建。那些属于这个 NgModule 组件会共享同一个编译上下文环境。 ?...例如,从 @angular/core 库中导入 Component 装饰器: import { Component } from '@angular/core'; 还可以使用 JavaScript 导入语句从...1.2.1 组件定义 使用@Component 装饰器来标识一个组件类,并为其指定元数据 @Component({ selector: 'app-hero-list', templateUrl...组件其实也是一个指令,但是组件非常独特、非常重要,因此 Angular 专门定义了 @Component 装饰器,它使用一些面向模板特性扩展了 @Directive 装饰器。 ?...service,最好再root模块中provide,这样方便一个实例实现共享和通信。

5.2K20

angular知识点梳理第二篇-基本语法

在需要使用数据绑定组件进行数据处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit...是基本一致不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断一些元素或者段落可以使用这个进行包裹,因为他是一个不被渲染tag,所以使用时候是没有什么问题,举个例子!...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,在html任何场景下都可以使用!...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是对字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

2.5K30

Angular学习(01)-架构概览

其实,如果前端网站并不是特别复杂,那么使用 Angular 无非也就是常跟几个重要知识点打交道,在官网核心知识第一节中就将这些知识点罗列出来了,也就是:架构概览。 ?...当然,模块之间可以有交互,模块可以依赖于另一模块模块可以共享资源等等,所以,NgModel 中有许多需要配置声明项,比如: declarations:声明属于本模块组件、指令、管道 providers...在 Angular 中,大多数模式就是,一个根模块管理着很多功能模块,然后,每个模块管理自己模块内部所使用组件、指令、管道、服务、或者需要依赖于其他模块,如果该模块内部这些角色,有些可以供其他模块使用...有两个时机,一是组件被直接调用;二是触发了路由去加载; 路由通常配置方式是用一个 @NgModel 声明模块,但只用其中两项配置:imports 和 exports,imports 用来导入当前模块所有组件与...在以往,如果需要动态更新 DOM 上信息时,需要先获取到相对应元素实例对象,然后调用相应 DOM API 来操纵 DOM; 而使用 Angular 的话,可以直接在模板相应元素中,将某个属性与

3.5K50

Angular 1 vs. Angular 2 深度比较

这些模块例子都不是异步加载,以 AMD 模块为例,根据他们依赖性列出第一次加载所需依赖。...而 Angular 2 则没有这样问题,假如我们选择npm, 我们完全可以利用新型ES6 模块加载器,ES6通过利用es6-module-loader pollyfill 使其变成一个标准同步模块加载器...当前还没有办法同一名字有两个不同实现两个服务,这就会阻止用一个安全方式从 Angular 1 实现延迟加载。...比如 image 元素用提供 url 立即加载图片。 这也是为什么需要像 ng-src 这样属性来克服这个问题。 Angular 2 如何做到更好地跟 Web Components 交互?...目标:为服务器端渲染提供支持 支持服务器端渲染对于搜索引擎优化和用户感知体验来说是非常重要;在一个比较大型Angular 1 应用中,即使使用了预先定义缓存模块,我们可以清楚地看到当应用开始启动时

2.8K100

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

---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:...@Component({ selector: 'app-root', // 自定义元素 templateUrl: '....'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...,ng2开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

6.2K20

angular面试题及答案_angular面试

组件和指令区别 component使用注解@Component修饰,directive使用注解@Directive修饰 component是组件化思想,基于组件创建应用,把应用划分成细小可重复利用组件...,而directive用来在已经存在DOM元素上实现一些行为 component是可重复使用组件,directive是可重复使用行为 component可创建一个view,即template或templateUrl...module声明了哪些模块可以被其他模块使用,依赖注入了哪些类,以及启动component模块来管理组件,使app实现模块化。 21. 怎样在组件中选择一个元素?...Angular懒加载 默认情况下,在初始化时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载 懒加载 : 通俗 讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务器通讯非常便利。

10.9K120

Angular 5.0.0发布!

构建优化器是CLI中一个工具,它基于我们对你Angular应用理解,可以把构建后包变得更小。 构建优化器有两个主要任务。...上述两项优化都可以减少生成JS包大小,同时加快应用启动速度。 Angular Universal状态转交API及对DOM支持 这样更便于在服务端和客户之间共享应用状态。...这个模块可以帮开发者在服务端渲染生成内容中加入相关信息,然后传送给客户端,从而避免重复生成。这对于通过HTTP获取数据场景是很有用。...要升级HttpClient,需要在每个模块 @angular/common/http中把 HttpModule替换为 HttpClientModule,注入HttpClient服务,删除所有 map(...我们删除很多以前废弃API(如 OpaqueToken),也公布了一些新废弃项。以上指南会详细介绍这些变更。 已知问题 当前已知与source map相关问题。

4.4K40

AngularDart4.0 高级-组件样式 顶

Angular应用程序使用标准CSS进行样式化。 这意味着您可以将所有关于CSS样式表,选择器,规则和媒体查询知识直接应用于Angular应用程序。...此外,Angular可以将组件样式与组件捆绑在一起,从而实现比常规样式表更多模块化设计。 本页介绍如何加载和应用这些组件样式。 运行此页面中显示代码实例(查看源代码)。...:host 使用:host伪类选择器来定位承载组件元素样式(而不是定位组件模板中元素)。...您不能使用其他选择器从组件内部到达宿主元素,因为它不是组件自己模板一部分。宿主元素位于父组件模板中。...使用emulated视图封装处于运行状态Angular应用中DOM, 每一个DOM元素都有额外类附加在上面: <h2

2.2K20

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

它可以向应用依赖注入器中添加服务提供商。 Angular 模块模块是组织应用程序和使用使用外部程序库最佳途径。 很多Angular库都是模块,e.g..../sino-file-list.component.css'], providers: [FileService], }) 在模块创建中提供服务 在模块创建中提供服务,可以在该模块任何组建个中依赖注入然后使用...特性模块 - 业务上最佳实践(n) 根模块和特性模块共享着相同执行环境。它们共享着同一个依赖注入器,这意味着某个模块中定义服务在所有模块中也都能用到。...特性模块通过自己提供服务和它决定对外共享那些组件、指令、管道来与根模块等其它模块协同工作。 共享模块 共享模块其实就是将一些公共东西整理出来,放到一个模块中去,避免了其他模块重复导入。...✔️如果两个指令同名,那么我们需要使用as关键字来为第二个指令创建别名。

2.2K30

angular基础面试题_java web面试题

angular用管道转换数据 Angular 为典型数据转换提供了内置管道,包括国际化转换(i18n),它使用本地化信息来格式化数据。...exports: [ AppComponent ], 导出表 那些能在其它模块组件模板中使用可声明对象子集。...}) 在 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观和行为指令...Angular 2是一个平台,不仅是一种语言 更好速度和性能 更简单依赖注入 模块化,跨平台 具备ES6和Typescript好处。...通过限制api,选择使用已知或安全环境/浏览器app来防止XSRF攻击、 Angular变化监测 : event:绑定event事件,数据变化视图更新 timeout,延迟触发 版权声明:本文内容由互联网用户自发贡献

13K50

AngularDart4.0 英雄之旅-教程-05多组件 顶

约定 组件类名称使用驼峰命名法并以“Component”结尾,例:HeroDetailComponent 组件文件名称使用Snake Case命名法-单词小写且使用下划线分割以_component...@Component注解提供组件Angular元数据。 CSS选择器名称hero-detail将与在父组件模板中标识该组件元素标签相匹配。...HeroDetailComponent有一个英雄,而不是一个选定英雄。 在模板中任何地方用单词“hero”替换“selectedHero”。...你应用应该看起来像这个实例(查看源代码)。 前方路 “The Tour of Heroes ”游戏应用程序可以更多地使用共享组件,但其(模拟)数据仍然是在AppComponent中硬编码。...这是不可持续。 数据访问应重构为单独服务,并在需要数据组件之间共享。 您将学习在下一个教程页面中创建服务。

1.8K10

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

它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c. 通过注入,服务可以在多个“互相不知道”类之间共享信息 d....就会为 HeroService 创建一个单一共享实例,并把它注入到任何想要它类上 c....Angular 最佳实践之一就是在一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

3.6K00
领券