fix(ivy): support schemas at runtime (angular#28637)

Accounts for schemas in when validating properties in Ivy.

This PR resolves FW-819.

A couple of notes:
* I had to rework the test slightly, in order to have it fail when we expect it to. The one in master is passing since Ivy's validation runs during the update phase, rather than creation.
* I had to deviate from the design in FW-819 and not add an `enableSchema` instruction, because the schema is part of the `NgModule` scope, however the scope is only assigned to a component once all of the module's declarations have been resolved and some of them can be async. Instead, I opted to have the `schemas` on the component definition.

PR Close angular#28637

Author: crisbeto

packages/compiler-cli/src/ngtsc/annotations/src/ng_module.ts

@@ -134,6 +134,8 @@ export class NgModuleDecoratorHandler implements DecoratorHandler<NgModuleAnalys
       exports: exports.map(exp => this._toR3Reference(exp, valueContext, typeContext)),
       imports: imports.map(imp => this._toR3Reference(imp, valueContext, typeContext)),
       emitInline: false,
+      // TODO: to be implemented as a part of FW-1004.
+      schemas: [],
     };
 
     const providers: Expression = ngModule.has('providers') ?

packages/compiler/src/compiler_facade_interface.ts

@@ -97,6 +97,7 @@ export interface R3NgModuleMetadataFacade {
   imports: Function[];
   exports: Function[];
   emitInline: boolean;
+  schemas: {name: string}[]|null;
 }
 
 export interface R3InjectorMetadataFacade {
@@ -155,4 +156,4 @@ export interface ParseSourceSpan {
   start: any;
   end: any;
   details: any;
-}
+}

packages/compiler/src/jit_compiler_facade.ts

@@ -86,6 +86,7 @@ export class CompilerFacadeImpl implements CompilerFacade {
       imports: facade.imports.map(wrapReference),
       exports: facade.exports.map(wrapReference),
       emitInline: true,
+      schemas: facade.schemas ? facade.schemas.map(wrapReference) : null,
     };
     const res = compileNgModule(meta);
     return this.jitExpression(res.expression, angularCoreEnv, sourceMapUrl, []);

packages/compiler/src/render3/r3_module_compiler.ts

@@ -57,21 +57,27 @@ export interface R3NgModuleMetadata {
    * does not allow components to be tree-shaken, but is useful for JIT mode.
    */
   emitInline: boolean;
+
+  /**
+   * The set of schemas that declare elements to be allowed in the NgModule.
+   */
+  schemas: R3Reference[]|null;
 }
 
 /**
  * Construct an `R3NgModuleDef` for the given `R3NgModuleMetadata`.
  */
 export function compileNgModule(meta: R3NgModuleMetadata): R3NgModuleDef {
-  const {type: moduleType, bootstrap, declarations, imports, exports} = meta;
+  const {type: moduleType, bootstrap, declarations, imports, exports, schemas} = meta;
   const definitionMap = {
     type: moduleType
   } as{
     type: o.Expression,
     bootstrap: o.LiteralArrayExpr,
     declarations: o.LiteralArrayExpr,
     imports: o.LiteralArrayExpr,
-    exports: o.LiteralArrayExpr
+    exports: o.LiteralArrayExpr,
+    schemas: o.LiteralArrayExpr
   };
 
   // Only generate the keys in the metadata if the arrays have values.
@@ -91,6 +97,10 @@ export function compileNgModule(meta: R3NgModuleMetadata): R3NgModuleDef {
     definitionMap.exports = o.literalArr(exports.map(ref => ref.value));
   }
 
+  if (schemas && schemas.length) {
+    definitionMap.schemas = o.literalArr(schemas.map(ref => ref.value));
+  }
+
   const expression = o.importExpr(R3.defineNgModule).callFn([mapToMapExpression(definitionMap)]);
   const type = new o.ExpressionType(o.importExpr(R3.NgModuleDefWithMeta, [
     new o.ExpressionType(moduleType), tupleTypeOf(declarations), tupleTypeOf(imports),

packages/core/src/compiler/compiler_facade_interface.ts

@@ -97,6 +97,7 @@ export interface R3NgModuleMetadataFacade {
   imports: Function[];
   exports: Function[];
   emitInline: boolean;
+  schemas: {name: string}[]|null;
 }
 
 export interface R3InjectorMetadataFacade {
@@ -155,4 +156,4 @@ export interface ParseSourceSpan {
   start: any;
   end: any;
   details: any;
-}
+}

packages/core/src/metadata.ts

@@ -14,12 +14,14 @@
 import {Attribute} from './di';
 import {ContentChild, ContentChildren, Query, ViewChild, ViewChildren} from './metadata/di';
 import {Component, Directive, HostBinding, HostListener, Input, Output, Pipe} from './metadata/directives';
-import {DoBootstrap, ModuleWithProviders, NgModule, SchemaMetadata} from './metadata/ng_module';
+import {DoBootstrap, ModuleWithProviders, NgModule} from './metadata/ng_module';
+import {SchemaMetadata} from './metadata/schema';
 import {ViewEncapsulation} from './metadata/view';
 
 export {Attribute} from './di';
 export {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from './interface/lifecycle_hooks';
 export {ANALYZE_FOR_ENTRY_COMPONENTS, ContentChild, ContentChildDecorator, ContentChildren, ContentChildrenDecorator, Query, ViewChild, ViewChildDecorator, ViewChildren, ViewChildrenDecorator} from './metadata/di';
 export {Component, ComponentDecorator, Directive, DirectiveDecorator, HostBinding, HostListener, Input, Output, Pipe} from './metadata/directives';
-export {CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, ModuleWithProviders, NO_ERRORS_SCHEMA, NgModule, SchemaMetadata} from './metadata/ng_module';
+export {DoBootstrap, ModuleWithProviders, NgModule} from './metadata/ng_module';
+export {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata} from './metadata/schema';
 export {ViewEncapsulation} from './metadata/view';

packages/core/src/metadata/ng_module.ts

@@ -11,6 +11,7 @@ import {InjectorType, defineInjector} from '../di/interface/defs';
 import {Provider} from '../di/interface/provider';
 import {convertInjectableProviderToFactory} from '../di/util';
 import {Type} from '../interface/type';
+import {SchemaMetadata} from '../metadata/schema';
 import {NgModuleType} from '../render3';
 import {compileNgModule as render3CompileNgModule} from '../render3/jit/module';
 import {TypeDecorator, makeDecorator} from '../util/decorators';
@@ -28,6 +29,7 @@ import {TypeDecorator, makeDecorator} from '../util/decorators';
 export interface NgModuleTransitiveScopes {
   compilation: {directives: Set<any>; pipes: Set<any>;};
   exported: {directives: Set<any>; pipes: Set<any>;};
+  schemas: SchemaMetadata[]|null;
 }
 
 export type NgModuleDefWithMeta<T, Declarations, Imports, Exports> = NgModuleDef<T>;
@@ -67,6 +69,9 @@ export interface NgModuleDef<T> {
    * This should never be read directly, but accessed via `transitiveScopesFor`.
    */
   transitiveCompileScopes: NgModuleTransitiveScopes|null;
+
+  /** The set of schemas that declare elements to be allowed in the NgModule. */
+  schemas: SchemaMetadata[]|null;
 }
 
 /**
@@ -83,38 +88,6 @@ export interface ModuleWithProviders<
   providers?: Provider[];
 }
 
-/**
- * A schema definition associated with an NgModule.
- *
- * @see `@NgModule`, `CUSTOM_ELEMENTS_SCHEMA`, `NO_ERRORS_SCHEMA`
- *
- * @param name The name of a defined schema.
- *
- * @publicApi
- */
-export interface SchemaMetadata { name: string; }
-
-/**
- * Defines a schema that allows an NgModule to contain the following:
- * - Non-Angular elements named with dash case (`-`).
- * - Element properties named with dash case (`-`).
- * Dash case is the naming convention for custom elements.
- *
- * @publicApi
- */
-export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
-  name: 'custom-elements'
-};
-
-/**
- * Defines a schema that allows any property on any element.
- *
- * @publicApi
- */
-export const NO_ERRORS_SCHEMA: SchemaMetadata = {
-  name: 'no-errors-schema'
-};
-
 
 /**
  * Type of the NgModule decorator / constructor function.

packages/core/src/metadata/schema.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+
+/**
+ * A schema definition associated with an NgModule.
+ *
+ * @see `@NgModule`, `CUSTOM_ELEMENTS_SCHEMA`, `NO_ERRORS_SCHEMA`
+ *
+ * @param name The name of a defined schema.
+ *
+ * @publicApi
+ */
+export interface SchemaMetadata { name: string; }
+
+/**
+ * Defines a schema that allows an NgModule to contain the following:
+ * - Non-Angular elements named with dash case (`-`).
+ * - Element properties named with dash case (`-`).
+ * Dash case is the naming convention for custom elements.
+ *
+ * @publicApi
+ */
+export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
+  name: 'custom-elements'
+};
+
+/**
+ * Defines a schema that allows any property on any element.
+ *
+ * @publicApi
+ */
+export const NO_ERRORS_SCHEMA: SchemaMetadata = {
+  name: 'no-errors-schema'
+};

packages/core/src/render3/component.ts

@@ -122,7 +122,7 @@ export function renderComponent<T>(
 
   const renderer = rendererFactory.createRenderer(hostRNode, componentDef);
   const rootView: LView = createLView(
-      null, createTView(-1, null, 1, 0, null, null, null), rootContext, rootFlags, null, null,
+      null, createTView(-1, null, 1, 0, null, null, null, null), rootContext, rootFlags, null, null,
       rendererFactory, renderer, undefined, opts.injector || null);
 
   const oldView = enterView(rootView, null);
@@ -165,9 +165,9 @@ export function createRootComponentView(
   const tView = rootView[TVIEW];
   const tNode: TElementNode = createNodeAtIndex(0, TNodeType.Element, rNode, null, null);
   const componentView = createLView(
-      rootView,
-      getOrCreateTView(
-          def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs, def.viewQuery),
+      rootView, getOrCreateTView(
+                    def.template, def.consts, def.vars, def.directiveDefs, def.pipeDefs,
+                    def.viewQuery, def.schemas),
       null, def.onPush ? LViewFlags.Dirty : LViewFlags.CheckAlways, rootView[HEADER_OFFSET], tNode,
       rendererFactory, renderer, sanitizer);
 

packages/core/src/render3/component_ref.ts

@@ -162,8 +162,8 @@ export class ComponentFactory<T> extends viewEngine_ComponentFactory<T> {
 
     // Create the root view. Uses empty TView and ContentTemplate.
     const rootLView = createLView(
-        null, createTView(-1, null, 1, 0, null, null, null), rootContext, rootFlags, null, null,
-        rendererFactory, renderer, sanitizer, rootViewInjector);
+        null, createTView(-1, null, 1, 0, null, null, null, null), rootContext, rootFlags, null,
+        null, rendererFactory, renderer, sanitizer, rootViewInjector);
 
     // rootView is the parent when bootstrapping
     const oldLView = enterView(rootLView, null);

packages/core/src/render3/definition.ts

@@ -11,6 +11,7 @@ import '../util/ng_dev_mode';
 import {ChangeDetectionStrategy} from '../change_detection/constants';
 import {Mutable, Type} from '../interface/type';
 import {NgModuleDef} from '../metadata/ng_module';
+import {SchemaMetadata} from '../metadata/schema';
 import {ViewEncapsulation} from '../metadata/view';
 import {noSideEffects} from '../util/closure';
 import {stringify} from '../util/stringify';
@@ -234,6 +235,11 @@ export function defineComponent<T>(componentDefinition: {
    * `PipeDefs`s. The function is necessary to be able to support forward declarations.
    */
   pipes?: PipeTypesOrFactory | null;
+
+  /**
+   * The set of schemas that declare elements to be allowed in the component's template.
+   */
+  schemas?: SchemaMetadata[] | null;
 }): never {
   const type = componentDefinition.type;
   const typePrototype = type.prototype;
@@ -274,6 +280,7 @@ export function defineComponent<T>(componentDefinition: {
     styles: componentDefinition.styles || EMPTY_ARRAY,
     _: null as never,
     setInput: null,
+    schemas: componentDefinition.schemas || null,
   };
   def._ = noSideEffects(() => {
     const directiveTypes = componentDefinition.directives !;
@@ -326,6 +333,7 @@ export function defineNgModule<T>(def: {type: T} & Partial<NgModuleDef<T>>): nev
     imports: def.imports || EMPTY_ARRAY,
     exports: def.exports || EMPTY_ARRAY,
     transitiveCompileScopes: null,
+    schemas: def.schemas || null,
   };
   return res as never;
 }