fix(ivy): emit type `type` fields (#21789)

PR Close #21789

packages/compiler/src/render3/r3_view_compiler.ts

@@ -39,6 +39,10 @@ export function compileDirective(
     outputCtx: OutputContext, directive: CompileDirectiveMetadata, reflector: CompileReflector) {
   const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
 
+  // e.g. 'type: MyDirective`
+  definitionMapValues.push(
+      {key: 'type', value: outputCtx.importExpr(directive.type.reference), quoted: false});
+
   // e.g. `factory: () => new MyApp(injectElementRef())`
   const templateFactory = createFactory(directive.type, outputCtx, reflector);
   definitionMapValues.push({key: 'factory', value: templateFactory, quoted: false});
@@ -66,7 +70,11 @@ export function compileComponent(
     reflector: CompileReflector) {
   const definitionMapValues: {key: string, quoted: boolean, value: o.Expression}[] = [];
 
-  // e.g. `tag: 'my-app'
+  // e.g. `type: MyApp`
+  definitionMapValues.push(
+      {key: 'type', value: outputCtx.importExpr(component.type.reference), quoted: false});
+
+  // e.g. `tag: 'my-app'`
   // This is optional and only included if the first selector of a component has element.
   const selector = component.selector && CssSelector.parse(component.selector);
   const firstSelector = selector && selector[0];

packages/compiler/test/render3/r3_view_compiler_spec.ts

@@ -178,6 +178,7 @@ describe('r3_view_compiler', () => {
       // ChildComponent definition should be:
       const ChildComponentDefinition = `
         static ngComponentDef = IDENT.ɵdefineComponent({
+          type: ChildComponent,
           tag: 'child',
           factory: function ChildComponent_Factory() { return new ChildComponent(); },
           template: function ChildComponent_Template(ctx: IDENT, cm: IDENT) {
@@ -190,6 +191,7 @@ describe('r3_view_compiler', () => {
       // SomeDirective definition should be:
       const SomeDirectiveDefinition = `
         static ngDirectiveDef = IDENT.ɵdefineDirective({
+          type: SomeDirective,
           factory: function SomeDirective_Factory() {return new SomeDirective(); }
         });
       `;
@@ -197,6 +199,7 @@ describe('r3_view_compiler', () => {
       // MyComponent definition should be:
       const MyComponentDefinition = `
         static ngComponentDef = IDENT.ɵdefineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: function MyComponent_Factory() { return new MyComponent(); },
           template: function MyComponent_Template(ctx: IDENT, cm: IDENT) {
@@ -253,10 +256,12 @@ describe('r3_view_compiler', () => {
 
       const IfDirectiveDefinition = `
         static ngDirectiveDef = IDENT.ɵdefineDirective({
+          type: IfDirective,
           factory: function IfDirective_Factory() { return new IfDirective(IDENT.ɵinjectTemplateRef()); }
         });`;
       const MyComponentDefinition = `
         static ngComponentDef = IDENT.ɵdefineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: function MyComponent_Factory() { return new MyComponent(); },
           template: function MyComponent_Template(ctx: IDENT, cm: IDENT) {
@@ -309,6 +314,7 @@ describe('r3_view_compiler', () => {
 
       const MyComponentDefinition = `
         static ngComponentDef = IDENT.ɵdefineComponent({
+          type: MyComponent,
           tag: 'my-component',
           factory: function MyComponent_Factory() { return new MyComponent(); },
           template: function MyComponent_Template(ctx: IDENT, cm: IDENT) {