我试图在其他模块中使用我在AppModule中创建的组件。我得到以下错误:
Uncaught (in promise):错误:模板解析错误
'contacts-box'不是已知元素:
如果'contacts-box'是一个Angular组件，那么验证它是否是这个模块的一部分。
如果'contacts-box'是一个Web组件，那么在'@NgModule '中添加'CUSTOM_ELEMENTS_SCHEMA'。模式来抑制此消息。
我的项目结构很简单:
我将页面保存在pages目录中，其中每个页面保存在不同的模块中(例如customers-module)，每个模块都有多个组件(例如customers-list-component, customers-add-component等)。我想在这些组件中使用我的ContactBoxComponent(例如在customers-add-component内部)。
As you can see I created the contacts-box component inside the widgets directory so it's basically inside the AppModule. I added the ContactBoxComponent import to app.module.ts and put it in declarations list of AppModule. It didin't work so I googled my problem and added ContactBoxComponent to export list as well. Didn't help. I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.
我错过了什么?
路由模块(不认为这是一个答案)
首先检查:是否在模块中声明并导出了组件，导入了想要使用它的模块，并在HTML中正确命名了组件。
否则，你可能会错过路由模块中的一个模块:
当您有一个路由模块，该路由从另一个模块路由到一个组件时，在该路由模块中导入该模块是很重要的。否则，Angular CLI会显示错误:component不是已知元素。
例如
1)具有以下项目结构:
├───core
│ └───sidebar
│ sidebar.component.ts
│ sidebar.module.ts
│
└───todos
│ todos-routing.module.ts
│ todos.module.ts
│
└───pages
edit-todo.component.ts
edit-todo.module.ts
2)在todos-routing.module内部。Ts你有一个到edit.todo.component.ts的路径(不导入它的模块):
{
path: 'edit-todo/:todoId',
component: EditTodoComponent,
},
这条路线会很好!但是，当在edit-todo.module中导入sidebar.module.ts时。你会得到一个错误:app-sidebar不是一个已知的元素。
修正:由于您已经在步骤2中添加了到edit-todo.component.ts的路由，您将必须添加edit-todo.module。Ts作为导入，之后导入的侧边栏组件将工作!
这个问题可能看起来古老而奇怪，但是当我试图加载一个模块(惰性加载)并得到相同的错误时，我意识到我错过了作为一个大模块的一部分发布的组件的exports子句。
这个角。Link解释了原因:模块内的组件/服务，默认情况下保持私有(或受保护)。要使它们公开，您必须导出它们。
扩展@Robin Djikof的回答，用@live-love代码示例，这是我的案例中技术上缺失的部分(Angular 8):
@NgModule({
declarations: [
SomeOtherComponent,
ProductListComponent
],
imports: [
DependantModule
],
exports: [ProductListComponent]
//<- This line makes ProductListComponent available outside the module,
//while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }
这个复杂的框架快把我逼疯了。假设你在同一个模块的另一个组件部分的模板中定义了自定义组件，那么你不需要在模块中使用导出(例如app.module.ts)。你只需要在前面提到的模块的@NgModule指令中指定声明:
// app.module.ts
import { JsonInputComponent } from './json-input/json-input.component';
@NgModule({
declarations: [
AppComponent,
JsonInputComponent
],
...
你不需要将JsonInputComponent(在本例中)导入到AppComponent(在本例中)来使用AppComponent模板中的JsonInputComponent自定义组件。你只需要在自定义组件前加上两个组件都定义过的模块名(例如app):
<form [formGroup]="reactiveForm">
<app-json-input formControlName="result"></app-json-input>
</form>
注意app-json-input不是json-input!
演示在这里:https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation
