refactor(core): rename ngComponentDef to ɵcmp (#33088)

Component defs are not considered public API, so the property
that contains them should be prefixed with Angular's marker
for "private" ('ɵ') to discourage apps from relying on def
APIs directly.

This commit adds the prefix and shortens the name from
`ngComponentDef` to `cmp`. This is because property names
cannot be minified by Uglify without turning on property
mangling (which most apps have turned off) and are thus
size-sensitive.

Note that the other "defs" (ngDirectiveDef, etc) will be
prefixed and shortened in follow-up PRs, in an attempt to
limit how large and conflict-y this change is.

PR Close #33088
This commit is contained in:
Kara Erickson 2019-10-10 14:57:15 -07:00 committed by Miško Hevery
parent d4d07233dc
commit 64fd0d6db9
61 changed files with 306 additions and 312 deletions

View File

@ -21,7 +21,7 @@ export class TreeFunction {
static ngFactoryDef = () => new TreeFunction; static ngFactoryDef = () => new TreeFunction;
/** @nocollapse */ /** @nocollapse */
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TreeFunction, type: TreeFunction,
selectors: [['tree']], selectors: [['tree']],
decls: 5, decls: 5,

View File

@ -189,7 +189,7 @@ runInEachFileSystem(() => {
const addDefinitionsSpy = testFormatter.addDefinitions as jasmine.Spy; const addDefinitionsSpy = testFormatter.addDefinitions as jasmine.Spy;
expect(addDefinitionsSpy.calls.first().args[2]) expect(addDefinitionsSpy.calls.first().args[2])
.toEqual(`A.ngFactoryDef = function A_Factory(t) { return new (t || A)(); }; .toEqual(`A.ngFactoryDef = function A_Factory(t) { return new (t || A)(); };
A.ngComponentDef = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], decls: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) { A.ɵcmp = ɵngcc0.ɵɵdefineComponent({ type: A, selectors: [["a"]], decls: 1, vars: 1, template: function A_Template(rf, ctx) { if (rf & 1) {
ɵngcc0.ɵɵtext(0); ɵngcc0.ɵɵtext(0);
} if (rf & 2) { } if (rf & 2) {
ɵngcc0.ɵɵtextInterpolate(ctx.person.name); ɵngcc0.ɵɵtextInterpolate(ctx.person.name);

View File

@ -400,7 +400,7 @@ export class ComponentDecoratorHandler implements
// First it needs to be determined if actually importing the directives/pipes used in the // First it needs to be determined if actually importing the directives/pipes used in the
// template would create a cycle. Currently ngtsc refuses to generate cycles, so an option // template would create a cycle. Currently ngtsc refuses to generate cycles, so an option
// known as "remote scoping" is used if a cycle would be created. In remote scoping, the // known as "remote scoping" is used if a cycle would be created. In remote scoping, the
// module file sets the directives/pipes on the ngComponentDef of the component, without // module file sets the directives/pipes on the ɵcmp of the component, without
// requiring new imports (but also in a way that breaks tree shaking). // requiring new imports (but also in a way that breaks tree shaking).
// //
// Determining this is challenging, because the TemplateDefinitionBuilder is responsible for // Determining this is challenging, because the TemplateDefinitionBuilder is responsible for
@ -456,7 +456,7 @@ export class ComponentDecoratorHandler implements
this._recordSyntheticImport(pipe, context); this._recordSyntheticImport(pipe, context);
} }
// Check whether the directive/pipe arrays in ngComponentDef need to be wrapped in closures. // Check whether the directive/pipe arrays in ɵcmp need to be wrapped in closures.
// This is required if any directive/pipe reference is to a declaration in the same file but // This is required if any directive/pipe reference is to a declaration in the same file but
// declared after this component. // declared after this component.
const wrapDirectivesAndPipesInClosure = const wrapDirectivesAndPipesInClosure =
@ -493,7 +493,7 @@ export class ComponentDecoratorHandler implements
} }
return [ return [
factoryRes, { factoryRes, {
name: 'ngComponentDef', name: 'ɵcmp',
initializer: res.expression, initializer: res.expression,
statements: [], statements: [],
type: res.type, type: res.type,

View File

@ -69,8 +69,7 @@ export class DtsMetadataReader implements MetadataReader {
getDirectiveMetadata(ref: Reference<ClassDeclaration>): DirectiveMeta|null { getDirectiveMetadata(ref: Reference<ClassDeclaration>): DirectiveMeta|null {
const clazz = ref.node; const clazz = ref.node;
const def = this.reflector.getMembersOfClass(clazz).find( const def = this.reflector.getMembersOfClass(clazz).find(
field => field => field.isStatic && (field.name === 'ɵcmp' || field.name === 'ngDirectiveDef'));
field.isStatic && (field.name === 'ngComponentDef' || field.name === 'ngDirectiveDef'));
if (def === undefined) { if (def === undefined) {
// No definition could be found. // No definition could be found.
return null; return null;
@ -88,7 +87,7 @@ export class DtsMetadataReader implements MetadataReader {
return { return {
ref, ref,
name: clazz.name.text, name: clazz.name.text,
isComponent: def.name === 'ngComponentDef', selector, isComponent: def.name === 'ɵcmp', selector,
exportAs: readStringArrayType(def.type.typeArguments[2]), exportAs: readStringArrayType(def.type.typeArguments[2]),
inputs: readStringMapType(def.type.typeArguments[3]), inputs: readStringMapType(def.type.typeArguments[3]),
outputs: readStringMapType(def.type.typeArguments[4]), outputs: readStringMapType(def.type.typeArguments[4]),

View File

@ -91,7 +91,7 @@ export class LocalModuleScopeRegistry implements MetadataRegistry, ComponentScop
* Tracks whether a given component requires "remote scoping". * Tracks whether a given component requires "remote scoping".
* *
* Remote scoping is when the set of directives which apply to a given component is set in the * Remote scoping is when the set of directives which apply to a given component is set in the
* NgModule's file instead of directly on the ngComponentDef (which is sometimes needed to get * NgModule's file instead of directly on the component def (which is sometimes needed to get
* around cyclic import issues). This is not used in calculation of `LocalModuleScope`s, but is * around cyclic import issues). This is not used in calculation of `LocalModuleScope`s, but is
* tracked here for convenience. * tracked here for convenience.
*/ */

View File

@ -20,7 +20,7 @@
// Pattern matching all Render3 property names. // Pattern matching all Render3 property names.
const R3_DEF_NAME_PATTERN = [ const R3_DEF_NAME_PATTERN = [
'ngBaseDef', 'ngBaseDef',
'ngComponentDef', 'ɵcmp',
'ngDirectiveDef', 'ngDirectiveDef',
'ngInjectableDef', 'ngInjectableDef',
'ngInjectorDef', 'ngInjectorDef',

View File

@ -477,7 +477,7 @@ describe('compiler compliance', () => {
const factory = const factory =
'MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }'; 'MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }';
const template = ` const template = `
MyComponent.ngComponentDef = i0.ɵɵdefineComponent({type:MyComponent,selectors:[["my-component"]], MyComponent.ɵcmp = i0.ɵɵdefineComponent({type:MyComponent,selectors:[["my-component"]],
decls: 1, decls: 1,
vars: 2, vars: 2,
template: function MyComponent_Template(rf,ctx){ template: function MyComponent_Template(rf,ctx){
@ -565,7 +565,7 @@ describe('compiler compliance', () => {
// ChildComponent definition should be: // ChildComponent definition should be:
const ChildComponentDefinition = ` const ChildComponentDefinition = `
ChildComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ChildComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ChildComponent, type: ChildComponent,
selectors: [["child"]], selectors: [["child"]],
decls: 1, decls: 1,
@ -595,7 +595,7 @@ describe('compiler compliance', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 2, decls: 2,
@ -618,11 +618,11 @@ describe('compiler compliance', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, ChildComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, ChildComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
expectEmit(source, ChildComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); expectEmit(source, ChildComponentFactory, 'Incorrect ChildComponent.ngFactoryDef');
expectEmit(source, SomeDirectiveDefinition, 'Incorrect SomeDirective.ngDirectiveDef'); expectEmit(source, SomeDirectiveDefinition, 'Incorrect SomeDirective.ngDirectiveDef');
expectEmit(source, SomeDirectiveFactory, 'Incorrect SomeDirective.ngFactoryDef'); expectEmit(source, SomeDirectiveFactory, 'Incorrect SomeDirective.ngFactoryDef');
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponentDefinition.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponentDefinition.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect MyComponentDefinition.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponentDefinition.ngFactoryDef');
}); });
@ -693,7 +693,7 @@ describe('compiler compliance', () => {
// EmptyOutletComponent definition should be: // EmptyOutletComponent definition should be:
const EmptyOutletComponentDefinition = ` const EmptyOutletComponentDefinition = `
EmptyOutletComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ EmptyOutletComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: EmptyOutletComponent, type: EmptyOutletComponent,
selectors: [["ng-component"]], selectors: [["ng-component"]],
decls: 1, decls: 1,
@ -713,8 +713,7 @@ describe('compiler compliance', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit( expectEmit(source, EmptyOutletComponentDefinition, 'Incorrect EmptyOutletComponent.ɵcmp');
source, EmptyOutletComponentDefinition, 'Incorrect EmptyOutletComponent.ngComponentDef');
expectEmit( expectEmit(
source, EmptyOutletComponentFactory, 'Incorrect EmptyOutletComponent.ngFactoryDef'); source, EmptyOutletComponentFactory, 'Incorrect EmptyOutletComponent.ngFactoryDef');
}); });
@ -742,7 +741,7 @@ describe('compiler compliance', () => {
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 0, decls: 0,
@ -760,7 +759,7 @@ describe('compiler compliance', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef');
}); });
@ -813,7 +812,7 @@ describe('compiler compliance', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 3, decls: 3,
@ -838,7 +837,7 @@ describe('compiler compliance', () => {
expectEmit(source, IfDirectiveDefinition, 'Incorrect IfDirective.ngDirectiveDef'); expectEmit(source, IfDirectiveDefinition, 'Incorrect IfDirective.ngDirectiveDef');
expectEmit(source, IfDirectiveFactory, 'Incorrect IfDirective.ngFactoryDef'); expectEmit(source, IfDirectiveFactory, 'Incorrect IfDirective.ngFactoryDef');
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef');
}); });
@ -880,7 +879,7 @@ describe('compiler compliance', () => {
const MyAppDeclaration = ` const MyAppDeclaration = `
const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; }; const $e0_ff$ = function ($v$) { return ["Nancy", $v$]; };
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 1, decls: 1,
@ -961,7 +960,7 @@ describe('compiler compliance', () => {
return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"]; return ["start-", $v0$, $v1$, $v2$, $v3$, $v4$, "-middle-", $v5$, $v6$, $v7$, $v8$, "-end"];
} }
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 1, decls: 1,
@ -1023,7 +1022,7 @@ describe('compiler compliance', () => {
const MyAppDefinition = ` const MyAppDefinition = `
const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; }; const $e0_ff$ = function ($v$) { return {"duration": 500, animation: $v$}; };
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 1, decls: 1,
@ -1090,7 +1089,7 @@ describe('compiler compliance', () => {
const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; }; const $e0_ff_1$ = function ($v$) { return [$c0$, $v$]; };
const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; }; const $e0_ff_2$ = function ($v1$, $v2$) { return {animation: $v1$, actions: $v2$}; };
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 1, decls: 1,
@ -1151,7 +1150,7 @@ describe('compiler compliance', () => {
}; };
const SimpleComponentDefinition = ` const SimpleComponentDefinition = `
SimpleComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ SimpleComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: SimpleComponent, type: SimpleComponent,
selectors: [["simple"]], selectors: [["simple"]],
ngContentSelectors: $c0$, ngContentSelectors: $c0$,
@ -1171,7 +1170,7 @@ describe('compiler compliance', () => {
const ComplexComponentDefinition = ` const ComplexComponentDefinition = `
const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]]; const $c1$ = [[["span", "title", "tofirst"]], [["span", "title", "tosecond"]]];
ComplexComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ComplexComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ComplexComponent, type: ComplexComponent,
selectors: [["complex"]], selectors: [["complex"]],
ngContentSelectors: $c2$, ngContentSelectors: $c2$,
@ -1227,7 +1226,7 @@ describe('compiler compliance', () => {
const $c0$ = ["*", [["", "spacer", ""]], "*"]; const $c0$ = ["*", [["", "spacer", ""]], "*"];
const $c1$ = ["*", "[spacer]", "*"]; const $c1$ = ["*", "[spacer]", "*"];
Cmp.ngComponentDef = $r3$.ɵɵdefineComponent({ Cmp.ɵcmp = $r3$.ɵɵdefineComponent({
type: Cmp, type: Cmp,
selectors: [["ng-component"]], selectors: [["ng-component"]],
ngContentSelectors: $c1$, ngContentSelectors: $c1$,
@ -1411,7 +1410,7 @@ describe('compiler compliance', () => {
const $_c0$ = [[["", "title", ""]]]; const $_c0$ = [[["", "title", ""]]];
const $_c1$ = ["[title]"]; const $_c1$ = ["[title]"];
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 2, decls: 2,
@ -1463,7 +1462,7 @@ describe('compiler compliance', () => {
const $_c0$ = [[["", "title", ""]]]; const $_c0$ = [[["", "title", ""]]];
const $_c1$ = ["[title]"]; const $_c1$ = ["[title]"];
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 2, decls: 2,
@ -1526,7 +1525,7 @@ describe('compiler compliance', () => {
const ViewQueryComponentDefinition = ` const ViewQueryComponentDefinition = `
ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ViewQueryComponent, type: ViewQueryComponent,
selectors: [["view-query-component"]], selectors: [["view-query-component"]],
viewQuery: function ViewQueryComponent_Query(rf, ctx) { viewQuery: function ViewQueryComponent_Query(rf, ctx) {
@ -1586,7 +1585,7 @@ describe('compiler compliance', () => {
const $e0_attrs$ = ["myRef"]; const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
viewQuery: function ViewQueryComponent_Query(rf, ctx) { viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) { if (rf & 1) {
@ -1636,7 +1635,7 @@ describe('compiler compliance', () => {
const ViewQueryComponentDefinition = ` const ViewQueryComponentDefinition = `
const $refs$ = ["foo"]; const $refs$ = ["foo"];
ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ViewQueryComponent, type: ViewQueryComponent,
selectors: [["view-query-component"]], selectors: [["view-query-component"]],
viewQuery: function ViewQueryComponent_Query(rf, ctx) { viewQuery: function ViewQueryComponent_Query(rf, ctx) {
@ -1701,7 +1700,7 @@ describe('compiler compliance', () => {
const $e0_attrs$ = ["myRef"]; const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
ViewQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ViewQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
viewQuery: function ViewQueryComponent_Query(rf, ctx) { viewQuery: function ViewQueryComponent_Query(rf, ctx) {
if (rf & 1) { if (rf & 1) {
@ -1763,7 +1762,7 @@ describe('compiler compliance', () => {
}; };
const ContentQueryComponentDefinition = ` const ContentQueryComponentDefinition = `
ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ContentQueryComponent, type: ContentQueryComponent,
selectors: [["content-query-component"]], selectors: [["content-query-component"]],
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
@ -1824,7 +1823,7 @@ describe('compiler compliance', () => {
const $e0_attrs$ = ["myRef"]; const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) { if (rf & 1) {
@ -1882,7 +1881,7 @@ describe('compiler compliance', () => {
}; };
const ContentQueryComponentDefinition = ` const ContentQueryComponentDefinition = `
ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: ContentQueryComponent, type: ContentQueryComponent,
selectors: [["content-query-component"]], selectors: [["content-query-component"]],
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
@ -1948,7 +1947,7 @@ describe('compiler compliance', () => {
const $e0_attrs$ = ["myRef"]; const $e0_attrs$ = ["myRef"];
const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"]; const $e1_attrs$ = ["myRef1", "myRef2", "myRef3"];
ContentQueryComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ ContentQueryComponent.ɵcmp = $r3$.ɵɵdefineComponent({
contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) { contentQueries: function ContentQueryComponent_ContentQueries(rf, ctx, dirIndex) {
if (rf & 1) { if (rf & 1) {
@ -2045,7 +2044,7 @@ describe('compiler compliance', () => {
return [$a0$, 1, 2, 3, 4, 5]; return [$a0$, 1, 2, 3, 4, 5];
}; };
// ... // ...
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 7, decls: 7,
@ -2112,7 +2111,7 @@ describe('compiler compliance', () => {
const MyAppDefinition = ` const MyAppDefinition = `
// ... // ...
MyApp.ngComponentDef = $r3$.ɵɵdefineComponent({ MyApp.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyApp, type: MyApp,
selectors: [["my-app"]], selectors: [["my-app"]],
decls: 6, decls: 6,
@ -2235,7 +2234,7 @@ describe('compiler compliance', () => {
const MyComponentDefinition = ` const MyComponentDefinition = `
const $c1$ = ["user", ""]; const $c1$ = ["user", ""];
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 3, decls: 3,
@ -2258,7 +2257,7 @@ describe('compiler compliance', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp');
}); });
it('local references in nested views', () => { it('local references in nested views', () => {
@ -2330,7 +2329,7 @@ describe('compiler compliance', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 6, decls: 6,
@ -2355,7 +2354,7 @@ describe('compiler compliance', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp');
}); });
it('should support local refs mixed with context assignments', () => { it('should support local refs mixed with context assignments', () => {
@ -2475,7 +2474,7 @@ describe('compiler compliance', () => {
it('should gen hooks with a few simple components', () => { it('should gen hooks with a few simple components', () => {
const LifecycleCompDefinition = ` const LifecycleCompDefinition = `
LifecycleComp.ngComponentDef = $r3$.ɵɵdefineComponent({ LifecycleComp.ɵcmp = $r3$.ɵɵdefineComponent({
type: LifecycleComp, type: LifecycleComp,
selectors: [["lifecycle-comp"]], selectors: [["lifecycle-comp"]],
inputs: {nameMin: ["name", "nameMin"]}, inputs: {nameMin: ["name", "nameMin"]},
@ -2487,7 +2486,7 @@ describe('compiler compliance', () => {
});`; });`;
const SimpleLayoutDefinition = ` const SimpleLayoutDefinition = `
SimpleLayout.ngComponentDef = $r3$.ɵɵdefineComponent({ SimpleLayout.ɵcmp = $r3$.ɵɵdefineComponent({
type: SimpleLayout, type: SimpleLayout,
selectors: [["simple-layout"]], selectors: [["simple-layout"]],
decls: 2, decls: 2,
@ -2619,7 +2618,7 @@ describe('compiler compliance', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 2, decls: 2,
@ -2705,7 +2704,7 @@ describe('compiler compliance', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 2, decls: 2,
@ -2809,7 +2808,7 @@ describe('compiler compliance', () => {
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 2, decls: 2,

View File

@ -714,7 +714,7 @@ describe('compiler compliance: bindings', () => {
const HostBindingCompDeclaration = ` const HostBindingCompDeclaration = `
const $ff$ = function ($v$) { return ["red", $v$]; }; const $ff$ = function ($v$) { return ["red", $v$]; };
HostBindingComp.ngComponentDef = $r3$.ɵɵdefineComponent({ HostBindingComp.ɵcmp = $r3$.ɵɵdefineComponent({
type: HostBindingComp, type: HostBindingComp,
selectors: [["host-binding-comp"]], selectors: [["host-binding-comp"]],
hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) { hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) {
@ -862,7 +862,7 @@ describe('compiler compliance: bindings', () => {
const $c0$ = ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"]; const $c0$ = ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"];
const $c1$ = ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"]; const $c1$ = ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"];
HostAttributeComp.ngComponentDef = $r3$.ɵɵdefineComponent({ HostAttributeComp.ɵcmp = $r3$.ɵɵdefineComponent({
type: HostAttributeComp, type: HostAttributeComp,
selectors: [["my-host-attribute-component"]], selectors: [["my-host-attribute-component"]],
hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) { hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) {

View File

@ -38,7 +38,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 1, decls: 1,
@ -59,7 +59,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef');
}); });
@ -88,7 +88,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 1, decls: 1,
@ -109,7 +109,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect ChildComponent.ngFactoryDef');
}); });
@ -138,7 +138,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [[${AttributeMarker.Bindings}, "someDirective"]], consts: [[${AttributeMarker.Bindings}, "someDirective"]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -158,7 +158,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
it('should match directives on ng-templates', () => { it('should match directives on ng-templates', () => {
@ -196,7 +196,7 @@ describe('compiler compliance: directives', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [["directiveA", ""]], consts: [["directiveA", ""]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -211,7 +211,7 @@ describe('compiler compliance: directives', () => {
`; `;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
it('should match directives on ng-container', () => { it('should match directives on ng-container', () => {
@ -251,7 +251,7 @@ describe('compiler compliance: directives', () => {
} }
} }
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [["directiveA", "", ${AttributeMarker.Template}, "ngIf"], ["directiveA", ""]], consts: [["directiveA", "", ${AttributeMarker.Template}, "ngIf"], ["directiveA", ""]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -269,7 +269,7 @@ describe('compiler compliance: directives', () => {
`; `;
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(result.source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
it('should match directives on ng-template bindings', () => { it('should match directives on ng-template bindings', () => {
@ -297,7 +297,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [[${AttributeMarker.Bindings}, "someDirective"]], consts: [[${AttributeMarker.Bindings}, "someDirective"]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -317,7 +317,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
it('should match structural directives', () => { it('should match structural directives', () => {
@ -344,7 +344,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [[${AttributeMarker.Template}, "someDirective"]], consts: [[${AttributeMarker.Template}, "someDirective"]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -361,7 +361,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
@ -392,7 +392,7 @@ describe('compiler compliance: directives', () => {
// MyComponent definition should be: // MyComponent definition should be:
const MyComponentDefinition = ` const MyComponentDefinition = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
consts: [[${AttributeMarker.Bindings}, "someDirective"]], consts: [[${AttributeMarker.Bindings}, "someDirective"]],
template: function MyComponent_Template(rf, ctx) { template: function MyComponent_Template(rf, ctx) {
@ -411,7 +411,7 @@ describe('compiler compliance: directives', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect ChildComponent.ɵcmp');
}); });
}); });

View File

@ -52,7 +52,7 @@ describe('compiler compliance: listen()', () => {
}; };
const componentDef = ` const componentDef = `
MyComponent.ngComponentDef = IDENT.ɵɵdefineComponent({ MyComponent.ɵcmp = IDENT.ɵɵdefineComponent({
inputs:{ inputs:{
componentInput: "componentInput", componentInput: "componentInput",

View File

@ -195,7 +195,7 @@ describe('compiler compliance: listen()', () => {
const MyComponentDefinition = ` const MyComponentDefinition = `
const $e2_refs$ = ["user", ""]; const $e2_refs$ = ["user", ""];
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 4, decls: 4,
@ -226,7 +226,7 @@ describe('compiler compliance: listen()', () => {
const result = compile(files, angularFiles); const result = compile(files, angularFiles);
const source = result.source; const source = result.source;
expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ngComponentDef'); expectEmit(source, MyComponentDefinition, 'Incorrect MyComponent.ɵcmp');
expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef'); expectEmit(source, MyComponentFactory, 'Incorrect MyComponent.ngFactoryDef');
}); });

View File

@ -145,7 +145,7 @@ describe('compiler compliance: providers', () => {
export class MyComponent { export class MyComponent {
} }
MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); }; MyComponent.ngFactoryDef = function MyComponent_Factory(t) { return new (t || MyComponent)(); };
MyComponent.ngComponentDef = i0.ɵɵdefineComponent({ MyComponent.ɵcmp = i0.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 1, decls: 1,

View File

@ -95,7 +95,7 @@ describe('compiler compliance: styling', () => {
}; };
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
styles: ["div.cool { color: blue; }", ":host.nice p { color: gold; }"], styles: ["div.cool { color: blue; }", ":host.nice p { color: gold; }"],
encapsulation: 1 encapsulation: 1
@ -128,7 +128,7 @@ describe('compiler compliance: styling', () => {
}; };
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors:[["my-component"]], selectors:[["my-component"]],
decls: 0, decls: 0,
@ -167,7 +167,7 @@ describe('compiler compliance: styling', () => {
}; };
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors:[["my-component"]], selectors:[["my-component"]],
decls: 0, decls: 0,
@ -209,7 +209,7 @@ describe('compiler compliance: styling', () => {
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
decls: 3, decls: 3,
vars: 3, vars: 3,
@ -270,7 +270,7 @@ describe('compiler compliance: styling', () => {
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
decls: 1, decls: 1,
vars: 1, vars: 1,
@ -502,7 +502,7 @@ describe('compiler compliance: styling', () => {
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors:[["my-component"]], selectors:[["my-component"]],
decls: 1, decls: 1,
@ -550,7 +550,7 @@ describe('compiler compliance: styling', () => {
}; };
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [["my-component"]], selectors: [["my-component"]],
decls: 1, decls: 1,
@ -696,7 +696,7 @@ describe('compiler compliance: styling', () => {
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors:[["my-component"]], selectors:[["my-component"]],
decls: 1, decls: 1,
@ -745,7 +745,7 @@ describe('compiler compliance: styling', () => {
const template = ` const template = `
MyComponent.ngComponentDef = $r3$.ɵɵdefineComponent({ MyComponent.ɵcmp = $r3$.ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors:[["my-component"]], selectors:[["my-component"]],
decls: 1, decls: 1,

View File

@ -205,14 +205,14 @@ runInEachFileSystem(os => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function');
expect(jsContents).not.toContain('__decorate'); expect(jsContents).not.toContain('__decorate');
const dtsContents = env.getContents('test.d.ts'); const dtsContents = env.getContents('test.d.ts');
expect(dtsContents) expect(dtsContents)
.toContain( .toContain(
'static ngComponentDef: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>'); 'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>');
}); });
@ -230,7 +230,7 @@ runInEachFileSystem(os => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function');
expect(jsContents).not.toContain('__decorate'); expect(jsContents).not.toContain('__decorate');
@ -238,7 +238,7 @@ runInEachFileSystem(os => {
expect(dtsContents) expect(dtsContents)
.toContain( .toContain(
'static ngComponentDef: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>'); 'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>');
}); });
@ -259,14 +259,14 @@ runInEachFileSystem(os => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents).toContain('TestCmp.ngComponentDef = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
expect(jsContents).toContain('TestCmp.ngFactoryDef = function'); expect(jsContents).toContain('TestCmp.ngFactoryDef = function');
expect(jsContents).not.toContain('__decorate'); expect(jsContents).not.toContain('__decorate');
const dtsContents = env.getContents('test.d.ts'); const dtsContents = env.getContents('test.d.ts');
expect(dtsContents) expect(dtsContents)
.toContain( .toContain(
'static ngComponentDef: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>'); 'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>'); expect(dtsContents).toContain('static ngFactoryDef: i0.ɵɵFactoryDef<TestCmp>');
}); });
@ -310,7 +310,7 @@ runInEachFileSystem(os => {
env.driveMain(); env.driveMain();
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents).toContain('/** @nocollapse */ TestCmp.ngComponentDef'); expect(jsContents).toContain('/** @nocollapse */ TestCmp.ɵcmp');
}); });
} }
@ -372,7 +372,7 @@ runInEachFileSystem(os => {
const jsContents = env.getContents('test.js'); const jsContents = env.getContents('test.js');
expect(jsContents).toContain('TestBase.ngBaseDef = i0.ɵɵdefineBase'); expect(jsContents).toContain('TestBase.ngBaseDef = i0.ɵɵdefineBase');
expect(jsContents).toContain('TestComponent.ngComponentDef = i0.ɵɵdefineComponent'); expect(jsContents).toContain('TestComponent.ɵcmp = i0.ɵɵdefineComponent');
expect(jsContents).toContain('TestDirective.ngDirectiveDef = i0.ɵɵdefineDirective'); expect(jsContents).toContain('TestDirective.ngDirectiveDef = i0.ɵɵdefineDirective');
expect(jsContents).toContain('TestPipe.ngPipeDef = i0.ɵɵdefinePipe'); expect(jsContents).toContain('TestPipe.ngPipeDef = i0.ɵɵdefinePipe');
expect(jsContents).toContain('TestInjectable.ngInjectableDef = i0.ɵɵdefineInjectable'); expect(jsContents).toContain('TestInjectable.ngInjectableDef = i0.ɵɵdefineInjectable');
@ -509,7 +509,7 @@ runInEachFileSystem(os => {
const dtsContents = env.getContents('test.d.ts'); const dtsContents = env.getContents('test.d.ts');
expect(dtsContents) expect(dtsContents)
.toContain( .toContain(
'static ngComponentDef: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>'); 'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
expect(dtsContents) expect(dtsContents)
.toContain( .toContain(
'static ngModuleDef: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], never, never>'); 'static ngModuleDef: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], never, never>');
@ -602,7 +602,7 @@ runInEachFileSystem(os => {
import {ɵɵComponentDefWithMeta, ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core'; import {ɵɵComponentDefWithMeta, ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core';
export declare class RouterComp { export declare class RouterComp {
static ngComponentDef: ɵɵComponentDefWithMeta<RouterComp, "lib-cmp", never, {}, {}, never> static ɵcmp: ɵɵComponentDefWithMeta<RouterComp, "lib-cmp", never, {}, {}, never>
} }
declare class RouterModule { declare class RouterModule {
@ -1179,7 +1179,7 @@ runInEachFileSystem(os => {
const dtsContents = env.getContents('test.d.ts'); const dtsContents = env.getContents('test.d.ts');
// Validate that each class has the primary definition. // Validate that each class has the primary definition.
expect(jsContents).toContain('TestCmp.ngComponentDef ='); expect(jsContents).toContain('TestCmp.ɵcmp =');
expect(jsContents).toContain('TestDir.ngDirectiveDef ='); expect(jsContents).toContain('TestDir.ngDirectiveDef =');
expect(jsContents).toContain('TestPipe.ngPipeDef ='); expect(jsContents).toContain('TestPipe.ngPipeDef =');
expect(jsContents).toContain('TestNgModule.ngModuleDef ='); expect(jsContents).toContain('TestNgModule.ngModuleDef =');

View File

@ -11,7 +11,7 @@ This document details the new architecture of the Angular compiler in a post-Ivy
Broadly speaking, The Ivy model is that Angular decorators (`@Injectable`, etc) are compiled to static properties on the classes (`ngInjectableDef`). This operation must take place without global program knowledge, and in most cases only with knowledge of that single decorator. Broadly speaking, The Ivy model is that Angular decorators (`@Injectable`, etc) are compiled to static properties on the classes (`ngInjectableDef`). This operation must take place without global program knowledge, and in most cases only with knowledge of that single decorator.
The one exception is `@Component`, which requires knowledge of the metadata from the `@NgModule` which declares the component in order to properly generate the `ngComponentDef`. In particular, the selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports. The one exception is `@Component`, which requires knowledge of the metadata from the `@NgModule` which declares the component in order to properly generate the component def (`ɵcmp`). In particular, the selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports.
Going forward, this will be the model by which Angular code will be compiled, shipped to NPM, and eventually bundled into applications. Going forward, this will be the model by which Angular code will be compiled, shipped to NPM, and eventually bundled into applications.
@ -81,7 +81,7 @@ In `ngtsc` this is instead emitted as,
```js ```js
const i0 = require("@angular/core"); const i0 = require("@angular/core");
class GreetComponent {} class GreetComponent {}
GreetComponent.ngComponentDef = i0.ɵɵdefineComponent({ GreetComponent.ɵcmp = i0.ɵɵdefineComponent({
type: GreetComponent, type: GreetComponent,
tag: 'greet', tag: 'greet',
factory: () => new GreetComponent(), factory: () => new GreetComponent(),
@ -104,7 +104,7 @@ and the `.d.ts` contains:
```ts ```ts
import * as i0 from '@angular/core'; import * as i0 from '@angular/core';
export class GreetComponent { export class GreetComponent {
static ngComponentDef: i0.NgComponentDef< static ɵcmp: i0.NgComponentDef<
GreetComponent, GreetComponent,
'greet', 'greet',
{input: 'input'} {input: 'input'}
@ -113,7 +113,7 @@ export class GreetComponent {
``` ```
The information needed by reference inversion and type-checking is included in The information needed by reference inversion and type-checking is included in
the type declaration of the `ngComponentDef` in the `.d.ts`. the type declaration of the `ɵcmp` in the `.d.ts`.
#### TypeScript architecture #### TypeScript architecture
@ -171,7 +171,7 @@ There are also a list of helper decorators that make the `@Component` and `@Dire
Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AoT compiler performs this transformation at compile time. Each of the class decorators can be thought of as class transformers that take the declared class and transform it, possibly using information from the helper decorators, to produce an Angular class. The JIT compiler performs this transformation at runtime. The AoT compiler performs this transformation at compile time.
Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates an `ngComponentDef` static member, `@Directive` create an `ngDirectiveDef`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program. Each of the class decorators' class transformer creates a corresponding static member on the class that describes to the runtime how to use the class. For example, the `@Component` decorator creates a `ɵcmp` static member, `@Directive` create an `ngDirectiveDef`, etc. Internally, these class transformers are called a "Compiler". Most of the compilers are straight forward translations of the metadata specified in the decorator to the information provided in the corresponding definition and, therefore, do not require anything outside the source file to perform the conversion. However, the component, during production builds and for type checking a template require the module scope of the component which requires information from other files in the program.
#### Compiler design #### Compiler design

View File

@ -39,7 +39,7 @@ The mental model of Ivy is that the decorator is the compiler. That is
the decorator can be thought of as parameters to a class transformer that the decorator can be thought of as parameters to a class transformer that
transforms the class by generating definitions based on the decorator transforms the class by generating definitions based on the decorator
parameters. An `@Component` decorator transforms the class by adding parameters. An `@Component` decorator transforms the class by adding
an `ngComponentDef` static property, `@Directive` adds `ngDirectiveDef`, a `ɵcmp` static property, `@Directive` adds `ngDirectiveDef`,
`@Pipe` adds `ngPipeDef`, etc. In most cases values supplied to the `@Pipe` adds `ngPipeDef`, etc. In most cases values supplied to the
decorator is sufficient to generate the definition. However, in the case of decorator is sufficient to generate the definition. However, in the case of
interpreting the template, the compiler needs to know the selector defined for interpreting the template, the compiler needs to know the selector defined for
@ -65,7 +65,7 @@ class:
| field | destination | | field | destination |
|---------------------|-----------------------| |---------------------|-----------------------|
| `type` | implicit | | `type` | implicit |
| `isComponent` | `ngComponentDef` | | `isComponent` | `ɵcmp` |
| `selector` | `ngModuleScope` | | `selector` | `ngModuleScope` |
| `exportAs` | `ngDirectiveDef` | | `exportAs` | `ngDirectiveDef` |
| `inputs` | `ngDirectiveDef` | | `inputs` | `ngDirectiveDef` |
@ -74,20 +74,20 @@ class:
| `hostProperties` | `ngDirectiveDef` | | `hostProperties` | `ngDirectiveDef` |
| `hostAttributes` | `ngDirectiveDef` | | `hostAttributes` | `ngDirectiveDef` |
| `providers` | `ngInjectorDef` | | `providers` | `ngInjectorDef` |
| `viewProviders` | `ngComponentDef` | | `viewProviders` | `ɵcmp` |
| `queries` | `ngDirectiveDef` | | `queries` | `ngDirectiveDef` |
| `guards` | not used | | `guards` | not used |
| `viewQueries` | `ngComponentDef` | | `viewQueries` | `ɵcmp` |
| `entryComponents` | not used | | `entryComponents` | not used |
| `changeDetection` | `ngComponentDef` | | `changeDetection` | `ɵcmp` |
| `template` | `ngComponentDef` | | `template` | `ɵcmp` |
| `componentViewType` | not used | | `componentViewType` | not used |
| `renderType` | not used | | `renderType` | not used |
| `componentFactory` | not used | | `componentFactory` | not used |
Only one definition is generated per class. All components are directives so a Only one definition is generated per class. All components are directives so a
`ngComponentDef` contains all the `ngDirectiveDef` information. All directives `ɵcmp` contains all the `ngDirectiveDef` information. All directives
are injectable so `ngComponentDef` and `ngDirectiveDef` contain `ngInjectableDef` are injectable so `ɵcmp` and `ngDirectiveDef` contain `ngInjectableDef`
information. information.
For `CompilePipeSummary` the table looks like: For `CompilePipeSummary` the table looks like:
@ -126,9 +126,9 @@ reexported from the index.
The metadata for a class in ivy is transformed to be what the metadata of the The metadata for a class in ivy is transformed to be what the metadata of the
transformed .js file produced by the ivy compiler would be. For example, a transformed .js file produced by the ivy compiler would be. For example, a
component's `@Component` is removed by the compiler and replaced by a `ngComponentDef`. component's `@Component` is removed by the compiler and replaced by a `ɵcmp`.
The `.metadata.json` file is similarly transformed but the content of the The `.metadata.json` file is similarly transformed but the content of the
value assigned is elided (e.g. `"ngComponentDef": {}`). The compiler doesn't value assigned is elided (e.g. `"ɵcmp": {}`). The compiler doesn't
record the selector declared for a component but it is needed to produce the record the selector declared for a component but it is needed to produce the
`ngModuleScope` so the information is recorded as if a static field `ngModuleScope` so the information is recorded as if a static field
`ngSelector` was declared on class with the value of the `selector` field `ngSelector` was declared on class with the value of the `selector` field
@ -141,7 +141,7 @@ The following transformations are performed:
The metadata for a component is transformed by: The metadata for a component is transformed by:
1. Removing the `@Component` directive. 1. Removing the `@Component` directive.
2. Add `"ngComponentDef": {}` static field. 2. Add `"ɵcmp": {}` static field.
3. Add `"ngSelector": <selector-value>` static field. 3. Add `"ngSelector": <selector-value>` static field.
##### Example ##### Example
@ -161,7 +161,7 @@ export class MyComponent {
```js ```js
export class MyComponent { export class MyComponent {
name: string; name: string;
static ngComponentDef = ɵɵdefineComponent({...}); static ɵcmp = ɵɵdefineComponent({...});
} }
``` ```
@ -174,7 +174,7 @@ export class MyComponent {
"MyComponent": { "MyComponent": {
"__symbolic": "class", "__symbolic": "class",
"statics": { "statics": {
"ngComponentDef": {}, "ɵcmp": {},
"ngSelector": "my-comp" "ngSelector": "my-comp"
} }
} }

View File

@ -200,7 +200,7 @@ export class ConstantPool {
public propertyNameOf(kind: DefinitionKind): string { public propertyNameOf(kind: DefinitionKind): string {
switch (kind) { switch (kind) {
case DefinitionKind.Component: case DefinitionKind.Component:
return 'ngComponentDef'; return 'ɵcmp';
case DefinitionKind.Directive: case DefinitionKind.Directive:
return 'ngDirectiveDef'; return 'ngDirectiveDef';
case DefinitionKind.Injector: case DefinitionKind.Injector:

View File

@ -221,7 +221,7 @@ export {
export { export {
NG_ELEMENT_ID as ɵNG_ELEMENT_ID, NG_ELEMENT_ID as ɵNG_ELEMENT_ID,
NG_COMPONENT_DEF as ɵNG_COMPONENT_DEF, NG_COMP_DEF as ɵNG_COMP_DEF,
NG_DIRECTIVE_DEF as ɵNG_DIRECTIVE_DEF, NG_DIRECTIVE_DEF as ɵNG_DIRECTIVE_DEF,
NG_PIPE_DEF as ɵNG_PIPE_DEF, NG_PIPE_DEF as ɵNG_PIPE_DEF,
NG_MODULE_DEF as ɵNG_MODULE_DEF, NG_MODULE_DEF as ɵNG_MODULE_DEF,

View File

@ -87,7 +87,7 @@ export function resolveComponentResources(
let componentResourceResolutionQueue = new Map<Type<any>, Component>(); let componentResourceResolutionQueue = new Map<Type<any>, Component>();
// Track when existing ngComponentDef for a Type is waiting on resources. // Track when existing ɵcmp for a Type is waiting on resources.
const componentDefPendingResolution = new Set<Type<any>>(); const componentDefPendingResolution = new Set<Type<any>>();
export function maybeQueueResolutionOfComponentResources(type: Type<any>, metadata: Component) { export function maybeQueueResolutionOfComponentResources(type: Type<any>, metadata: Component) {

View File

@ -36,7 +36,7 @@ The size of the `DECLS` section is declared in the property `decls` of the compo
}) })
class MyApp { class MyApp {
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
..., ...,
decls: 5, decls: 5,
template: function(rf: RenderFlags, ctx: MyApp) { template: function(rf: RenderFlags, ctx: MyApp) {
@ -87,7 +87,7 @@ The size of the `VARS `section is declared in the property `vars` of the compone
class MyApp { class MyApp {
name = 'World'; name = 'World';
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
..., ...,
decls: 2, // Two DOM Elements. decls: 2, // Two DOM Elements.
vars: 2, // Two bindings. vars: 2, // Two bindings.
@ -140,7 +140,7 @@ Examples include:
}) })
class MyApp { class MyApp {
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
..., ...,
decls: 1, decls: 1,
template: function(rf: RenderFlags, ctx: MyApp) { template: function(rf: RenderFlags, ctx: MyApp) {
@ -160,7 +160,7 @@ class MyApp {
}) })
class Child { class Child {
@HostBinding('tooltip') hostTitle = 'Hello World!'; @HostBinding('tooltip') hostTitle = 'Hello World!';
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
... ...
hostVars: 1 hostVars: 1
}); });
@ -204,8 +204,8 @@ The `EXPANDO` section needs additional information for information stored in `TV
| ----: | ---------------------------: | ------- | ----: | ---------------------------: | -------
| 0 | -10 | Negative numbers signify pointers to elements. In this case 10 (`<child>`) | 0 | -10 | Negative numbers signify pointers to elements. In this case 10 (`<child>`)
| 1 | 2 | Injector size. Number of values to skip to get to Host Bindings. | 1 | 2 | Injector size. Number of values to skip to get to Host Bindings.
| 2 | Child.ngComponentDef.hostBindings | The function to call. (Only when `hostVars` is not `0`) | 2 | Child.ɵcmp.hostBindings | The function to call. (Only when `hostVars` is not `0`)
| 3 | Child.ngComponentDef.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`) | 3 | Child.ɵcmp.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`)
| 4 | Tooltip.ngDirectiveDef.hostBindings | The function to call. (Only when `hostVars` is not `0`) | 4 | Tooltip.ngDirectiveDef.hostBindings | The function to call. (Only when `hostVars` is not `0`)
| 5 | Tooltip.ngDirectiveDef.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`) | 5 | Tooltip.ngDirectiveDef.hostVars | Number of host bindings to process. (Only when `hostVars` is not `0`)
@ -242,9 +242,9 @@ The above code should execute as:
| (initial) | `11` | `-1` | `-1` | (initial) | `11` | `-1` | `-1`
| `-10` | `19` | `\* new Child() *\ 19` | `\* <child> *\ 10` | `-10` | `19` | `\* new Child() *\ 19` | `\* <child> *\ 10`
| `2` | `21` | `\* new Child() *\ 19` | `\* <child> *\ 10` | `2` | `21` | `\* new Child() *\ 19` | `\* <child> *\ 10`
| `Child.ngComponentDef.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* <child> *\ 10` | `Child.ɵcmp.hostBindings` | invoke with => | `\* new Child() *\ 19` | `\* <child> *\ 10`
| | `21` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10` | | `21` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| `Child.ngComponentDef.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10` | `Child.ɵcmp.hostVars` | `22` | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| `Tooltip.ngDirectiveDef.hostBindings` | invoke with => | `\* new Tooltip() *\ 20` | `\* <child> *\ 10` | `Tooltip.ngDirectiveDef.hostBindings` | invoke with => | `\* new Tooltip() *\ 20` | `\* <child> *\ 10`
| | `22` | `21` | `\* <child> *\ 10` | | `22` | `21` | `\* <child> *\ 10`
| `Tooltip.ngDirectiveDef.hostVars` | `22` | `21` | `\* <child> *\ 10` | `Tooltip.ngDirectiveDef.hostVars` | `22` | `21` | `\* <child> *\ 10`
@ -274,7 +274,7 @@ Injection tokens are sorted into three sections:
}) })
class MyApp { class MyApp {
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
..., ...,
decls: 1, decls: 1,
template: function(rf: RenderFlags, ctx: MyApp) { template: function(rf: RenderFlags, ctx: MyApp) {
@ -302,7 +302,7 @@ class MyApp {
}) })
class Child { class Child {
construction(injector: Injector) {} construction(injector: Injector) {}
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
... ...
features: [ features: [
ProvidesFeature( ProvidesFeature(
@ -331,7 +331,7 @@ The above will create the following layout:
| `EXPANDO` | `EXPANDO`
| 11..18| cumulativeBloom | templateBloom | 11..18| cumulativeBloom | templateBloom
| | *sub-section: `component` and `directives`* | | *sub-section: `component` and `directives`*
| 19 | `factory(Child.ngComponentDef.factory)`* | `Child` | 19 | `factory(Child.ɵcmp.factory)`* | `Child`
| | *sub-section: `providers`* | | *sub-section: `providers`*
| 20 | `factory(ServiceA.ngInjectableDef.factory)`* | `ServiceA` | 20 | `factory(ServiceA.ngInjectableDef.factory)`* | `ServiceA`
| 22 | `'someServiceBValue'`* | `ServiceB` | 22 | `'someServiceBValue'`* | `ServiceB`

View File

@ -21,8 +21,7 @@ export function assertTNodeForLView(tNode: TNode, lView: LView) {
export function assertComponentType( export function assertComponentType(
actual: any, actual: any,
msg: string = msg: string = 'Type passed in is not ComponentType, it does not have \'ɵcmp\' property.') {
'Type passed in is not ComponentType, it does not have \'ngComponentDef\' property.') {
if (!getComponentDef(actual)) { if (!getComponentDef(actual)) {
throwError(msg); throwError(msg);
} }

View File

@ -178,7 +178,7 @@ export function attachPatchData(target: any, data: LView | LContext) {
} }
export function isComponentInstance(instance: any): boolean { export function isComponentInstance(instance: any): boolean {
return instance && instance.constructor && instance.constructor.ngComponentDef; return instance && instance.constructor && instance.constructor.ɵcmp;
} }
export function isDirectiveInstance(instance: any): boolean { export function isDirectiveInstance(instance: any): boolean {

View File

@ -16,7 +16,7 @@ import {initNgDevMode} from '../util/ng_dev_mode';
import {stringify} from '../util/stringify'; import {stringify} from '../util/stringify';
import {EMPTY_ARRAY, EMPTY_OBJ} from './empty'; import {EMPTY_ARRAY, EMPTY_OBJ} from './empty';
import {NG_BASE_DEF, NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields'; import {NG_BASE_DEF, NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ɵɵBaseDef} from './interfaces/definition'; import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ɵɵBaseDef} from './interfaces/definition';
import {TAttributes} from './interfaces/node'; import {TAttributes} from './interfaces/node';
// while SelectorFlags is unused here, it's required so that types don't get resolved lazily // while SelectorFlags is unused here, it's required so that types don't get resolved lazily
@ -34,7 +34,7 @@ let _renderCompCount = 0;
* class MyDirective { * class MyDirective {
* // Generated by Angular Template Compiler * // Generated by Angular Template Compiler
* // [Symbol] syntax will not be supported by TypeScript until v2.7 * // [Symbol] syntax will not be supported by TypeScript until v2.7
* static ngComponentDef = defineComponent({ * static ɵcmp = defineComponent({
* ... * ...
* }); * });
* } * }
@ -314,7 +314,7 @@ export function ɵɵdefineComponent<T>(componentDefinition: {
*/ */
export function ɵɵsetComponentScope( export function ɵɵsetComponentScope(
type: ComponentType<any>, directives: Type<any>[], pipes: Type<any>[]): void { type: ComponentType<any>, directives: Type<any>[], pipes: Type<any>[]): void {
const def = (type.ngComponentDef as ComponentDef<any>); const def = (type.ɵcmp as ComponentDef<any>);
def.directiveDefs = () => directives.map(extractDirectiveDef); def.directiveDefs = () => directives.map(extractDirectiveDef);
def.pipeDefs = () => pipes.map(extractPipeDef); def.pipeDefs = () => pipes.map(extractPipeDef);
} }
@ -740,7 +740,7 @@ export function ɵɵdefinePipe<T>(pipeDef: {
*/ */
export function getComponentDef<T>(type: any): ComponentDef<T>|null { export function getComponentDef<T>(type: any): ComponentDef<T>|null {
return type[NG_COMPONENT_DEF] || null; return type[NG_COMP_DEF] || null;
} }
export function getDirectiveDef<T>(type: any): DirectiveDef<T>|null { export function getDirectiveDef<T>(type: any): DirectiveDef<T>|null {

View File

@ -255,7 +255,7 @@ export function diPublicInInjector(
* *
* Then factory method generated is: * Then factory method generated is:
* ``` * ```
* MyComponent.ngComponentDef = defineComponent({ * MyComponent.ɵcmp = defineComponent({
* factory: () => new MyComponent(injectAttribute('title')) * factory: () => new MyComponent(injectAttribute('title'))
* ... * ...
* }) * })

View File

@ -15,7 +15,7 @@ import {isComponentDef} from '../interfaces/type_checks';
import {ɵɵNgOnChangesFeature} from './ng_onchanges_feature'; import {ɵɵNgOnChangesFeature} from './ng_onchanges_feature';
function getSuperType(type: Type<any>): Type<any>& function getSuperType(type: Type<any>): Type<any>&
{ngComponentDef?: ComponentDef<any>, ngDirectiveDef?: DirectiveDef<any>} { {ɵcmp?: ComponentDef<any>, ngDirectiveDef?: DirectiveDef<any>} {
return Object.getPrototypeOf(type.prototype).constructor; return Object.getPrototypeOf(type.prototype).constructor;
} }
@ -32,9 +32,9 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef<any>| Comp
let superDef: DirectiveDef<any>|ComponentDef<any>|undefined = undefined; let superDef: DirectiveDef<any>|ComponentDef<any>|undefined = undefined;
if (isComponentDef(definition)) { if (isComponentDef(definition)) {
// Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance. // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.
superDef = superType.ngComponentDef || superType.ngDirectiveDef; superDef = superType.ɵcmp || superType.ngDirectiveDef;
} else { } else {
if (superType.ngComponentDef) { if (superType.ɵcmp) {
throw new Error('Directives cannot inherit Components'); throw new Error('Directives cannot inherit Components');
} }
// Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance. // Don't use getComponentDef/getDirectiveDef. This logic relies on inheritance.

View File

@ -32,7 +32,7 @@ type OnChangesExpando = OnChanges & {
* Example usage: * Example usage:
* *
* ``` * ```
* static ngComponentDef = defineComponent({ * static ɵcmp = defineComponent({
* ... * ...
* inputs: {name: 'publicName'}, * inputs: {name: 'publicName'},
* features: [NgOnChangesFeature()] * features: [NgOnChangesFeature()]

View File

@ -18,7 +18,7 @@ import {DirectiveDef} from '../interfaces/definition';
* class ComponentWithProviders { * class ComponentWithProviders {
* constructor(private greeter: GreeterDE) {} * constructor(private greeter: GreeterDE) {}
* *
* static ngComponentDef = defineComponent({ * static ɵcmp = defineComponent({
* type: ComponentWithProviders, * type: ComponentWithProviders,
* selectors: [['component-with-providers']], * selectors: [['component-with-providers']],
* factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)), * factory: () => new ComponentWithProviders(directiveInject(GreeterDE as any)),

View File

@ -8,7 +8,7 @@
import {getClosureSafeProperty} from '../util/property'; import {getClosureSafeProperty} from '../util/property';
export const NG_COMPONENT_DEF = getClosureSafeProperty({ngComponentDef: getClosureSafeProperty}); export const NG_COMP_DEF = getClosureSafeProperty({ɵcmp: getClosureSafeProperty});
export const NG_DIRECTIVE_DEF = getClosureSafeProperty({ngDirectiveDef: getClosureSafeProperty}); export const NG_DIRECTIVE_DEF = getClosureSafeProperty({ngDirectiveDef: getClosureSafeProperty});
export const NG_PIPE_DEF = getClosureSafeProperty({ngPipeDef: getClosureSafeProperty}); export const NG_PIPE_DEF = getClosureSafeProperty({ngPipeDef: getClosureSafeProperty});
export const NG_MODULE_DEF = getClosureSafeProperty({ngModuleDef: getClosureSafeProperty}); export const NG_MODULE_DEF = getClosureSafeProperty({ngModuleDef: getClosureSafeProperty});

View File

@ -73,7 +73,7 @@ function MyComponent_NgIf_Template_0(rf: RenderFlags, ctx: any) {
} }
class MyComponent { class MyComponent {
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
..., ...,
template: function(rf: RenderFlags, ctx: MyComponent) { template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
@ -329,7 +329,7 @@ function MyComponent_NgIf_Template_2(rf: RenderFlags, ctx: any) {
} }
class MyComponent { class MyComponent {
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
..., ...,
template: function(rf: RenderFlags, ctx: MyComponent) { template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
@ -670,7 +670,7 @@ const MSG_title = `You have {<7B>0<EFBFBD>, plural,
const MSG_div_attr = ['title', MSG_title, optionalSanitizerFn]; const MSG_div_attr = ['title', MSG_title, optionalSanitizerFn];
class MyComponent { class MyComponent {
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
..., ...,
template: function(rf: RenderFlags, ctx: MyComponent) { template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
@ -911,7 +911,7 @@ const MSG_nested = `
class MyComponent { class MyComponent {
count: number; count: number;
animal: string; animal: string;
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
..., ...,
template: function(rf: RenderFlags, ctx: MyComponent) { template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {
@ -1068,7 +1068,7 @@ if (CLOSURE) {
const MSG_div_attr = ['title', MSG_hello]; const MSG_div_attr = ['title', MSG_hello];
class MyComponent { class MyComponent {
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
..., ...,
template: function(rf: RenderFlags, ctx: MyComponent) { template: function(rf: RenderFlags, ctx: MyComponent) {
if (rf & RenderFlags.Create) { if (rf & RenderFlags.Create) {

View File

@ -69,10 +69,10 @@ export const enum RenderFlags {
} }
/** /**
* A subclass of `Type` which has a static `ngComponentDef`:`ComponentDef` field making it * A subclass of `Type` which has a static `ɵcmp`:`ComponentDef` field making it
* consumable for rendering. * consumable for rendering.
*/ */
export interface ComponentType<T> extends Type<T> { ngComponentDef: never; } export interface ComponentType<T> extends Type<T> { ɵcmp: never; }
/** /**
* A subclass of `Type` which has a static `ngDirectiveDef`:`DirectiveDef` field making it * A subclass of `Type` which has a static `ngDirectiveDef`:`DirectiveDef` field making it

View File

@ -18,7 +18,7 @@ import {ViewEncapsulation} from '../../metadata/view';
import {initNgDevMode} from '../../util/ng_dev_mode'; import {initNgDevMode} from '../../util/ng_dev_mode';
import {getBaseDef, getComponentDef, getDirectiveDef} from '../definition'; import {getBaseDef, getComponentDef, getDirectiveDef} from '../definition';
import {EMPTY_ARRAY, EMPTY_OBJ} from '../empty'; import {EMPTY_ARRAY, EMPTY_OBJ} from '../empty';
import {NG_BASE_DEF, NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF} from '../fields'; import {NG_BASE_DEF, NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_FACTORY_DEF} from '../fields';
import {ComponentType} from '../interfaces/definition'; import {ComponentType} from '../interfaces/definition';
import {stringifyForError} from '../util/misc_utils'; import {stringifyForError} from '../util/misc_utils';
@ -29,11 +29,11 @@ import {flushModuleScopingQueueAsMuchAsPossible, patchComponentDefWithScope, tra
/** /**
* Compile an Angular component according to its decorator metadata, and patch the resulting * Compile an Angular component according to its decorator metadata, and patch the resulting
* ngComponentDef onto the component type. * component def (ɵcmp) onto the component type.
* *
* Compilation may be asynchronous (due to the need to resolve URLs for the component template or * Compilation may be asynchronous (due to the need to resolve URLs for the component template or
* other resources, for example). In the event that compilation is not immediate, `compileComponent` * other resources, for example). In the event that compilation is not immediate, `compileComponent`
* will enqueue resource resolution into a global queue and will fail to return the `ngComponentDef` * will enqueue resource resolution into a global queue and will fail to return the `ɵcmp`
* until the global queue has been resolved with a call to `resolveComponentResources`. * until the global queue has been resolved with a call to `resolveComponentResources`.
*/ */
export function compileComponent(type: Type<any>, metadata: Component): void { export function compileComponent(type: Type<any>, metadata: Component): void {
@ -51,7 +51,7 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
// because we'd have to resolve the asynchronous templates. // because we'd have to resolve the asynchronous templates.
addDirectiveFactoryDef(type, metadata); addDirectiveFactoryDef(type, metadata);
Object.defineProperty(type, NG_COMPONENT_DEF, { Object.defineProperty(type, NG_COMP_DEF, {
get: () => { get: () => {
if (ngComponentDef === null) { if (ngComponentDef === null) {
const compiler = getCompilerFacade(); const compiler = getCompilerFacade();

View File

@ -16,7 +16,7 @@ import {ModuleWithProviders, NgModule, NgModuleDef, NgModuleTransitiveScopes} fr
import {deepForEach, flatten} from '../../util/array_utils'; import {deepForEach, flatten} from '../../util/array_utils';
import {assertDefined} from '../../util/assert'; import {assertDefined} from '../../util/assert';
import {getComponentDef, getDirectiveDef, getNgModuleDef, getPipeDef} from '../definition'; import {getComponentDef, getDirectiveDef, getNgModuleDef, getPipeDef} from '../definition';
import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from '../fields'; import {NG_COMP_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from '../fields';
import {ComponentDef} from '../interfaces/definition'; import {ComponentDef} from '../interfaces/definition';
import {NgModuleType} from '../ng_module_ref'; import {NgModuleType} from '../ng_module_ref';
import {maybeUnwrapFn, stringifyForError} from '../util/misc_utils'; import {maybeUnwrapFn, stringifyForError} from '../util/misc_utils';
@ -373,7 +373,7 @@ function computeCombinedExports(type: Type<any>): Type<any>[] {
/** /**
* Some declared components may be compiled asynchronously, and thus may not have their * Some declared components may be compiled asynchronously, and thus may not have their
* ngComponentDef set yet. If this is the case, then a reference to the module is written into * ɵcmp set yet. If this is the case, then a reference to the module is written into
* the `ngSelectorScope` property of the declared type. * the `ngSelectorScope` property of the declared type.
*/ */
function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule) { function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule) {
@ -382,9 +382,9 @@ function setScopeOnDeclaredComponents(moduleType: Type<any>, ngModule: NgModule)
const transitiveScopes = transitiveScopesFor(moduleType); const transitiveScopes = transitiveScopesFor(moduleType);
declarations.forEach(declaration => { declarations.forEach(declaration => {
if (declaration.hasOwnProperty(NG_COMPONENT_DEF)) { if (declaration.hasOwnProperty(NG_COMP_DEF)) {
// An `ngComponentDef` field exists - go ahead and patch the component directly. // A `ɵcmp` field exists - go ahead and patch the component directly.
const component = declaration as Type<any>& {ngComponentDef: ComponentDef<any>}; const component = declaration as Type<any>& {ɵcmp: ComponentDef<any>};
const componentDef = getComponentDef(component) !; const componentDef = getComponentDef(component) !;
patchComponentDefWithScope(componentDef, transitiveScopes); patchComponentDefWithScope(componentDef, transitiveScopes);
} else if ( } else if (
@ -404,8 +404,8 @@ export function patchComponentDefWithScope<C>(
componentDef.directiveDefs = () => componentDef.directiveDefs = () =>
Array.from(transitiveScopes.compilation.directives) Array.from(transitiveScopes.compilation.directives)
.map( .map(
dir => dir.hasOwnProperty(NG_COMPONENT_DEF) ? getComponentDef(dir) ! : dir =>
getDirectiveDef(dir) !) dir.hasOwnProperty(NG_COMP_DEF) ? getComponentDef(dir) ! : getDirectiveDef(dir) !)
.filter(def => !!def); .filter(def => !!def);
componentDef.pipeDefs = () => componentDef.pipeDefs = () =>
Array.from(transitiveScopes.compilation.pipes).map(pipe => getPipeDef(pipe) !); Array.from(transitiveScopes.compilation.pipes).map(pipe => getPipeDef(pipe) !);
@ -455,7 +455,7 @@ export function transitiveScopesFor<T>(
if (getPipeDef(declaredWithDefs)) { if (getPipeDef(declaredWithDefs)) {
scopes.compilation.pipes.add(declared); scopes.compilation.pipes.add(declared);
} else { } else {
// Either declared has an ngComponentDef or ngDirectiveDef, or it's a component which hasn't // Either declared has a ɵcmp or ngDirectiveDef, or it's a component which hasn't
// had its template compiled yet. In either case, it gets added to the compilation's // had its template compiled yet. In either case, it gets added to the compilation's
// directives. // directives.
scopes.compilation.directives.add(declared); scopes.compilation.directives.add(declared);
@ -486,14 +486,14 @@ export function transitiveScopesFor<T>(
maybeUnwrapFn(def.exports).forEach(<E>(exported: Type<E>) => { maybeUnwrapFn(def.exports).forEach(<E>(exported: Type<E>) => {
const exportedType = exported as Type<E>& { const exportedType = exported as Type<E>& {
// Components, Directives, NgModules, and Pipes can all be exported. // Components, Directives, NgModules, and Pipes can all be exported.
ngComponentDef?: any; ɵcmp?: any;
ngDirectiveDef?: any; ngDirectiveDef?: any;
ngModuleDef?: NgModuleDef<E>; ngModuleDef?: NgModuleDef<E>;
ngPipeDef?: any; ngPipeDef?: any;
}; };
// Either the type is a module, a pipe, or a component/directive (which may not have an // Either the type is a module, a pipe, or a component/directive (which may not have a
// ngComponentDef as it might be compiled asynchronously). // ɵcmp as it might be compiled asynchronously).
if (isNgModule(exportedType)) { if (isNgModule(exportedType)) {
// When this module exports another, the exported module's exported directives and pipes are // When this module exports another, the exported module's exported directives and pipes are
// added to both the compilation and exported scopes of this module. // added to both the compilation and exported scopes of this module.

View File

@ -66,7 +66,7 @@
"name": "NEXT" "name": "NEXT"
}, },
{ {
"name": "NG_COMPONENT_DEF" "name": "NG_COMP_DEF"
}, },
{ {
"name": "NG_DIRECTIVE_DEF" "name": "NG_DIRECTIVE_DEF"

View File

@ -60,7 +60,7 @@
"name": "NEXT" "name": "NEXT"
}, },
{ {
"name": "NG_COMPONENT_DEF" "name": "NG_COMP_DEF"
}, },
{ {
"name": "NG_DIRECTIVE_DEF" "name": "NG_DIRECTIVE_DEF"

View File

@ -123,7 +123,7 @@
"name": "NEXT" "name": "NEXT"
}, },
{ {
"name": "NG_COMPONENT_DEF" "name": "NG_COMP_DEF"
}, },
{ {
"name": "NG_DIRECTIVE_DEF" "name": "NG_DIRECTIVE_DEF"

View File

@ -125,7 +125,7 @@ function declareTests(config?: {useJit: boolean}) {
} }
function createComp<T>(compType: Type<T>, moduleType: Type<any>): ComponentFixture<T> { function createComp<T>(compType: Type<T>, moduleType: Type<any>): ComponentFixture<T> {
const componentDef = (compType as any).ngComponentDef; const componentDef = (compType as any).ɵcmp;
if (componentDef) { if (componentDef) {
// Since we avoid Components/Directives/Pipes recompiling in case there are no overrides, we // Since we avoid Components/Directives/Pipes recompiling in case there are no overrides, we
// may face a problem where previously compiled defs available to a given // may face a problem where previously compiled defs available to a given

View File

@ -18,7 +18,7 @@ describe('resource_loading', () => {
it('should throw an error when compiling component that has unresolved templateUrl', () => { it('should throw an error when compiling component that has unresolved templateUrl', () => {
const MyComponent: ComponentType<any> = (class MyComponent{}) as any; const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
compileComponent(MyComponent, {templateUrl: 'someUrl'}); compileComponent(MyComponent, {templateUrl: 'someUrl'});
expect(() => MyComponent.ngComponentDef).toThrowError(` expect(() => MyComponent.ɵcmp).toThrowError(`
Component 'MyComponent' is not resolved: Component 'MyComponent' is not resolved:
- templateUrl: someUrl - templateUrl: someUrl
Did you run and wait for 'resolveComponentResources()'?`.trim()); Did you run and wait for 'resolveComponentResources()'?`.trim());
@ -27,7 +27,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
it('should throw an error when compiling component that has unresolved styleUrls', () => { it('should throw an error when compiling component that has unresolved styleUrls', () => {
const MyComponent: ComponentType<any> = (class MyComponent{}) as any; const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
compileComponent(MyComponent, {styleUrls: ['someUrl1', 'someUrl2']}); compileComponent(MyComponent, {styleUrls: ['someUrl1', 'someUrl2']});
expect(() => MyComponent.ngComponentDef).toThrowError(` expect(() => MyComponent.ɵcmp).toThrowError(`
Component 'MyComponent' is not resolved: Component 'MyComponent' is not resolved:
- styleUrls: ["someUrl1","someUrl2"] - styleUrls: ["someUrl1","someUrl2"]
Did you run and wait for 'resolveComponentResources()'?`.trim()); Did you run and wait for 'resolveComponentResources()'?`.trim());
@ -38,7 +38,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
const MyComponent: ComponentType<any> = (class MyComponent{}) as any; const MyComponent: ComponentType<any> = (class MyComponent{}) as any;
compileComponent( compileComponent(
MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']}); MyComponent, {templateUrl: 'someUrl', styleUrls: ['someUrl1', 'someUrl2']});
expect(() => MyComponent.ngComponentDef).toThrowError(` expect(() => MyComponent.ɵcmp).toThrowError(`
Component 'MyComponent' is not resolved: Component 'MyComponent' is not resolved:
- templateUrl: someUrl - templateUrl: someUrl
- styleUrls: ["someUrl1","someUrl2"] - styleUrls: ["someUrl1","someUrl2"]
@ -64,7 +64,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
const metadata: Component = {templateUrl: 'test://content'}; const metadata: Component = {templateUrl: 'test://content'};
compileComponent(MyComponent, metadata); compileComponent(MyComponent, metadata);
await resolveComponentResources(testResolver); await resolveComponentResources(testResolver);
expect(MyComponent.ngComponentDef).toBeDefined(); expect(MyComponent.ɵcmp).toBeDefined();
expect(metadata.template).toBe('content'); expect(metadata.template).toBe('content');
expect(resourceFetchCount).toBe(1); expect(resourceFetchCount).toBe(1);
}); });
@ -74,7 +74,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style2']}; const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style2']};
compileComponent(MyComponent, metadata); compileComponent(MyComponent, metadata);
await resolveComponentResources(testResolver); await resolveComponentResources(testResolver);
expect(MyComponent.ngComponentDef).toBeDefined(); expect(MyComponent.ɵcmp).toBeDefined();
expect(metadata.styleUrls).toBe(undefined); expect(metadata.styleUrls).toBe(undefined);
expect(metadata.styles).toEqual(['style1', 'style2']); expect(metadata.styles).toEqual(['style1', 'style2']);
expect(resourceFetchCount).toBe(2); expect(resourceFetchCount).toBe(2);
@ -85,7 +85,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style1']}; const metadata: Component = {template: '', styleUrls: ['test://style1', 'test://style1']};
compileComponent(MyComponent, metadata); compileComponent(MyComponent, metadata);
await resolveComponentResources(testResolver); await resolveComponentResources(testResolver);
expect(MyComponent.ngComponentDef).toBeDefined(); expect(MyComponent.ɵcmp).toBeDefined();
expect(metadata.styleUrls).toBe(undefined); expect(metadata.styleUrls).toBe(undefined);
expect(metadata.styles).toEqual(['style1', 'style1']); expect(metadata.styles).toEqual(['style1', 'style1']);
expect(resourceFetchCount).toBe(1); expect(resourceFetchCount).toBe(1);
@ -136,7 +136,7 @@ Did you run and wait for 'resolveComponentResources()'?`.trim());
const metadata: Component = {templateUrl: 'test://content'}; const metadata: Component = {templateUrl: 'test://content'};
compileComponent(MyComponent, metadata); compileComponent(MyComponent, metadata);
await resolveComponentResources(fetch); await resolveComponentResources(fetch);
expect(MyComponent.ngComponentDef).toBeDefined(); expect(MyComponent.ɵcmp).toBeDefined();
expect(metadata.template).toBe('response for test://content'); expect(metadata.template).toBe('response for test://content');
}); });
}); });

View File

@ -34,7 +34,7 @@ describe('iv perf test', () => {
it(`${iteration}. create ${count} divs in Render3`, () => { it(`${iteration}. create ${count} divs in Render3`, () => {
class Component { class Component {
static ngFactoryDef = () => new Component; static ngFactoryDef = () => new Component;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Component, type: Component,
selectors: [['div']], selectors: [['div']],
decls: 1, decls: 1,

View File

@ -26,7 +26,7 @@ describe('change detection', () => {
ngDoCheck(): void { this.doCheckCount++; } ngDoCheck(): void { this.doCheckCount++; }
static ngFactoryDef = () => new MyComponent(); static ngFactoryDef = () => new MyComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [['my-comp']], selectors: [['my-comp']],
decls: 2, decls: 2,
@ -102,7 +102,7 @@ describe('change detection', () => {
onClick() {} onClick() {}
static ngFactoryDef = () => comp = new MyComponent(); static ngFactoryDef = () => comp = new MyComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [['my-comp']], selectors: [['my-comp']],
decls: 2, decls: 2,
@ -140,7 +140,7 @@ describe('change detection', () => {
onClick() {} onClick() {}
static ngFactoryDef = () => comp = new ManualComponent(); static ngFactoryDef = () => comp = new ManualComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ManualComponent, type: ManualComponent,
selectors: [['manual-comp']], selectors: [['manual-comp']],
decls: 2, decls: 2,
@ -176,7 +176,7 @@ describe('change detection', () => {
name: string = 'Nancy'; name: string = 'Nancy';
static ngFactoryDef = () => new ManualApp(); static ngFactoryDef = () => new ManualApp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ManualApp, type: ManualApp,
selectors: [['manual-app']], selectors: [['manual-app']],
decls: 1, decls: 1,
@ -231,7 +231,7 @@ describe('change detection', () => {
ngDoCheck(): void { this.doCheckCount++; } ngDoCheck(): void { this.doCheckCount++; }
static ngFactoryDef = () => parent = new ButtonParent(); static ngFactoryDef = () => parent = new ButtonParent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ButtonParent, type: ButtonParent,
selectors: [['button-parent']], selectors: [['button-parent']],
decls: 2, decls: 2,
@ -308,7 +308,7 @@ describe('change detection', () => {
} }
static ngFactoryDef = () => new MyComponent(); static ngFactoryDef = () => new MyComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [['my-comp']], selectors: [['my-comp']],
decls: 1, decls: 1,

View File

@ -21,7 +21,7 @@ describe('ComponentFactory', () => {
it('should correctly populate default properties', () => { it('should correctly populate default properties', () => {
class TestComponent { class TestComponent {
static ngFactoryDef = () => new TestComponent(); static ngFactoryDef = () => new TestComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestComponent, type: TestComponent,
selectors: [['test', 'foo'], ['bar']], selectors: [['test', 'foo'], ['bar']],
decls: 0, decls: 0,
@ -42,7 +42,7 @@ describe('ComponentFactory', () => {
it('should correctly populate defined properties', () => { it('should correctly populate defined properties', () => {
class TestComponent { class TestComponent {
static ngFactoryDef = () => new TestComponent(); static ngFactoryDef = () => new TestComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestComponent, type: TestComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['test', 'foo'], ['bar']], selectors: [['test', 'foo'], ['bar']],
@ -90,7 +90,7 @@ describe('ComponentFactory', () => {
class TestComponent { class TestComponent {
static ngFactoryDef = () => new TestComponent(); static ngFactoryDef = () => new TestComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestComponent, type: TestComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['test']], selectors: [['test']],

View File

@ -22,7 +22,7 @@ describe('component', () => {
increment() { this.count++; } increment() { this.count++; }
static ngFactoryDef = () => new CounterComponent; static ngFactoryDef = () => new CounterComponent;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: CounterComponent, type: CounterComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['counter']], selectors: [['counter']],
@ -72,7 +72,7 @@ describe('component', () => {
class MyComponent { class MyComponent {
constructor(public myService: MyService) {} constructor(public myService: MyService) {}
static ngFactoryDef = () => new MyComponent(ɵɵdirectiveInject(MyService)); static ngFactoryDef = () => new MyComponent(ɵɵdirectiveInject(MyService));
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['my-component']], selectors: [['my-component']],
@ -116,7 +116,7 @@ describe('component', () => {
name = ''; name = '';
static ngFactoryDef = () => new Comp(); static ngFactoryDef = () => new Comp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Comp, type: Comp,
selectors: [['comp']], selectors: [['comp']],
decls: 1, decls: 1,
@ -175,7 +175,7 @@ it('should not invoke renderer destroy method for embedded views', () => {
return comp; return comp;
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Comp, type: Comp,
selectors: [['comp']], selectors: [['comp']],
decls: 3, decls: 3,
@ -248,7 +248,7 @@ describe('component with a container', () => {
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
items !: string[]; items !: string[];
static ngFactoryDef = () => new WrapperComponent; static ngFactoryDef = () => new WrapperComponent;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: WrapperComponent, type: WrapperComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['wrapper']], selectors: [['wrapper']],
@ -325,7 +325,7 @@ describe('recursive components', () => {
ngOnDestroy() { events.push('destroy' + this.data.value); } ngOnDestroy() { events.push('destroy' + this.data.value); }
static ngFactoryDef = () => new TreeComponent(); static ngFactoryDef = () => new TreeComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TreeComponent, type: TreeComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['tree-comp']], selectors: [['tree-comp']],
@ -375,8 +375,7 @@ describe('recursive components', () => {
}); });
} }
(TreeComponent.ngComponentDef as ComponentDef<TreeComponent>).directiveDefs = (TreeComponent.ɵcmp as ComponentDef<TreeComponent>).directiveDefs = () => [TreeComponent.ɵcmp];
() => [TreeComponent.ngComponentDef];
/** /**
* {{ data.value }} * {{ data.value }}
@ -391,7 +390,7 @@ describe('recursive components', () => {
ngOnDestroy() { events.push('destroy' + this.data.value); } ngOnDestroy() { events.push('destroy' + this.data.value); }
static ngFactoryDef = () => new NgIfTree(); static ngFactoryDef = () => new NgIfTree();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: NgIfTree, type: NgIfTree,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['ng-if-tree']], selectors: [['ng-if-tree']],
@ -438,8 +437,8 @@ describe('recursive components', () => {
} }
} }
(NgIfTree.ngComponentDef as ComponentDef<NgIfTree>).directiveDefs = (NgIfTree.ɵcmp as ComponentDef<NgIfTree>).directiveDefs =
() => [NgIfTree.ngComponentDef, NgIf.ngDirectiveDef]; () => [NgIfTree.ɵcmp, NgIf.ngDirectiveDef];
function _buildTree(currDepth: number): TreeNode { function _buildTree(currDepth: number): TreeNode {
const children = currDepth < 2 ? _buildTree(currDepth + 1) : null; const children = currDepth < 2 ? _buildTree(currDepth + 1) : null;
@ -533,7 +532,7 @@ describe('recursive components', () => {
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
minifiedName !: string; minifiedName !: string;
static ngFactoryDef = () => new TestInputsComponent(); static ngFactoryDef = () => new TestInputsComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestInputsComponent, type: TestInputsComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['test-inputs']], selectors: [['test-inputs']],
@ -546,7 +545,7 @@ describe('recursive components', () => {
}); });
} }
const testInputsComponentFactory = new ComponentFactory(TestInputsComponent.ngComponentDef); const testInputsComponentFactory = new ComponentFactory(TestInputsComponent.ɵcmp);
expect([ expect([
{propName: 'minifiedName', templateName: 'unminifiedName'} {propName: 'minifiedName', templateName: 'unminifiedName'}

View File

@ -699,7 +699,7 @@ describe('JS control flow', () => {
return new Comp(); return new Comp();
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Comp, type: Comp,
selectors: [['comp']], selectors: [['comp']],
decls: 0, decls: 0,
@ -713,7 +713,7 @@ describe('JS control flow', () => {
condition2 = true; condition2 = true;
static ngFactoryDef = () => new App(); static ngFactoryDef = () => new App();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 3, decls: 3,
@ -769,7 +769,7 @@ describe('JS control flow', () => {
return new Comp(); return new Comp();
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Comp, type: Comp,
selectors: [['comp']], selectors: [['comp']],
decls: 0, decls: 0,
@ -783,7 +783,7 @@ describe('JS control flow', () => {
condition2 = true; condition2 = true;
static ngFactoryDef = () => new App(); static ngFactoryDef = () => new App();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 3, decls: 3,

View File

@ -118,7 +118,7 @@ describe('di', () => {
constructor(public renderer: Renderer2) {} constructor(public renderer: Renderer2) {}
static ngFactoryDef = () => new MyComp(ɵɵdirectiveInject(Renderer2 as any)); static ngFactoryDef = () => new MyComp(ɵɵdirectiveInject(Renderer2 as any));
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComp, type: MyComp,
selectors: [['my-comp']], selectors: [['my-comp']],
decls: 1, decls: 1,

View File

@ -241,7 +241,7 @@ describe('instructions', () => {
rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']]; rows = [['a', 'b'], ['A', 'B'], ['a', 'b'], ['A', 'B']];
static ngFactoryDef = function ToDoAppComponent_Factory() { return new NestedLoops(); }; static ngFactoryDef = function ToDoAppComponent_Factory() { return new NestedLoops(); };
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: NestedLoops, type: NestedLoops,
selectors: [['nested-loops']], selectors: [['nested-loops']],
decls: 1, decls: 1,

View File

@ -118,7 +118,7 @@ describe('render3 integration test', () => {
afterTree !: Tree; afterTree !: Tree;
static ngFactoryDef = () => new ChildComponent; static ngFactoryDef = () => new ChildComponent;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
selectors: [['child']], selectors: [['child']],
type: ChildComponent, type: ChildComponent,
decls: 3, decls: 3,
@ -200,7 +200,7 @@ describe('component styles', () => {
it('should pass in the component styles directly into the underlying renderer', () => { it('should pass in the component styles directly into the underlying renderer', () => {
class StyledComp { class StyledComp {
static ngFactoryDef = () => new StyledComp(); static ngFactoryDef = () => new StyledComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StyledComp, type: StyledComp,
styles: ['div { color: red; }'], styles: ['div { color: red; }'],
decls: 1, decls: 1,
@ -228,7 +228,7 @@ describe('component animations', () => {
class AnimComp { class AnimComp {
static ngFactoryDef = () => new AnimComp(); static ngFactoryDef = () => new AnimComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AnimComp, type: AnimComp,
decls: 0, decls: 0,
vars: 0, vars: 0,
@ -255,7 +255,7 @@ describe('component animations', () => {
it('should include animations in the renderType data array even if the array is empty', () => { it('should include animations in the renderType data array even if the array is empty', () => {
class AnimComp { class AnimComp {
static ngFactoryDef = () => new AnimComp(); static ngFactoryDef = () => new AnimComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AnimComp, type: AnimComp,
decls: 0, decls: 0,
vars: 0, vars: 0,
@ -275,7 +275,7 @@ describe('component animations', () => {
it('should allow [@trigger] bindings to be picked up by the underlying renderer', () => { it('should allow [@trigger] bindings to be picked up by the underlying renderer', () => {
class AnimComp { class AnimComp {
static ngFactoryDef = () => new AnimComp(); static ngFactoryDef = () => new AnimComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AnimComp, type: AnimComp,
decls: 1, decls: 1,
vars: 1, vars: 1,
@ -312,7 +312,7 @@ describe('component animations', () => {
() => { () => {
class AnimComp { class AnimComp {
static ngFactoryDef = () => new AnimComp(); static ngFactoryDef = () => new AnimComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AnimComp, type: AnimComp,
decls: 1, decls: 1,
vars: 1, vars: 1,
@ -361,7 +361,7 @@ describe('component animations', () => {
// class ParentComp { // class ParentComp {
// static ngFactoryDef = () => new ParentComp(); // static ngFactoryDef = () => new ParentComp();
// static ngComponentDef = ɵɵdefineComponent({ // static ɵcmp = ɵɵdefineComponent({
// type: ParentComp, // type: ParentComp,
// decls: 1, // decls: 1,
// vars: 1, // vars: 1,
@ -391,7 +391,7 @@ describe('element discovery', () => {
it('should only monkey-patch immediate child nodes in a component', () => { it('should only monkey-patch immediate child nodes in a component', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 2, decls: 2,
@ -423,7 +423,7 @@ describe('element discovery', () => {
it('should only monkey-patch immediate child nodes in a sub component', () => { it('should only monkey-patch immediate child nodes in a sub component', () => {
class ChildComp { class ChildComp {
static ngFactoryDef = () => new ChildComp(); static ngFactoryDef = () => new ChildComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ChildComp, type: ChildComp,
selectors: [['child-comp']], selectors: [['child-comp']],
decls: 3, decls: 3,
@ -440,7 +440,7 @@ describe('element discovery', () => {
class ParentComp { class ParentComp {
static ngFactoryDef = () => new ParentComp(); static ngFactoryDef = () => new ParentComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ParentComp, type: ParentComp,
selectors: [['parent-comp']], selectors: [['parent-comp']],
directives: [ChildComp], directives: [ChildComp],
@ -473,7 +473,7 @@ describe('element discovery', () => {
it('should only monkey-patch immediate child nodes in an embedded template container', () => { it('should only monkey-patch immediate child nodes in an embedded template container', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
directives: [NgIf], directives: [NgIf],
@ -523,7 +523,7 @@ describe('element discovery', () => {
it('should return a context object from a given dom node', () => { it('should return a context object from a given dom node', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
directives: [NgIf], directives: [NgIf],
@ -561,7 +561,7 @@ describe('element discovery', () => {
it('should cache the element context on a element was pre-emptively monkey-patched', () => { it('should cache the element context on a element was pre-emptively monkey-patched', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 1, decls: 1,
@ -593,7 +593,7 @@ describe('element discovery', () => {
() => { () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 2, decls: 2,
@ -626,7 +626,7 @@ describe('element discovery', () => {
() => { () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 1, decls: 1,
@ -674,7 +674,7 @@ describe('element discovery', () => {
*/ */
class ProjectorComp { class ProjectorComp {
static ngFactoryDef = () => new ProjectorComp(); static ngFactoryDef = () => new ProjectorComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ProjectorComp, type: ProjectorComp,
selectors: [['projector-comp']], selectors: [['projector-comp']],
decls: 4, decls: 4,
@ -697,7 +697,7 @@ describe('element discovery', () => {
class ParentComp { class ParentComp {
static ngFactoryDef = () => new ParentComp(); static ngFactoryDef = () => new ParentComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ParentComp, type: ParentComp,
selectors: [['parent-comp']], selectors: [['parent-comp']],
directives: [ProjectorComp], directives: [ProjectorComp],
@ -771,7 +771,7 @@ describe('element discovery', () => {
() => { () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 1, decls: 1,
@ -798,7 +798,7 @@ describe('element discovery', () => {
it('should by default monkey-patch the bootstrap component with context details', () => { it('should by default monkey-patch the bootstrap component with context details', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
decls: 0, decls: 0,
@ -855,7 +855,7 @@ describe('element discovery', () => {
class StructuredComp { class StructuredComp {
static ngFactoryDef = () => new StructuredComp(); static ngFactoryDef = () => new StructuredComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: StructuredComp, type: StructuredComp,
selectors: [['structured-comp']], selectors: [['structured-comp']],
directives: [MyDir1, MyDir2, MyDir3], directives: [MyDir1, MyDir2, MyDir3],
@ -933,7 +933,7 @@ describe('element discovery', () => {
class ChildComp { class ChildComp {
static ngFactoryDef = () => childComponentInstance = new ChildComp(); static ngFactoryDef = () => childComponentInstance = new ChildComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ChildComp, type: ChildComp,
selectors: [['child-comp']], selectors: [['child-comp']],
decls: 1, decls: 1,
@ -948,7 +948,7 @@ describe('element discovery', () => {
class ParentComp { class ParentComp {
static ngFactoryDef = () => new ParentComp(); static ngFactoryDef = () => new ParentComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ParentComp, type: ParentComp,
selectors: [['parent-comp']], selectors: [['parent-comp']],
directives: [ChildComp, MyDir1, MyDir2], directives: [ChildComp, MyDir1, MyDir2],
@ -1011,7 +1011,7 @@ describe('element discovery', () => {
() => { () => {
class ChildComp { class ChildComp {
static ngFactoryDef = () => new ChildComp(); static ngFactoryDef = () => new ChildComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ChildComp, type: ChildComp,
selectors: [['child-comp']], selectors: [['child-comp']],
decls: 3, decls: 3,
@ -1028,7 +1028,7 @@ describe('element discovery', () => {
class ParentComp { class ParentComp {
static ngFactoryDef = () => new ParentComp(); static ngFactoryDef = () => new ParentComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ParentComp, type: ParentComp,
selectors: [['parent-comp']], selectors: [['parent-comp']],
directives: [ChildComp], directives: [ChildComp],
@ -1072,7 +1072,7 @@ describe('sanitization', () => {
it('should sanitize data using the provided sanitization interface', () => { it('should sanitize data using the provided sanitization interface', () => {
class SanitizationComp { class SanitizationComp {
static ngFactoryDef = () => new SanitizationComp(); static ngFactoryDef = () => new SanitizationComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: SanitizationComp, type: SanitizationComp,
selectors: [['sanitize-this']], selectors: [['sanitize-this']],
decls: 1, decls: 1,
@ -1130,7 +1130,7 @@ describe('sanitization', () => {
class SimpleComp { class SimpleComp {
static ngFactoryDef = () => new SimpleComp(); static ngFactoryDef = () => new SimpleComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: SimpleComp, type: SimpleComp,
selectors: [['sanitize-this']], selectors: [['sanitize-this']],
decls: 1, decls: 1,

View File

@ -33,7 +33,7 @@ ivyEnabled && describe('render3 jit', () => {
} }
const SomeCmpAny = SomeCmp as any; const SomeCmpAny = SomeCmp as any;
expect(SomeCmpAny.ngComponentDef).toBeDefined(); expect(SomeCmpAny.ɵcmp).toBeDefined();
expect(SomeCmpAny.ngFactoryDef() instanceof SomeCmp).toBe(true); expect(SomeCmpAny.ngFactoryDef() instanceof SomeCmp).toBe(true);
}); });
@ -198,7 +198,7 @@ ivyEnabled && describe('render3 jit', () => {
}) })
class Cmp { class Cmp {
} }
const cmpDef: ComponentDef<Cmp> = (Cmp as any).ngComponentDef; const cmpDef: ComponentDef<Cmp> = (Cmp as any).ɵcmp;
expect(cmpDef.directiveDefs).toBeNull(); expect(cmpDef.directiveDefs).toBeNull();
@ -230,7 +230,7 @@ ivyEnabled && describe('render3 jit', () => {
onChange(event: any): void {} onChange(event: any): void {}
} }
const cmpDef = (Cmp as any).ngComponentDef as ComponentDef<Cmp>; const cmpDef = (Cmp as any).ɵcmp as ComponentDef<Cmp>;
expect(cmpDef.hostBindings).toBeDefined(); expect(cmpDef.hostBindings).toBeDefined();
expect(cmpDef.hostBindings !.length).toBe(3); expect(cmpDef.hostBindings !.length).toBe(3);
@ -268,8 +268,8 @@ ivyEnabled && describe('render3 jit', () => {
} }
const InputCompAny = InputComp as any; const InputCompAny = InputComp as any;
expect(InputCompAny.ngComponentDef.inputs).toEqual({publicName: 'privateName'}); expect(InputCompAny.ɵcmp.inputs).toEqual({publicName: 'privateName'});
expect(InputCompAny.ngComponentDef.declaredInputs).toEqual({publicName: 'privateName'}); expect(InputCompAny.ɵcmp.declaredInputs).toEqual({publicName: 'privateName'});
}); });
it('should add @Input properties to a directive', () => { it('should add @Input properties to a directive', () => {
@ -331,7 +331,7 @@ ivyEnabled && describe('render3 jit', () => {
@ViewChild('foo', {static: false}) foo: ElementRef|undefined; @ViewChild('foo', {static: false}) foo: ElementRef|undefined;
} }
expect((TestComponent as any).ngComponentDef.foo).not.toBeNull(); expect((TestComponent as any).ɵcmp.foo).not.toBeNull();
}); });
it('should compile ViewChildren query on a component', () => { it('should compile ViewChildren query on a component', () => {
@ -340,7 +340,7 @@ ivyEnabled && describe('render3 jit', () => {
@ViewChildren('foo') foos: QueryList<ElementRef>|undefined; @ViewChildren('foo') foos: QueryList<ElementRef>|undefined;
} }
expect((TestComponent as any).ngComponentDef.viewQuery).not.toBeNull(); expect((TestComponent as any).ɵcmp.viewQuery).not.toBeNull();
}); });
}); });

View File

@ -56,7 +56,7 @@ describe('lifecycles', () => {
} }
static ngFactoryDef = () => new Component(); static ngFactoryDef = () => new Component();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Component, type: Component,
selectors: [[name]], selectors: [[name]],
decls: decls, decls: decls,

View File

@ -34,7 +34,7 @@ describe('event listeners', () => {
return comp; return comp;
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComp, type: MyComp,
selectors: [['comp']], selectors: [['comp']],
decls: 2, decls: 2,
@ -67,7 +67,7 @@ describe('event listeners', () => {
return comp; return comp;
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyCompWithGlobalListeners, type: MyCompWithGlobalListeners,
selectors: [['comp']], selectors: [['comp']],
decls: 1, decls: 1,
@ -135,7 +135,7 @@ describe('event listeners', () => {
} }
static ngFactoryDef = () => new PreventDefaultComp(); static ngFactoryDef = () => new PreventDefaultComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: PreventDefaultComp, type: PreventDefaultComp,
selectors: [['prevent-default-comp']], selectors: [['prevent-default-comp']],
decls: 2, decls: 2,
@ -326,7 +326,7 @@ describe('event listeners', () => {
onClick() { this.counter++; } onClick() { this.counter++; }
static ngFactoryDef = () => new AppComp(); static ngFactoryDef = () => new AppComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComp, type: AppComp,
selectors: [['app-comp']], selectors: [['app-comp']],
decls: 1, decls: 1,
@ -387,7 +387,7 @@ describe('event listeners', () => {
onClick(index: number) { this.counters[index]++; } onClick(index: number) { this.counters[index]++; }
static ngFactoryDef = () => new AppComp(); static ngFactoryDef = () => new AppComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComp, type: AppComp,
selectors: [['app-comp']], selectors: [['app-comp']],
decls: 1, decls: 1,
@ -451,7 +451,7 @@ describe('event listeners', () => {
onClick(index: number) { this.counters[index]++; } onClick(index: number) { this.counters[index]++; }
static ngFactoryDef = () => new AppComp(); static ngFactoryDef = () => new AppComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComp, type: AppComp,
selectors: [['app-comp']], selectors: [['app-comp']],
decls: 1, decls: 1,
@ -530,7 +530,7 @@ describe('event listeners', () => {
onClick() { events.push('click!'); } onClick() { events.push('click!'); }
static ngFactoryDef = () => { return new MyComp(); }; static ngFactoryDef = () => { return new MyComp(); };
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComp, type: MyComp,
selectors: [['comp']], selectors: [['comp']],
decls: 1, decls: 1,
@ -633,7 +633,7 @@ describe('event listeners', () => {
onClick(a: any, b: any) { this.counter += a + b; } onClick(a: any, b: any) { this.counter += a + b; }
static ngFactoryDef = () => new MyComp(); static ngFactoryDef = () => new MyComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComp, type: MyComp,
selectors: [['comp']], selectors: [['comp']],
decls: 2, decls: 2,
@ -914,7 +914,7 @@ describe('event listeners', () => {
onClick(comp: any) { this.comp = comp; } onClick(comp: any) { this.comp = comp; }
static ngFactoryDef = () => new App(); static ngFactoryDef = () => new App();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 3, decls: 3,

View File

@ -22,7 +22,7 @@ describe('outputs', () => {
resetStream = new EventEmitter(); resetStream = new EventEmitter();
static ngFactoryDef = () => buttonToggle = new ButtonToggle(); static ngFactoryDef = () => buttonToggle = new ButtonToggle();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ButtonToggle, type: ButtonToggle,
selectors: [['button-toggle']], selectors: [['button-toggle']],
template: function(rf: RenderFlags, ctx: any) {}, template: function(rf: RenderFlags, ctx: any) {},

View File

@ -423,7 +423,7 @@ describe('providers', () => {
}); });
}); });
describe('with directives (order in ngComponentDef.directives matters)', () => { describe('with directives (order in ɵcmp.directives matters)', () => {
it('should work without providers nor viewProviders in component', () => { it('should work without providers nor viewProviders in component', () => {
expectProvidersScenario({ expectProvidersScenario({
parent: { parent: {
@ -647,7 +647,7 @@ describe('providers', () => {
}); });
}); });
describe('with directives (order in ngComponentDef.directives matters)', () => { describe('with directives (order in ɵcmp.directives matters)', () => {
it('should work without providers nor viewProviders in component', () => { it('should work without providers nor viewProviders in component', () => {
expectProvidersScenario({ expectProvidersScenario({
parent: { parent: {
@ -870,7 +870,7 @@ describe('providers', () => {
static ngFactoryDef = static ngFactoryDef =
() => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); } () => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Repeated, type: Repeated,
selectors: [['repeated']], selectors: [['repeated']],
decls: 2, decls: 2,
@ -901,7 +901,7 @@ describe('providers', () => {
}) })
class ComponentWithProviders { class ComponentWithProviders {
static ngFactoryDef = () => new ComponentWithProviders(); static ngFactoryDef = () => new ComponentWithProviders();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ComponentWithProviders, type: ComponentWithProviders,
selectors: [['component-with-providers']], selectors: [['component-with-providers']],
decls: 2, decls: 2,
@ -956,7 +956,7 @@ describe('providers', () => {
static ngFactoryDef = static ngFactoryDef =
() => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); } () => { return new Repeated(ɵɵdirectiveInject(String), ɵɵdirectiveInject(Number)); }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Repeated, type: Repeated,
selectors: [['repeated']], selectors: [['repeated']],
decls: 2, decls: 2,
@ -990,7 +990,7 @@ describe('providers', () => {
}) })
class ComponentWithProviders { class ComponentWithProviders {
static ngFactoryDef = () => new ComponentWithProviders(); static ngFactoryDef = () => new ComponentWithProviders();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ComponentWithProviders, type: ComponentWithProviders,
selectors: [['component-with-providers']], selectors: [['component-with-providers']],
decls: 2, decls: 2,
@ -1039,7 +1039,7 @@ describe('providers', () => {
constructor(private s: String) {} constructor(private s: String) {}
static ngFactoryDef = () => new EmbeddedComponent(ɵɵdirectiveInject(String)); static ngFactoryDef = () => new EmbeddedComponent(ɵɵdirectiveInject(String));
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: EmbeddedComponent, type: EmbeddedComponent,
selectors: [['embedded-cmp']], selectors: [['embedded-cmp']],
decls: 1, decls: 1,
@ -1062,7 +1062,7 @@ describe('providers', () => {
static ngFactoryDef = () => hostComponent = new HostComponent( static ngFactoryDef = () => hostComponent = new HostComponent(
ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()) ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver())
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: HostComponent, type: HostComponent,
selectors: [['host-cmp']], selectors: [['host-cmp']],
decls: 1, decls: 1,
@ -1086,7 +1086,7 @@ describe('providers', () => {
constructor() {} constructor() {}
static ngFactoryDef = () => new AppComponent(); static ngFactoryDef = () => new AppComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComponent, type: AppComponent,
selectors: [['app-cmp']], selectors: [['app-cmp']],
decls: 1, decls: 1,
@ -1248,7 +1248,7 @@ describe('providers', () => {
constructor() {} constructor() {}
static ngFactoryDef = () => new MyComponent(); static ngFactoryDef = () => new MyComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [['my-cmp']], selectors: [['my-cmp']],
decls: 1, decls: 1,
@ -1275,7 +1275,7 @@ describe('providers', () => {
constructor() {} constructor() {}
static ngFactoryDef = () => new AppComponent(); static ngFactoryDef = () => new AppComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComponent, type: AppComponent,
selectors: [['app-cmp']], selectors: [['app-cmp']],
decls: 1, decls: 1,
@ -1340,7 +1340,7 @@ describe('providers', () => {
static ngFactoryDef = static ngFactoryDef =
() => { return new MyComponent(ɵɵdirectiveInject(InjectableWithLifeCycleHooks)); } () => { return new MyComponent(ɵɵdirectiveInject(InjectableWithLifeCycleHooks)); }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: MyComponent, type: MyComponent,
selectors: [['my-comp']], selectors: [['my-comp']],
decls: 1, decls: 1,
@ -1367,7 +1367,7 @@ describe('providers', () => {
public condition = true; public condition = true;
static ngFactoryDef = () => new App(); static ngFactoryDef = () => new App();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app-cmp']], selectors: [['app-cmp']],
decls: 2, decls: 2,
@ -1442,7 +1442,7 @@ function expectProvidersScenario(defs: {
class ViewChildComponent { class ViewChildComponent {
static ngFactoryDef = () => testComponentInjection(defs.viewChild, new ViewChildComponent()); static ngFactoryDef = () => testComponentInjection(defs.viewChild, new ViewChildComponent());
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ViewChildComponent, type: ViewChildComponent,
selectors: [['view-child']], selectors: [['view-child']],
decls: 1, decls: 1,
@ -1470,7 +1470,7 @@ function expectProvidersScenario(defs: {
static ngFactoryDef = static ngFactoryDef =
() => { return testComponentInjection(defs.contentChild, new ContentChildComponent()); } () => { return testComponentInjection(defs.contentChild, new ContentChildComponent()); }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ContentChildComponent, type: ContentChildComponent,
selectors: [['content-child']], selectors: [['content-child']],
decls: 1, decls: 1,
@ -1501,7 +1501,7 @@ function expectProvidersScenario(defs: {
class ParentComponent { class ParentComponent {
static ngFactoryDef = () => testComponentInjection(defs.parent, new ParentComponent()); static ngFactoryDef = () => testComponentInjection(defs.parent, new ParentComponent());
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ParentComponent, type: ParentComponent,
selectors: [['parent']], selectors: [['parent']],
decls: 1, decls: 1,
@ -1538,7 +1538,7 @@ function expectProvidersScenario(defs: {
class App { class App {
static ngFactoryDef = () => testComponentInjection(defs.app, new App()); static ngFactoryDef = () => testComponentInjection(defs.app, new App());
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 2, decls: 2,

View File

@ -20,7 +20,7 @@ describe('object literals', () => {
config !: {[key: string]: any}; config !: {[key: string]: any};
static ngFactoryDef = function ObjectComp_Factory() { return objectComp = new ObjectComp(); }; static ngFactoryDef = function ObjectComp_Factory() { return objectComp = new ObjectComp(); };
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ObjectComp, type: ObjectComp,
selectors: [['object-comp']], selectors: [['object-comp']],
decls: 0, decls: 0,

View File

@ -249,7 +249,7 @@ describe('query', () => {
alias?: Alias; alias?: Alias;
static ngFactoryDef = function App_Factory() { return new App(); }; static ngFactoryDef = function App_Factory() { return new App(); };
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 1, decls: 1,
@ -295,7 +295,7 @@ describe('query', () => {
service?: Service; service?: Service;
static ngFactoryDef = function App_Factory() { return new App(); }; static ngFactoryDef = function App_Factory() { return new App(); };
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: App, type: App,
selectors: [['app']], selectors: [['app']],
decls: 1, decls: 1,
@ -839,7 +839,7 @@ describe('query', () => {
class Child { class Child {
static ngFactoryDef = () => childInstance = new Child(); static ngFactoryDef = () => childInstance = new Child();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Child, type: Child,
selectors: [['child']], selectors: [['child']],
decls: 0, decls: 0,
@ -1959,7 +1959,7 @@ describe('query', () => {
texts !: QueryList<TextDirective>; texts !: QueryList<TextDirective>;
static ngFactoryDef = () => contentQueryDirective = new ContentQueryDirective(); static ngFactoryDef = () => contentQueryDirective = new ContentQueryDirective();
static ngComponentDef = ɵɵdefineDirective({ static ɵcmp = ɵɵdefineDirective({
type: ContentQueryDirective, type: ContentQueryDirective,
selectors: [['', 'content-query', '']], selectors: [['', 'content-query', '']],
contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => { contentQueries: (rf: RenderFlags, ctx: any, dirIndex: number) => {
@ -2030,7 +2030,7 @@ describe('query', () => {
texts !: QueryList<TextDirective>; texts !: QueryList<TextDirective>;
static ngFactoryDef = () => new ViewQueryComponent(); static ngFactoryDef = () => new ViewQueryComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: ViewQueryComponent, type: ViewQueryComponent,
selectors: [['view-query']], selectors: [['view-query']],
consts: [['text', 'A'], ['text', 'B'], ['text', 'C'], ['text', 'D'], ['text', 'E']], consts: [['text', 'A'], ['text', 'B'], ['text', 'C'], ['text', 'D'], ['text', 'E']],

View File

@ -375,7 +375,7 @@ export function createComponent(
return class Component { return class Component {
value: any; value: any;
static ngFactoryDef = () => new Component; static ngFactoryDef = () => new Component;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: Component, type: Component,
selectors: [[name]], selectors: [[name]],
decls: decls, decls: decls,

View File

@ -27,7 +27,7 @@ describe('renderer factory lifecycle', () => {
class SomeComponent { class SomeComponent {
static ngFactoryDef = () => new SomeComponent; static ngFactoryDef = () => new SomeComponent;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: SomeComponent, type: SomeComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['some-component']], selectors: [['some-component']],
@ -47,7 +47,7 @@ describe('renderer factory lifecycle', () => {
class SomeComponentWhichThrows { class SomeComponentWhichThrows {
static ngFactoryDef = () => new SomeComponentWhichThrows; static ngFactoryDef = () => new SomeComponentWhichThrows;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: SomeComponentWhichThrows, type: SomeComponentWhichThrows,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['some-component-with-Error']], selectors: [['some-component-with-Error']],
@ -151,7 +151,7 @@ describe('Renderer2 destruction hooks', () => {
it('should call renderer.destroy for each component destroyed', () => { it('should call renderer.destroy for each component destroyed', () => {
class SimpleComponent { class SimpleComponent {
static ngFactoryDef = () => new SimpleComponent; static ngFactoryDef = () => new SimpleComponent;
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: SimpleComponent, type: SimpleComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['simple']], selectors: [['simple']],

View File

@ -102,7 +102,7 @@ describe('ViewContainerRef', () => {
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
testDir !: TestDirective; testDir !: TestDirective;
static ngFactoryDef = () => new TestComponent(); static ngFactoryDef = () => new TestComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestComponent, type: TestComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['test-cmp']], selectors: [['test-cmp']],
@ -174,7 +174,7 @@ describe('ViewContainerRef', () => {
// TODO(issue/24571): remove '!'. // TODO(issue/24571): remove '!'.
testDir !: TestDirective; testDir !: TestDirective;
static ngFactoryDef = () => new TestComponent(); static ngFactoryDef = () => new TestComponent();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: TestComponent, type: TestComponent,
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
selectors: [['test-cmp']], selectors: [['test-cmp']],
@ -247,7 +247,7 @@ describe('ViewContainerRef', () => {
ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()); ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver());
} }
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppComp, type: AppComp,
selectors: [['app-comp']], selectors: [['app-comp']],
decls: 0, decls: 0,
@ -263,7 +263,7 @@ describe('ViewContainerRef', () => {
static ngFactoryDef = () => dynamicComp = new DynamicComp(); static ngFactoryDef = () => dynamicComp = new DynamicComp();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: DynamicComp, type: DynamicComp,
selectors: [['dynamic-comp']], selectors: [['dynamic-comp']],
decls: 0, decls: 0,
@ -368,7 +368,7 @@ describe('ViewContainerRef', () => {
static ngFactoryDef = () => static ngFactoryDef = () =>
new AppCmpt(ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver()) new AppCmpt(ɵɵdirectiveInject(ViewContainerRef as any), injectComponentFactoryResolver())
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: AppCmpt, type: AppCmpt,
selectors: [['app']], selectors: [['app']],
decls: 0, decls: 0,
@ -436,7 +436,7 @@ describe('ViewContainerRef', () => {
foo !: QueryList<any>; foo !: QueryList<any>;
static ngFactoryDef = () => dynamicComp = new DynamicCompWithViewQueries(); static ngFactoryDef = () => dynamicComp = new DynamicCompWithViewQueries();
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: DynamicCompWithViewQueries, type: DynamicCompWithViewQueries,
selectors: [['dynamic-cmpt-with-view-queries']], selectors: [['dynamic-cmpt-with-view-queries']],
decls: 2, decls: 2,
@ -485,7 +485,7 @@ describe('ViewContainerRef', () => {
static ngFactoryDef = () => static ngFactoryDef = () =>
new CompWithListenerThatDestroysItself(ɵɵdirectiveInject(ChangeDetectorRef as any)) new CompWithListenerThatDestroysItself(ɵɵdirectiveInject(ChangeDetectorRef as any))
static ngComponentDef = ɵɵdefineComponent({ static ɵcmp = ɵɵdefineComponent({
type: CompWithListenerThatDestroysItself, type: CompWithListenerThatDestroysItself,
selectors: [['comp-with-listener-and-on-destroy']], selectors: [['comp-with-listener-and-on-destroy']],
decls: 2, decls: 2,

View File

@ -9,7 +9,7 @@
import {ɵɵComponentDefWithMeta, ɵɵPipeDefWithMeta as PipeDefWithMeta} from '@angular/core'; import {ɵɵComponentDefWithMeta, ɵɵPipeDefWithMeta as PipeDefWithMeta} from '@angular/core';
declare class SuperComponent { declare class SuperComponent {
static ngComponentDef: ɵɵComponentDefWithMeta<SuperComponent, '[super]', never, {}, {}, never>; static ɵcmp: ɵɵComponentDefWithMeta<SuperComponent, '[super]', never, {}, {}, never>;
} }
declare class SubComponent extends SuperComponent { declare class SubComponent extends SuperComponent {
@ -18,7 +18,7 @@ declare class SubComponent extends SuperComponent {
// would produce type errors when the "strictFunctionTypes" option is enabled. // would produce type errors when the "strictFunctionTypes" option is enabled.
onlyInSubtype: string; onlyInSubtype: string;
static ngComponentDef: ɵɵComponentDefWithMeta<SubComponent, '[sub]', never, {}, {}, never>; static ɵcmp: ɵɵComponentDefWithMeta<SubComponent, '[sub]', never, {}, {}, never>;
} }
declare class SuperPipe { static ngPipeDef: PipeDefWithMeta<SuperPipe, 'super'>; } declare class SuperPipe { static ngPipeDef: PipeDefWithMeta<SuperPipe, 'super'>; }

View File

@ -506,7 +506,7 @@ describe('TestBed', () => {
const getAOTCompiledComponent = () => { const getAOTCompiledComponent = () => {
class ComponentClass { class ComponentClass {
static ngFactoryDef = () => new ComponentClass(); static ngFactoryDef = () => new ComponentClass();
static ngComponentDef = defineComponent({ static ɵcmp = defineComponent({
type: ComponentClass, type: ComponentClass,
selectors: [['comp']], selectors: [['comp']],
decls: 1, decls: 1,
@ -616,13 +616,13 @@ describe('TestBed', () => {
{set: {template: `<span someDirective>{{'hello' | somePipe}}</span>`}}); {set: {template: `<span someDirective>{{'hello' | somePipe}}</span>`}});
TestBed.createComponent(SomeComponent); TestBed.createComponent(SomeComponent);
const defBeforeReset = (SomeComponent as any).ngComponentDef; const defBeforeReset = (SomeComponent as any).ɵcmp;
expect(defBeforeReset.pipeDefs().length).toEqual(1); expect(defBeforeReset.pipeDefs().length).toEqual(1);
expect(defBeforeReset.directiveDefs().length).toEqual(2); // directive + component expect(defBeforeReset.directiveDefs().length).toEqual(2); // directive + component
TestBed.resetTestingModule(); TestBed.resetTestingModule();
const defAfterReset = (SomeComponent as any).ngComponentDef; const defAfterReset = (SomeComponent as any).ɵcmp;
expect(defAfterReset.pipeDefs).toBe(null); expect(defAfterReset.pipeDefs).toBe(null);
expect(defAfterReset.directiveDefs).toBe(null); expect(defAfterReset.directiveDefs).toBe(null);
}); });
@ -654,8 +654,8 @@ describe('TestBed', () => {
}); });
TestBed.createComponent(ComponentWithNoAnnotations); TestBed.createComponent(ComponentWithNoAnnotations);
expect(ComponentWithNoAnnotations.hasOwnProperty('ngComponentDef')).toBeTruthy(); expect(ComponentWithNoAnnotations.hasOwnProperty('ɵcmp')).toBeTruthy();
expect(SomeComponent.hasOwnProperty('ngComponentDef')).toBeTruthy(); expect(SomeComponent.hasOwnProperty('ɵcmp')).toBeTruthy();
expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeTruthy();
expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy();
@ -666,12 +666,12 @@ describe('TestBed', () => {
TestBed.resetTestingModule(); TestBed.resetTestingModule();
// ng defs should be removed from classes with no annotations // ng defs should be removed from classes with no annotations
expect(ComponentWithNoAnnotations.hasOwnProperty('ngComponentDef')).toBeFalsy(); expect(ComponentWithNoAnnotations.hasOwnProperty('ɵcmp')).toBeFalsy();
expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeFalsy(); expect(DirectiveWithNoAnnotations.hasOwnProperty('ngDirectiveDef')).toBeFalsy();
expect(PipeWithNoAnnotations.hasOwnProperty('ngPipeDef')).toBeFalsy(); expect(PipeWithNoAnnotations.hasOwnProperty('ngPipeDef')).toBeFalsy();
// ng defs should be preserved on super types // ng defs should be preserved on super types
expect(SomeComponent.hasOwnProperty('ngComponentDef')).toBeTruthy(); expect(SomeComponent.hasOwnProperty('ɵcmp')).toBeTruthy();
expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy(); expect(SomeDirective.hasOwnProperty('ngDirectiveDef')).toBeTruthy();
expect(SomePipe.hasOwnProperty('ngPipeDef')).toBeTruthy(); expect(SomePipe.hasOwnProperty('ngPipeDef')).toBeTruthy();
}); });
@ -719,8 +719,7 @@ describe('TestBed', () => {
} }
TestBed.configureTestingModule({imports: [MyModule]}); TestBed.configureTestingModule({imports: [MyModule]});
const originalResolver = const originalResolver = (ComponentWithProvider as any).ɵcmp.providersResolver;
(ComponentWithProvider as any).ngComponentDef.providersResolver;
TestBed.overrideProvider(SomeInjectable, {useValue: {id: 'fake'}}); TestBed.overrideProvider(SomeInjectable, {useValue: {id: 'fake'}});
const compiler = TestBed.inject(Compiler); const compiler = TestBed.inject(Compiler);
@ -728,7 +727,7 @@ describe('TestBed', () => {
compiler.compileModuleSync(MyModule); compiler.compileModuleSync(MyModule);
TestBed.resetTestingModule(); TestBed.resetTestingModule();
expect((ComponentWithProvider as any).ngComponentDef.providersResolver) expect((ComponentWithProvider as any).ɵcmp.providersResolver)
.toEqual(originalResolver); .toEqual(originalResolver);
}); });
}); });

View File

@ -328,11 +328,11 @@ export class TestBedRender3 implements TestBed {
const rootElId = `root-ng-internal-isolated-${_nextRootElementId++}`; const rootElId = `root-ng-internal-isolated-${_nextRootElementId++}`;
testComponentRenderer.insertRootElement(rootElId); testComponentRenderer.insertRootElement(rootElId);
const componentDef = (type as any).ngComponentDef; const componentDef = (type as any).ɵcmp;
if (!componentDef) { if (!componentDef) {
throw new Error( throw new Error(
`It looks like '${stringify(type)}' has not been IVY compiled - it has no 'ngComponentDef' field`); `It looks like '${stringify(type)}' has not been IVY compiled - it has no 'ɵcmp' field`);
} }
// TODO: Don't cast as `InjectionToken<boolean>`, proper type is boolean[] // TODO: Don't cast as `InjectionToken<boolean>`, proper type is boolean[]

View File

@ -7,7 +7,7 @@
*/ */
import {ResourceLoader} from '@angular/compiler'; import {ResourceLoader} from '@angular/compiler';
import {ApplicationInitStatus, COMPILER_OPTIONS, Compiler, Component, Directive, Injector, LOCALE_ID, ModuleWithComponentFactories, ModuleWithProviders, NgModule, NgModuleFactory, NgZone, Pipe, PlatformRef, Provider, Type, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵDirectiveDef as DirectiveDef, ɵNG_COMPONENT_DEF as NG_COMPONENT_DEF, ɵNG_DIRECTIVE_DEF as NG_DIRECTIVE_DEF, ɵNG_INJECTOR_DEF as NG_INJECTOR_DEF, ɵNG_MODULE_DEF as NG_MODULE_DEF, ɵNG_PIPE_DEF as NG_PIPE_DEF, ɵNgModuleFactory as R3NgModuleFactory, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵNgModuleType as NgModuleType, ɵRender3ComponentFactory as ComponentFactory, ɵRender3NgModuleRef as NgModuleRef, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵgetInjectableDef as getInjectableDef, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵsetLocaleId as setLocaleId, ɵtransitiveScopesFor as transitiveScopesFor, ɵɵInjectableDef as InjectableDef} from '@angular/core'; import {ApplicationInitStatus, COMPILER_OPTIONS, Compiler, Component, Directive, Injector, LOCALE_ID, ModuleWithComponentFactories, ModuleWithProviders, NgModule, NgModuleFactory, NgZone, Pipe, PlatformRef, Provider, Type, ɵDEFAULT_LOCALE_ID as DEFAULT_LOCALE_ID, ɵDirectiveDef as DirectiveDef, ɵNG_COMP_DEF as NG_COMP_DEF, ɵNG_DIRECTIVE_DEF as NG_DIRECTIVE_DEF, ɵNG_INJECTOR_DEF as NG_INJECTOR_DEF, ɵNG_MODULE_DEF as NG_MODULE_DEF, ɵNG_PIPE_DEF as NG_PIPE_DEF, ɵNgModuleFactory as R3NgModuleFactory, ɵNgModuleTransitiveScopes as NgModuleTransitiveScopes, ɵNgModuleType as NgModuleType, ɵRender3ComponentFactory as ComponentFactory, ɵRender3NgModuleRef as NgModuleRef, ɵcompileComponent as compileComponent, ɵcompileDirective as compileDirective, ɵcompileNgModuleDefs as compileNgModuleDefs, ɵcompilePipe as compilePipe, ɵgetInjectableDef as getInjectableDef, ɵpatchComponentDefWithScope as patchComponentDefWithScope, ɵsetLocaleId as setLocaleId, ɵtransitiveScopesFor as transitiveScopesFor, ɵɵInjectableDef as InjectableDef} from '@angular/core';
import {ModuleRegistrationMap, getRegisteredModulesState, restoreRegisteredModulesState} from '../../src/linker/ng_module_factory_registration'; import {ModuleRegistrationMap, getRegisteredModulesState, restoreRegisteredModulesState} from '../../src/linker/ng_module_factory_registration';
import {clearResolutionOfComponentResourcesQueue, isComponentDefPendingResolution, resolveComponentResources, restoreComponentResolutionQueue} from '../../src/metadata/resource_loading'; import {clearResolutionOfComponentResourcesQueue, isComponentDefPendingResolution, resolveComponentResources, restoreComponentResolutionQueue} from '../../src/metadata/resource_loading';
@ -175,7 +175,7 @@ export class R3TestBedCompiler {
} }
overrideTemplateUsingTestingModule(type: Type<any>, template: string): void { overrideTemplateUsingTestingModule(type: Type<any>, template: string): void {
const def = (type as any)[NG_COMPONENT_DEF]; const def = (type as any)[NG_COMP_DEF];
const hasStyleUrls = (): boolean => { const hasStyleUrls = (): boolean => {
const metadata = this.resolvers.component.resolve(type) !as Component; const metadata = this.resolvers.component.resolve(type) !as Component;
return !!metadata.styleUrls && metadata.styleUrls.length > 0; return !!metadata.styleUrls && metadata.styleUrls.length > 0;
@ -229,7 +229,7 @@ export class R3TestBedCompiler {
this.applyProviderOverrides(); this.applyProviderOverrides();
// Patch previously stored `styles` Component values (taken from ngComponentDef), in case these // Patch previously stored `styles` Component values (taken from ɵcmp), in case these
// Components have `styleUrls` fields defined and template override was requested. // Components have `styleUrls` fields defined and template override was requested.
this.patchComponentsWithExistingStyles(); this.patchComponentsWithExistingStyles();
@ -286,7 +286,7 @@ export class R3TestBedCompiler {
*/ */
_getComponentFactories(moduleType: NgModuleType): ComponentFactory<any>[] { _getComponentFactories(moduleType: NgModuleType): ComponentFactory<any>[] {
return maybeUnwrapFn(moduleType.ngModuleDef.declarations).reduce((factories, declaration) => { return maybeUnwrapFn(moduleType.ngModuleDef.declarations).reduce((factories, declaration) => {
const componentDef = (declaration as any).ngComponentDef; const componentDef = (declaration as any).ɵcmp;
componentDef && factories.push(new ComponentFactory(componentDef, this.testModuleRef !)); componentDef && factories.push(new ComponentFactory(componentDef, this.testModuleRef !));
return factories; return factories;
}, [] as ComponentFactory<any>[]); }, [] as ComponentFactory<any>[]);
@ -298,7 +298,7 @@ export class R3TestBedCompiler {
this.pendingComponents.forEach(declaration => { this.pendingComponents.forEach(declaration => {
needsAsyncResources = needsAsyncResources || isComponentDefPendingResolution(declaration); needsAsyncResources = needsAsyncResources || isComponentDefPendingResolution(declaration);
const metadata = this.resolvers.component.resolve(declaration) !; const metadata = this.resolvers.component.resolve(declaration) !;
this.maybeStoreNgDef(NG_COMPONENT_DEF, declaration); this.maybeStoreNgDef(NG_COMP_DEF, declaration);
compileComponent(declaration, metadata); compileComponent(declaration, metadata);
}); });
this.pendingComponents.clear(); this.pendingComponents.clear();
@ -333,9 +333,9 @@ export class R3TestBedCompiler {
this.componentToModuleScope.forEach((moduleType, componentType) => { this.componentToModuleScope.forEach((moduleType, componentType) => {
const moduleScope = getScopeOfModule(moduleType); const moduleScope = getScopeOfModule(moduleType);
this.storeFieldOfDefOnType(componentType, NG_COMPONENT_DEF, 'directiveDefs'); this.storeFieldOfDefOnType(componentType, NG_COMP_DEF, 'directiveDefs');
this.storeFieldOfDefOnType(componentType, NG_COMPONENT_DEF, 'pipeDefs'); this.storeFieldOfDefOnType(componentType, NG_COMP_DEF, 'pipeDefs');
patchComponentDefWithScope((componentType as any).ngComponentDef, moduleScope); patchComponentDefWithScope((componentType as any).ɵcmp, moduleScope);
}); });
this.componentToModuleScope.clear(); this.componentToModuleScope.clear();
@ -343,14 +343,13 @@ export class R3TestBedCompiler {
private applyProviderOverrides(): void { private applyProviderOverrides(): void {
const maybeApplyOverrides = (field: string) => (type: Type<any>) => { const maybeApplyOverrides = (field: string) => (type: Type<any>) => {
const resolver = const resolver = field === NG_COMP_DEF ? this.resolvers.component : this.resolvers.directive;
field === NG_COMPONENT_DEF ? this.resolvers.component : this.resolvers.directive;
const metadata = resolver.resolve(type) !; const metadata = resolver.resolve(type) !;
if (this.hasProviderOverrides(metadata.providers)) { if (this.hasProviderOverrides(metadata.providers)) {
this.patchDefWithProviderOverrides(type, field); this.patchDefWithProviderOverrides(type, field);
} }
}; };
this.seenComponents.forEach(maybeApplyOverrides(NG_COMPONENT_DEF)); this.seenComponents.forEach(maybeApplyOverrides(NG_COMP_DEF));
this.seenDirectives.forEach(maybeApplyOverrides(NG_DIRECTIVE_DEF)); this.seenDirectives.forEach(maybeApplyOverrides(NG_DIRECTIVE_DEF));
this.seenComponents.clear(); this.seenComponents.clear();
@ -390,7 +389,7 @@ export class R3TestBedCompiler {
private patchComponentsWithExistingStyles(): void { private patchComponentsWithExistingStyles(): void {
this.existingComponentStyles.forEach( this.existingComponentStyles.forEach(
(styles, type) => (type as any)[NG_COMPONENT_DEF].styles = styles); (styles, type) => (type as any)[NG_COMP_DEF].styles = styles);
this.existingComponentStyles.clear(); this.existingComponentStyles.clear();
} }
@ -419,10 +418,10 @@ export class R3TestBedCompiler {
private queueType(type: Type<any>, moduleType: Type<any>|TestingModuleOverride): void { private queueType(type: Type<any>, moduleType: Type<any>|TestingModuleOverride): void {
const component = this.resolvers.component.resolve(type); const component = this.resolvers.component.resolve(type);
if (component) { if (component) {
// Check whether a give Type has respective NG def (ngComponentDef) and compile if def is // Check whether a give Type has respective NG def (ɵcmp) and compile if def is
// missing. That might happen in case a class without any Angular decorators extends another // missing. That might happen in case a class without any Angular decorators extends another
// class where Component/Directive/Pipe decorator is defined. // class where Component/Directive/Pipe decorator is defined.
if (isComponentDefPendingResolution(type) || !type.hasOwnProperty(NG_COMPONENT_DEF)) { if (isComponentDefPendingResolution(type) || !type.hasOwnProperty(NG_COMP_DEF)) {
this.pendingComponents.add(type); this.pendingComponents.add(type);
} }
this.seenComponents.add(type); this.seenComponents.add(type);
@ -530,7 +529,7 @@ export class R3TestBedCompiler {
// on objects they were applied to. In this particular case, situations where this code // on objects they were applied to. In this particular case, situations where this code
// is invoked should be quite rare to cause any noticeable impact, since it's applied // is invoked should be quite rare to cause any noticeable impact, since it's applied
// only to some test cases (for example when class with no annotations extends some // only to some test cases (for example when class with no annotations extends some
// @Component) when we need to clear 'ngComponentDef' field on a given class to restore // @Component) when we need to clear 'ɵcmp' field on a given class to restore
// its original state (before applying overrides and running tests). // its original state (before applying overrides and running tests).
delete (type as any)[prop]; delete (type as any)[prop];
} else { } else {

View File

@ -781,7 +781,7 @@ const bTok = new InjectionToken<string>('b');
it('should use set up providers', fakeAsync(() => { it('should use set up providers', fakeAsync(() => {
// Keeping this component inside the test is needed to make sure it's not resolved // Keeping this component inside the test is needed to make sure it's not resolved
// prior to this test, thus having ngComponentDef and a reference in resource // prior to this test, thus having ɵcmp and a reference in resource
// resolution queue. This is done to check external resoution logic in isolation by // resolution queue. This is done to check external resoution logic in isolation by
// configuring TestBed with the necessary ResourceLoader instance. // configuring TestBed with the necessary ResourceLoader instance.
@Component({ @Component({

View File

@ -451,7 +451,7 @@
function(componentType, opts) { function(componentType, opts) {
void 0 === opts && (opts = {}); void 0 === opts && (opts = {});
var component, rendererFactory = opts.rendererFactory || domRendererFactory3, var component, rendererFactory = opts.rendererFactory || domRendererFactory3,
componentDef = componentType.ngComponentDef; componentDef = componentType.ɵcmp;
componentDef.type != componentType && (componentDef.type = componentType); componentDef.type != componentType && (componentDef.type = componentType);
var hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag), var hostNode = locateHostElement(rendererFactory, opts.host || componentDef.tag),
oldView = enterView( oldView = enterView(
@ -546,7 +546,7 @@
*/ (component); */ (component);
}(function() { }(function() {
function HelloWorld() { this.name = 'World'; } function HelloWorld() { this.name = 'World'; }
HelloWorld.ngComponentDef = function(componentDefinition) { HelloWorld.ɵcmp = function(componentDefinition) {
var type = componentDefinition.type, def = { var type = componentDefinition.type, def = {
type: type, type: type,
diPublic: null, diPublic: null,