fix(compiler-cli): do not error with prepocessing if component has no inline styles (#41602)

clydin · zarend · commit a5fe8b958937 · 2021-04-14T15:46:22.000-07:00
The asynchronous preprocessing check was not accounting for components that did not have any inline styles. In that case, the cache did not have an entry which then allowed the asynchronous check to run and fail the compilation. The caching during the asynchronous analysis phase now handles components without inline styles. PR Close #41602
diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts
@@ -302,6 +302,8 @@ export class ComponentDecoratorHandler implements
                              this.preanalyzeStylesCache.set(node, styles);
                            });
       }
+    } else {
+      this.preanalyzeStylesCache.set(node, null);
     }
 
     // Wait for both the template and all styleUrl resources to resolve.
diff --git a/packages/compiler-cli/src/ngtsc/annotations/test/component_spec.ts b/packages/compiler-cli/src/ngtsc/annotations/test/component_spec.ts
@@ -302,6 +302,74 @@ runInEachFileSystem(() => {
       const {analysis} = handler.analyze(TestCmp, detected.metadata);
       expect(analysis?.inlineStyles).toEqual(jasmine.arrayWithExactContents(['.xyz {}']));
     });
+
+    it('should error if canPreprocess is true and async analyze is not used', async () => {
+      const {program, options, host} = makeProgram([
+        {
+          name: _('/node_modules/@angular/core/index.d.ts'),
+          contents: 'export const Component: any;',
+        },
+        {
+          name: _('/entry.ts'),
+          contents: `
+          import {Component} from '@angular/core';
+
+          @Component({
+            template: '',
+            styles: ['.abc {}']
+          }) class TestCmp {}
+      `
+        },
+      ]);
+      const {reflectionHost, handler, resourceLoader} = setup(program, options, host);
+      resourceLoader.canPreload = true;
+      resourceLoader.canPreprocess = true;
+
+      const TestCmp = getDeclaration(program, _('/entry.ts'), 'TestCmp', isNamedClassDeclaration);
+      const detected = handler.detect(TestCmp, reflectionHost.getDecoratorsOfDeclaration(TestCmp));
+      if (detected === undefined) {
+        return fail('Failed to recognize @Component');
+      }
+
+      expect(() => handler.analyze(TestCmp, detected.metadata))
+          .toThrowError('Inline resource processing requires asynchronous preanalyze.');
+    });
+
+    it('should not error if component has no inline styles and canPreprocess is true', async () => {
+      const {program, options, host} = makeProgram([
+        {
+          name: _('/node_modules/@angular/core/index.d.ts'),
+          contents: 'export const Component: any;',
+        },
+        {
+          name: _('/entry.ts'),
+          contents: `
+          import {Component} from '@angular/core';
+
+          @Component({
+            template: '',
+          }) class TestCmp {}
+      `
+        },
+      ]);
+      const {reflectionHost, handler, resourceLoader} = setup(program, options, host);
+      resourceLoader.canPreload = true;
+      resourceLoader.canPreprocess = true;
+      resourceLoader.preprocessInline = async function(data, context) {
+        fail('preprocessInline should not have been called.');
+        return data;
+      };
+
+      const TestCmp = getDeclaration(program, _('/entry.ts'), 'TestCmp', isNamedClassDeclaration);
+      const detected = handler.detect(TestCmp, reflectionHost.getDecoratorsOfDeclaration(TestCmp));
+      if (detected === undefined) {
+        return fail('Failed to recognize @Component');
+      }
+
+      await handler.preanalyze(TestCmp, detected.metadata);
+
+      expect(() => handler.analyze(TestCmp, detected.metadata)).not.toThrow();
+    });
   });
 
   function ivyCode(code: ErrorCode): number {

Original file line number	Diff line number	Diff line change
`@@ -302,6 +302,8 @@ export class ComponentDecoratorHandler implements`
`302`	`302`	`this.preanalyzeStylesCache.set(node, styles);`
`303`	`303`	`});`
`304`	`304`	`}`
	`305`	`+ } else {`
	`306`	`+ this.preanalyzeStylesCache.set(node, null);`
`305`	`307`	`}`
`306`	`308`
`307`	`309`	`// Wait for both the template and all styleUrl resources to resolve.`