javascript 未捕获的错误：模板解析错误：“组件”不是已知元素：
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47746626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: Template parse errors: 'component' is not a known element:
提问by TheDoozyLulu
I am facing the problem in angular 4.4 , In my app, I have hierarchical view. In which I have created a
我在 angular 4.4 中遇到了问题，在我的应用程序中，我有分层视图。我在其中创建了一个
:= module 1 -> module 2 -> my component.
:= 模块 1 -> 模块 2 -> 我的组件。
I have declared everything correctly. , But still I'm getting error.
我已经正确地声明了一切。, 但我仍然收到错误。
- Declaredcomponent.
- Importedit into other module.
- selectorname is same.
- Exportedcomponent in module 2.
- Importedmodule 2 in module 1.
- 声明的组件。
- 将其导入其他模块。
- 选择器名称相同。
- 模块 2 中的导出组件。
- 在模块 1 中导入模块 2 。
What could be the catch?Component Code: Admin -> Configuration -> mycomponent //My component
有什么问题？组件代码：Admin -> Configuration -> mycomponent //我的组件
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'test-mycomponent',
templateUrl: './mycomponent.component.html',
styleUrls: ['./mycomponent.component.scss']
})
export class MyComponentComponent implements OnInit {
@ViewChild('myComponentTable')
constructor() {
}
ngOnInit() {
//init functionality
}
}
// configure module code
import { NgModule,Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './mycomponent/mycomponent.component';
@NgModule({
imports: [
CommonModule,
WidgetsModule,
FormsModule,
NgbModule
],
declarations: [
MyComponent
],
providers: [
],
exports: [
MyComponent
]
})
export class ConfigurationModule { }
//Main module admin
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConfigurationModule } from './configuration/configuration.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './configuration/mycomponent/mycomponent.component';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
NgbModule,
FormsModule,
ConfigurationModule
],
declarations: [
],
exports: [
]
})
export class AdminModule { }
and I am calling that template in another file
//Test file html
<ng-template>
<test-mycomponent></test-mycomponent>
</ng-template>
回答by Ofek Amram
You are not declaring the right component the name should be MyComponentComponent in the declerations and exports:
您没有在声明和导出中声明正确的组件，名称应该是 MyComponentComponent：
import { MyComponentComponent } from './mycomponent/mycomponent.component';
declarations: [
MyComponent //should be MyComponentComponent
],
providers: [
],
exports: [
MyComponent //should be MyComponentComponent
]
