Question

我正在使用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

Answer 1

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

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

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

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

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

1 个答案: