什么是角度上的编译上下文?

角度文档说明

组成部分 属于ngmodule的 分享 编译上下文。

你有没有听过这样的错误

警告:模板分析错误:“a”不是已知元素:

1. 如果“b-comp”是一个角度分量,则验证它是该模块的一部分。

2. 如果“b-comp”是web组件,则将“custom_elements_schema”添加到此组件的“@ngmodule.schemas”中以抑制此消息。

或

无法绑定到“ngmodel”,因为它不是“input”的已知属性

编译上下文

你发现,链接中的解释正确地描述了 编译上下文 .

它是一组要编译的东西(文件、组件)。它意味着上下文包含编译器需要编译的所有内容,并且没有任何错误。

假设您编译typescript并使用 tsconfig.json 文件定义 files , include 或 exclude 选项这样,TysScript编译器将只使用您提供的文件来查找TS代码之间的关系。

角度编译器

现在让我们回到角度编译器。

角度编译器基本上编译组件的模板。要编译模板角,应该知道模板中涉及的所有组件/指令。

假设我们有以下简单的组件:

@Component({
  selector: 'a-comp`,
  template: `
    <h2>Hello, I'm a-comp</h2>
    <div [scroll]="options">
      <b-comp></b-comp>
    </div>
  `
})
export class ComponentA {}

这个分量定义在一些角度模块中,比如:

@NgModule({
  declarations: [
    ComponentA
  ]
})
export class AModule {}

为了编译 ComponentA 角度通过以下阶段:

1)找到它所属的NGmodule。

在AMODLE中声明了组件,因此该模块成为编译上下文。

2)找到在该模块范围内的所有其他指令。

Angular正在搜索此NGmodule的所有传递模块。( Angular 2 Use component from another module )

3)通过将所有相关的指令传递给编译器来运行编译

compileComponent(outputCtx, compMeta, ngModule, ngModule.transitiveModule.directives 
                                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

我们的 AModule 不导入任何其他模块,也不定义任何其他指令。这意味着角度不能编译组件模板(如果你没有使用CuffielEngsSyScript模式):

<div [scroll]="options">
  <b-comp></b-comp>
</div>

因为角度编译器将查找 scroll @输入和 b-comp 但是我们的范围AMODULE不包含这样的指令。

换句话说,NgModule没有为构建组件提供正确的编译上下文。ngmodule是一种类似于 TSOCONT.JSON 用于类型脚本编译器。

同样,在NgModule中声明的组件和从导出它们的其他模块导入的组件,共享相同的编译上下文(在此之上)。 角度2使用来自另一个模块的组件 )