feat(ivy): error in ivy when inheriting a ctor from an undecorated base (#34460)

Angular View Engine uses global knowledge to compile the following code:

```typescript
export class Base {
  constructor(private vcr: ViewContainerRef) {}
}

@Directive({...})
export class Dir extends Base {
  // constructor inherited from base
}
```

Here, `Dir` extends `Base` and inherits its constructor. To create a `Dir`
the arguments to this inherited constructor must be obtained via dependency
injection. View Engine is able to generate a correct factory for `Dir` to do
this because via metadata it knows the arguments of `Base`'s constructor,
even if `Base` is declared in a different library.

In Ivy, DI is entirely a runtime concept. Currently `Dir` is compiled with
an ngDirectiveDef field that delegates its factory to `getInheritedFactory`.
This looks for some kind of factory function on `Base`, which comes up
empty. This case looks identical to an inheritance chain with no
constructors, which works today in Ivy.

Both of these cases will now become an error in this commit. If a decorated
class inherits from an undecorated base class, a diagnostic is produced
informing the user of the need to either explicitly declare a constructor or
to decorate the base class.

PR Close #34460
This commit is contained in:
crisbeto
2019-11-26 19:33:26 +01:00
committed by Kara Erickson
parent dcc8ff4ce7
commit cf37c003ff
9 changed files with 372 additions and 24 deletions

View File

@ -2895,6 +2895,9 @@ runInEachFileSystem(os => {
env.write(`test.ts`, `
import {Directive} from '@angular/core';
@Directive({
selector: '[base]',
})
class Base {}
@Directive({
@ -5131,6 +5134,245 @@ export const Foo = Foo__PRE_R3__;
});
});
describe('inherited directives', () => {
beforeEach(() => {
env.write('local.ts', `
import {Component, Directive, ElementRef} from '@angular/core';
export class BasePlain {}
export class BasePlainWithBlankConstructor {
constructor() {}
}
export class BasePlainWithConstructorParameters {
constructor(elementRef: ElementRef) {}
}
@Component({
selector: 'base-cmp',
template: 'BaseCmp',
})
export class BaseCmp {}
@Directive({
selector: '[base]',
})
export class BaseDir {}
`);
env.write('lib.d.ts', `
import {ɵɵComponentDefWithMeta, ɵɵDirectiveDefWithMeta, ElementRef} from '@angular/core';
export declare class BasePlain {}
export declare class BasePlainWithBlankConstructor {
constructor() {}
}
export declare class BasePlainWithConstructorParameters {
constructor(elementRef: ElementRef) {}
}
export declare class BaseCmp {
static ɵcmp: ɵɵComponentDefWithMeta<BaseCmp, "base-cmp", never, {}, {}, never>
}
export declare class BaseDir {
static ɵdir: ɵɵDirectiveDefWithMeta<BaseDir, '[base]', never, never, never, never>;
}
`);
});
it('should not error when inheriting a constructor from a decorated directive class', () => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BaseDir, BaseCmp} from './local';
@Directive({
selector: '[dir]',
})
export class Dir extends BaseDir {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends BaseCmp {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(0);
});
it('should not error when inheriting a constructor without parameters', () => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BasePlainWithBlankConstructor} from './local';
@Directive({
selector: '[dir]',
})
export class Dir extends BasePlainWithBlankConstructor {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends BasePlainWithBlankConstructor {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(0);
});
it('should not error when inheriting from a class without a constructor', () => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BasePlain} from './local';
@Directive({
selector: '[dir]',
})
export class Dir extends BasePlain {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends BasePlain {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(0);
});
it('should error when inheriting a constructor from an undecorated class', () => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BasePlainWithConstructorParameters} from './local';
@Directive({
selector: '[dir]',
})
export class Dir extends BasePlainWithConstructorParameters {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends BasePlainWithConstructorParameters {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(2);
expect(diags[0].messageText).toContain('Dir');
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
expect(diags[1].messageText).toContain('Cmp');
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
});
it('should error when inheriting a constructor from undecorated grand super class', () => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BasePlainWithConstructorParameters} from './local';
class Parent extends BasePlainWithConstructorParameters {}
@Directive({
selector: '[dir]',
})
export class Dir extends Parent {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends Parent {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(2);
expect(diags[0].messageText).toContain('Dir');
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
expect(diags[1].messageText).toContain('Cmp');
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
});
it('should error when inheriting a constructor from undecorated grand grand super class',
() => {
env.tsconfig();
env.write('test.ts', `
import {Directive, Component} from '@angular/core';
import {BasePlainWithConstructorParameters} from './local';
class GrandParent extends BasePlainWithConstructorParameters {}
class Parent extends GrandParent {}
@Directive({
selector: '[dir]',
})
export class Dir extends Parent {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends Parent {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(2);
expect(diags[0].messageText).toContain('Dir');
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
expect(diags[1].messageText).toContain('Cmp');
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
});
it('should not error when inheriting a constructor from decorated directive or component classes in a .d.ts file',
() => {
env.tsconfig();
env.write('test.ts', `
import {Component, Directive} from '@angular/core';
import {BaseDir, BaseCmp} from './lib';
@Directive({
selector: '[dir]',
})
export class Dir extends BaseDir {}
@Component({
selector: 'test-cmp',
template: 'TestCmp',
})
export class Cmp extends BaseCmp {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(0);
});
it('should error when inheriting a constructor from an undecorated class in a .d.ts file',
() => {
env.tsconfig();
env.write('test.ts', `
import {Directive} from '@angular/core';
import {BasePlainWithConstructorParameters} from './lib';
@Directive({
selector: '[dir]',
})
export class Dir extends BasePlainWithConstructorParameters {}
`);
const diags = env.driveDiagnostics();
expect(diags.length).toBe(1);
expect(diags[0].messageText).toContain('Dir');
expect(diags[0].messageText).toContain('Base');
});
});
describe('inline resources', () => {
it('should process inline <style> tags', () => {
env.write('test.ts', `