feat(compiler-cli): report error if undecorated class with Angular features is discovered (#36921)
Previously in v9, we deprecated the pattern of undecorated base classes that rely on Angular features. We ran a migration for this in version 9 and will run the same on in version 10 again. To ensure that projects do not regress and start using the unsupported pattern again, we report an error in ngtsc if such undecorated classes are discovered. We keep the compatibility code enabled in ngcc so that libraries can be still be consumed, even if they have not been migrated yet. Resolves FW-2130. PR Close #36921
This commit is contained in:

committed by
Alex Rickabaugh

parent
c6ecdc9a81
commit
4c92cf43cf
@ -545,6 +545,7 @@ runInEachFileSystem(os => {
|
||||
Output as AngularOutput
|
||||
} from '@angular/core';
|
||||
|
||||
@AngularDirective()
|
||||
export class TestBase {
|
||||
@AngularInput() input: any;
|
||||
@AngularOutput() output: any;
|
||||
@ -884,10 +885,11 @@ runInEachFileSystem(os => {
|
||||
expect(jsContents).toContain('background-color: blue');
|
||||
});
|
||||
|
||||
it('should include generic type for undecorated class declarations', () => {
|
||||
it('should include generic type in directive definition', () => {
|
||||
env.write('test.ts', `
|
||||
import {Component, Input, NgModule} from '@angular/core';
|
||||
import {Directive, Input, NgModule} from '@angular/core';
|
||||
|
||||
@Directive()
|
||||
export class TestBase {
|
||||
@Input() input: any;
|
||||
}
|
||||
@ -905,6 +907,76 @@ runInEachFileSystem(os => {
|
||||
`static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestBase, never, never, { "input": "input"; }, {}, never>;`);
|
||||
});
|
||||
|
||||
describe('undecorated classes using Angular features', () => {
|
||||
it('should error if @Input has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('Input'));
|
||||
it('should error if @Output has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('Output'));
|
||||
it('should error if @ViewChild has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('ViewChild'));
|
||||
it('should error if @ViewChildren has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('ViewChildren'));
|
||||
it('should error if @ContentChild has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('ContentChildren'));
|
||||
it('should error if @HostBinding has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('HostBinding'));
|
||||
it('should error if @HostListener has been discovered',
|
||||
() => assertErrorUndecoratedClassWithField('HostListener'));
|
||||
|
||||
it(`should error if ngOnChanges lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngOnChanges'));
|
||||
it(`should error if ngOnInit lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngOnInit'));
|
||||
it(`should error if ngOnDestroy lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngOnDestroy'));
|
||||
it(`should error if ngDoCheck lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngDoCheck'));
|
||||
it(`should error if ngAfterViewInit lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngAfterViewInit'));
|
||||
it(`should error if ngAfterViewChecked lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngAfterViewChecked'));
|
||||
it(`should error if ngAfterContentInit lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngAfterContentInit'));
|
||||
it(`should error if ngAfterContentChecked lifecycle hook has been discovered`,
|
||||
() => assertErrorUndecoratedClassWithLifecycleHook('ngAfterContentChecked'));
|
||||
|
||||
function assertErrorUndecoratedClassWithField(fieldDecoratorName: string) {
|
||||
env.write('test.ts', `
|
||||
import {Component, ${fieldDecoratorName}, NgModule} from '@angular/core';
|
||||
|
||||
export class SomeBaseClass {
|
||||
@${fieldDecoratorName}() someMember: any;
|
||||
}
|
||||
`);
|
||||
|
||||
const errors = env.driveDiagnostics();
|
||||
expect(errors.length).toBe(1);
|
||||
expect(trim(errors[0].messageText as string))
|
||||
.toContain(
|
||||
'Class is using Angular features but is not decorated. Please add an explicit ' +
|
||||
'Angular decorator.');
|
||||
}
|
||||
|
||||
function assertErrorUndecoratedClassWithLifecycleHook(lifecycleName: string) {
|
||||
env.write('test.ts', `
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
|
||||
export class SomeBaseClass {
|
||||
${lifecycleName}() {
|
||||
// empty
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
const errors = env.driveDiagnostics();
|
||||
expect(errors.length).toBe(1);
|
||||
expect(trim(errors[0].messageText as string))
|
||||
.toContain(
|
||||
'Class is using Angular features but is not decorated. Please add an explicit ' +
|
||||
'Angular decorator.');
|
||||
}
|
||||
});
|
||||
|
||||
it('should compile NgModules without errors', () => {
|
||||
env.write('test.ts', `
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
|
Reference in New Issue
Block a user