cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): introduce NgModule.schemas

Browse Source 
This allows Angular to error on unknown properties,
allowing applications that don’t use custom elements
to get better error reporting.

Part of #10043

BREAKING CHANGE:
- By default, Angular will error during parsing
  on unknown properties,
  even if they are on elements with a `-` in their name
  (aka custom elements). If you application is using
  custom elements, fill the new parameter `@NgModule.schemas`
  with the value `[CUSTOM_ELEMENTS_SCHEMA]`.

  E.g. for bootstrap:
  ```
  bootstrap(MyComponent, {schemas: [CUSTOM_ELEMENTS_SCHEMA]});
  ```
This commit is contained in:
Tobias Bosch
2016-07-25 03:02:57 -07:00
parent f02da4e91a
commit 00b726f695
21 changed files with 249 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
modules/@angular/compiler/src/compile_metadata.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
import {ChangeDetectionStrategy, SchemaMetadata, ViewEncapsulation} from '@angular/core';
import {CHANGE_DETECTION_STRATEGY_VALUES, LIFECYCLE_HOOKS_VALUES, LifecycleHooks, VIEW_ENCAPSULATION_VALUES, reflector} from '../core_private';
import {ListWrapper, StringMapWrapper} from '../src/facade/collection';
@ -18,6 +18,7 @@ import {getUrlScheme} from './url_resolver';
import {sanitizeIdentifier, splitAtColon} from './util';
// group 0: "[prop] or (event) or @trigger"
// group 1: "prop" from "[prop]"
// group 2: "event" from "(event)"
@ -625,12 +626,13 @@ export class CompileNgModuleMetadata implements CompileMetadataWithIdentifier {
importedModules: CompileNgModuleMetadata[];
exportedModules: CompileNgModuleMetadata[];
schemas: SchemaMetadata[];
transitiveModule: TransitiveCompileNgModuleMetadata;
constructor(
{type, providers, declaredDirectives, exportedDirectives, declaredPipes, exportedPipes,
entryComponents, importedModules, exportedModules, transitiveModule}: {
entryComponents, importedModules, exportedModules, schemas, transitiveModule}: {
type?: CompileTypeMetadata,
providers?:
Array<CompileProviderMetadata|CompileTypeMetadata|CompileIdentifierMetadata|any[]>,
@ -641,7 +643,8 @@ export class CompileNgModuleMetadata implements CompileMetadataWithIdentifier {
entryComponents?: CompileTypeMetadata[],
importedModules?: CompileNgModuleMetadata[],
exportedModules?: CompileNgModuleMetadata[],
transitiveModule?: TransitiveCompileNgModuleMetadata
transitiveModule?: TransitiveCompileNgModuleMetadata,
schemas?: SchemaMetadata[]
} = {}) {
this.type = type;
this.declaredDirectives = _normalizeArray(declaredDirectives);
@ -652,6 +655,7 @@ export class CompileNgModuleMetadata implements CompileMetadataWithIdentifier {
this.entryComponents = _normalizeArray(entryComponents);
this.importedModules = _normalizeArray(importedModules);
this.exportedModules = _normalizeArray(exportedModules);
this.schemas = _normalizeArray(schemas);
this.transitiveModule = transitiveModule;
}

25
modules/@angular/compiler/src/metadata_resolver.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AnimationAnimateMetadata, AnimationEntryMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationStateDeclarationMetadata, AnimationStateMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, AttributeMetadata, ChangeDetectionStrategy, ComponentMetadata, HostMetadata, Inject, InjectMetadata, Injectable, ModuleWithProviders, NgModule, NgModuleMetadata, Optional, OptionalMetadata, Provider, QueryMetadata, SelfMetadata, SkipSelfMetadata, ViewMetadata, ViewQueryMetadata, resolveForwardRef} from '@angular/core';
import {AnimationAnimateMetadata, AnimationEntryMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationStateDeclarationMetadata, AnimationStateMetadata, AnimationStateTransitionMetadata, AnimationStyleMetadata, AnimationWithStepsMetadata, AttributeMetadata, ChangeDetectionStrategy, ComponentMetadata, HostMetadata, Inject, InjectMetadata, Injectable, ModuleWithProviders, NgModule, NgModuleMetadata, Optional, OptionalMetadata, Provider, QueryMetadata, SchemaMetadata, SelfMetadata, SkipSelfMetadata, ViewMetadata, ViewQueryMetadata, resolveForwardRef} from '@angular/core';
import {Console, LIFECYCLE_HOOKS_VALUES, ReflectorReader, createProvider, isProviderLiteral, reflector} from '../core_private';
import {MapWrapper, StringMapWrapper} from '../src/facade/collection';
@ -208,6 +208,19 @@ export class CompileMetadataResolver {
const exportedModules: cpl.CompileNgModuleMetadata[] = [];
const providers: any[] = [];
const entryComponents: cpl.CompileTypeMetadata[] = [];
const schemas: SchemaMetadata[] = [];
if (meta.providers) {
providers.push(...this.getProvidersMetadata(meta.providers, entryComponents));
}
if (meta.entryComponents) {
entryComponents.push(
...flattenArray(meta.entryComponents)
.map(type => this.getTypeMetadata(type, staticTypeModuleUrl(type))));
}
if (meta.schemas) {
schemas.push(...flattenArray(meta.schemas));
}
if (meta.imports) {
flattenArray(meta.imports).forEach((importedType) => {
@ -282,15 +295,6 @@ export class CompileMetadataResolver {
});
}
if (meta.providers) {
providers.push(...this.getProvidersMetadata(meta.providers, entryComponents));
}
if (meta.entryComponents) {
entryComponents.push(
...flattenArray(meta.entryComponents)
.map(type => this.getTypeMetadata(type, staticTypeModuleUrl(type))));
}
transitiveModule.entryComponents.push(...entryComponents);
transitiveModule.providers.push(...providers);
@ -298,6 +302,7 @@ export class CompileMetadataResolver {
type: this.getTypeMetadata(moduleType, staticTypeModuleUrl(moduleType)),
providers: providers,
entryComponents: entryComponents,
schemas: schemas,
declaredDirectives: declaredDirectives,
exportedDirectives: exportedDirectives,
declaredPipes: declaredPipes,

11
modules/@angular/compiler/src/offline_compiler.ts
View File

@ -6,6 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {SchemaMetadata} from '@angular/core';
import {CompileDirectiveMetadata, CompileIdentifierMetadata, CompileNgModuleMetadata, CompilePipeMetadata, StaticSymbol, createHostComponentMeta} from './compile_metadata';
import {DirectiveNormalizer} from './directive_normalizer';
import {ListWrapper} from './facade/collection';
@ -91,7 +92,7 @@ export class OfflineCompiler {
// compile components
exportedVars.push(this._compileComponentFactory(compMeta, fileSuffix, statements));
exportedVars.push(this._compileComponent(
compMeta, dirMetas, ngModule.transitiveModule.pipes,
compMeta, dirMetas, ngModule.transitiveModule.pipes, ngModule.schemas,
stylesCompileResults.componentStylesheet, fileSuffix, statements));
});
}))
@ -120,7 +121,7 @@ export class OfflineCompiler {
targetStatements: o.Statement[]): string {
var hostMeta = createHostComponentMeta(compMeta);
var hostViewFactoryVar =
this._compileComponent(hostMeta, [compMeta], [], null, fileSuffix, targetStatements);
this._compileComponent(hostMeta, [compMeta], [], [], null, fileSuffix, targetStatements);
var compFactoryVar = _componentFactoryName(compMeta.type);
targetStatements.push(
o.variable(compFactoryVar)
@ -139,10 +140,10 @@ export class OfflineCompiler {
private _compileComponent(
compMeta: CompileDirectiveMetadata, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[], componentStyles: CompiledStylesheet, fileSuffix: string,
targetStatements: o.Statement[]): string {
pipes: CompilePipeMetadata[], schemas: SchemaMetadata[], componentStyles: CompiledStylesheet,
fileSuffix: string, targetStatements: o.Statement[]): string {
var parsedTemplate = this._templateParser.parse(
compMeta, compMeta.template.template, directives, pipes, compMeta.type.name);
compMeta, compMeta.template.template, directives, pipes, schemas, compMeta.type.name);
var stylesExpr = componentStyles ? o.variable(componentStyles.stylesVar) : o.literalArr([]);
var viewResult =
this._viewCompiler.compileComponent(compMeta, parsedTemplate, stylesExpr, pipes);

18
modules/@angular/compiler/src/runtime_compiler.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Compiler, ComponentFactory, ComponentResolver, ComponentStillLoadingError, Injectable, Injector, NgModule, NgModuleFactory, NgModuleMetadata, OptionalMetadata, Provider, SkipSelfMetadata} from '@angular/core';
import {Compiler, ComponentFactory, ComponentResolver, ComponentStillLoadingError, Injectable, Injector, NgModule, NgModuleFactory, NgModuleMetadata, OptionalMetadata, Provider, SchemaMetadata, SkipSelfMetadata} from '@angular/core';
import {Console} from '../core_private';
import {BaseException} from '../src/facade/exceptions';
@ -143,9 +143,7 @@ export class RuntimeCompiler implements Compiler {
ngModule.transitiveModule.modules.forEach((localModuleMeta) => {
localModuleMeta.declaredDirectives.forEach((dirMeta) => {
if (dirMeta.isComponent) {
templates.add(this._createCompiledTemplate(
dirMeta, localModuleMeta.transitiveModule.directives,
localModuleMeta.transitiveModule.pipes));
templates.add(this._createCompiledTemplate(dirMeta, localModuleMeta));
dirMeta.entryComponents.forEach((entryComponentType) => {
templates.add(this._createCompiledHostTemplate(entryComponentType.runtime));
});
@ -200,7 +198,7 @@ export class RuntimeCompiler implements Compiler {
assertComponent(compMeta);
var hostMeta = createHostComponentMeta(compMeta);
compiledTemplate = new CompiledTemplate(
true, compMeta.selector, compMeta.type, [compMeta], [],
true, compMeta.selector, compMeta.type, [compMeta], [], [],
this._templateNormalizer.normalizeDirective(hostMeta));
this._compiledHostTemplateCache.set(compType, compiledTemplate);
}
@ -208,13 +206,13 @@ export class RuntimeCompiler implements Compiler {
}
private _createCompiledTemplate(
compMeta: CompileDirectiveMetadata, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[]): CompiledTemplate {
compMeta: CompileDirectiveMetadata, ngModule: CompileNgModuleMetadata): CompiledTemplate {
var compiledTemplate = this._compiledTemplateCache.get(compMeta.type.runtime);
if (isBlank(compiledTemplate)) {
assertComponent(compMeta);
compiledTemplate = new CompiledTemplate(
false, compMeta.selector, compMeta.type, directives, pipes,
false, compMeta.selector, compMeta.type, ngModule.transitiveModule.directives,
ngModule.transitiveModule.pipes, ngModule.schemas,
this._templateNormalizer.normalizeDirective(compMeta));
this._compiledTemplateCache.set(compMeta.type.runtime, compiledTemplate);
}
@ -255,7 +253,7 @@ export class RuntimeCompiler implements Compiler {
(compType) => this._assertComponentLoaded(compType, false).normalizedCompMeta);
const parsedTemplate = this._templateParser.parse(
compMeta, compMeta.template.template, template.viewDirectives.concat(viewCompMetas),
template.viewPipes, compMeta.type.name);
template.viewPipes, template.schemas, compMeta.type.name);
const compileResult = this._viewCompiler.compileComponent(
compMeta, parsedTemplate, ir.variable(stylesCompileResult.componentStylesheet.stylesVar),
template.viewPipes);
@ -322,7 +320,7 @@ class CompiledTemplate {
constructor(
public isHost: boolean, selector: string, public compType: CompileIdentifierMetadata,
viewDirectivesAndComponents: CompileDirectiveMetadata[],
public viewPipes: CompilePipeMetadata[],
public viewPipes: CompilePipeMetadata[], public schemas: SchemaMetadata[],
_normalizeResult: SyncAsyncResult<CompileDirectiveMetadata>) {
viewDirectivesAndComponents.forEach((dirMeta) => {
if (dirMeta.isComponent) {

8
modules/@angular/compiler/src/schema/dom_element_schema_registry.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Injectable, SecurityContext} from '@angular/core';
import {CUSTOM_ELEMENTS_SCHEMA, Injectable, SchemaMetadata, SecurityContext} from '@angular/core';
import {StringMapWrapper} from '../facade/collection';
import {isPresent} from '../facade/lang';
@ -270,7 +270,9 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
});
}
hasProperty(tagName: string, propName: string): boolean {
hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean {
const hasCustomElementSchema =
schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name);
if (tagName.indexOf('-') !== -1) {
if (tagName === 'ng-container' || tagName === 'ng-content') {
return false;
@ -278,7 +280,7 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
// Can't tell now as we don't know which properties a custom element will get
// once it is instantiated
return true;
return hasCustomElementSchema;
} else {
var elementProperties = this.schema[tagName.toLowerCase()];
if (!isPresent(elementProperties)) {

4
modules/@angular/compiler/src/schema/element_schema_registry.ts
View File

@ -6,8 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {SchemaMetadata} from '@angular/core';
export abstract class ElementSchemaRegistry {
abstract hasProperty(tagName: string, propName: string): boolean;
abstract hasProperty(tagName: string, propName: string, schemaMetas: SchemaMetadata[]): boolean;
abstract securityContext(tagName: string, propName: string): any;
abstract getMappedPropName(propName: string): string;
}

28
modules/@angular/compiler/src/template_parser.ts
View File

@ -6,8 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Inject, Injectable, OpaqueToken, Optional, SecurityContext} from '@angular/core';
import {Inject, Injectable, OpaqueToken, Optional, SchemaMetadata, SecurityContext} from '@angular/core';
import {Console, MAX_INTERPOLATION_VALUES} from '../core_private';
import {ListWrapper, StringMapWrapper, SetWrapper,} from '../src/facade/collection';
import {RegExpWrapper, isPresent, StringWrapper, isBlank} from '../src/facade/lang';
import {BaseException} from '../src/facade/exceptions';
@ -83,8 +85,8 @@ export class TemplateParser {
parse(
component: CompileDirectiveMetadata, template: string, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[], templateUrl: string): TemplateAst[] {
const result = this.tryParse(component, template, directives, pipes, templateUrl);
pipes: CompilePipeMetadata[], schemas: SchemaMetadata[], templateUrl: string): TemplateAst[] {
const result = this.tryParse(component, template, directives, pipes, schemas, templateUrl);
const warnings = result.errors.filter(error => error.level === ParseErrorLevel.WARNING);
const errors = result.errors.filter(error => error.level === ParseErrorLevel.FATAL);
if (warnings.length > 0) {
@ -100,7 +102,8 @@ export class TemplateParser {
tryParse(
component: CompileDirectiveMetadata, template: string, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[], templateUrl: string): TemplateParseResult {
pipes: CompilePipeMetadata[], schemas: SchemaMetadata[],
templateUrl: string): TemplateParseResult {
let interpolationConfig: any;
if (component.template) {
interpolationConfig = InterpolationConfig.fromArray(component.template.interpolation);
@ -123,7 +126,8 @@ export class TemplateParser {
const providerViewContext =
new ProviderViewContext(component, htmlAstWithErrors.rootNodes[0].sourceSpan);
const parseVisitor = new TemplateParseVisitor(
providerViewContext, uniqDirectives, uniqPipes, this._exprParser, this._schemaRegistry);
providerViewContext, uniqDirectives, uniqPipes, schemas, this._exprParser,
this._schemaRegistry);
result = htmlVisitAll(parseVisitor, htmlAstWithErrors.rootNodes, EMPTY_ELEMENT_CONTEXT);
errors.push(...parseVisitor.errors, ...providerViewContext.errors);
@ -175,7 +179,7 @@ class TemplateParseVisitor implements HtmlAstVisitor {
constructor(
public providerViewContext: ProviderViewContext, directives: CompileDirectiveMetadata[],
pipes: CompilePipeMetadata[], private _exprParser: Parser,
pipes: CompilePipeMetadata[], private _schemas: SchemaMetadata[], private _exprParser: Parser,
private _schemaRegistry: ElementSchemaRegistry) {
this.selectorMatcher = new SelectorMatcher();
@ -801,10 +805,14 @@ class TemplateParseVisitor implements HtmlAstVisitor {
boundPropertyName = this._schemaRegistry.getMappedPropName(partValue);
securityContext = this._schemaRegistry.securityContext(elementName, boundPropertyName);
bindingType = PropertyBindingType.Property;
if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName)) {
this._reportError(
`Can't bind to '${boundPropertyName}' since it isn't a known native property`,
sourceSpan);
if (!this._schemaRegistry.hasProperty(elementName, boundPropertyName, this._schemas)) {
let errorMsg =
`Can't bind to '${boundPropertyName}' since it isn't a known native property`;
if (elementName.indexOf('-') !== -1) {
errorMsg +=
`. To ignore this error on custom elements, add the "CUSTOM_ELEMENTS_SCHEMA" to the NgModule of this component`;
}
this._reportError(errorMsg, sourceSpan);
}
}
} else {