时间戳

首页 > 解决方案 > ...在引用子模块时不是已知元素

angular - ...在引用子模块时不是已知元素

问题描述

我正在使用 Angular 7 和 cli。我有一个非常简单的案例，我试图在父模块中包含一个子模块。

app.module 像这样引用 graph.module

import { GraphModule } from './components/graph/graph.module';

@NgModule({  
  imports: [
    GraphModule,
     .... other modules

app.component.html 正在使用这样的图形组件

<Graph></Graph>

graph.module 看起来像这样

import { NgModule } from '@angular/core';
import { GraphComponent } from './graph.component';

@NgModule({
    imports: [
    ],
    exports: [GraphComponent],
    declarations: [GraphComponent],
    providers: [],
})

export class GraphModule {
}

知道我缺少什么吗？

我收到以下错误：

compiler.js:2430 Uncaught Error: Template parse errors:
'Graph' is not a known element:
1. If 'Graph' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("h [nodes]="nodes" [links]="links" [autoZoom]="autoZoom" [autoCenter]="autoCenter"></graph> -->
    [ERROR ->]<Graph></Graph>

  <!-- </div> -->
"): ng:///AppModule/AppComponent.html@7:4
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
syntaxError @ compiler.js:2430
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:20605
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:26171
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:26158
(anonymous) @ compiler.js:26101
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:26101
(anonymous) @ compiler.js:26011
then @ compiler.js:2421
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:26010
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:25970
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_R3__ @ core.js:17619
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17802
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

标签： angular

解决方案

我认为问题的原因是您的GraphComponent 选择器不是标签选择器，或者您的组件标签名称与“Graph”不同。即不是：

@Component({
  selector: 'Graph'
})
export class GraphComponent { }

这就是 Angular 找不到您的组件的原因。

检查您的组件真正必须使用哪个选择器才能在其他组件模板中正确使用该组件。

推荐阅读