fix(compiler): walk third party modules (angular#12453)

fixes angular#11889
fixes angular#12428

Author: vicb

modules/@angular/compiler-cli/integrationtest/src/comp_using_3rdp.ts

@@ -0,0 +1,18 @@
+/**
+ * @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
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'use-third-party',
+  template: '<third-party-comp [thirdParty]="title"></third-party-comp>' +
+      '<another-third-party-comp></another-third-party-comp>',
+})
+export class ComponentUsingThirdParty {
+  title: string = 'from 3rd party';
+}

modules/@angular/compiler-cli/integrationtest/src/messages.fi.xlf

@@ -12,6 +12,10 @@
                 <source>Welcome</source>
                 <target>tervetuloa</target>
             </trans-unit>
+            <trans-unit id="63a85808f03b8181e36a952e0fa38202c2304862" datatype="html">
+                <source>other-3rdP-component</source>
+                <target>other-3rdP-component</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

modules/@angular/compiler-cli/integrationtest/src/messages.fi.xtb

@@ -9,4 +9,5 @@
 <translationbundle>
   <translation id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4">käännä teksti</translation>
   <translation id="65cc4ab3b4c438e07c89be2b677d08369fb62da2">tervetuloa</translation>
+  <translation id="63a85808f03b8181e36a952e0fa38202c2304862">other-3rdP-component</translation>
 </translationbundle>

modules/@angular/compiler-cli/integrationtest/src/module.ts

@@ -11,9 +11,12 @@ import {FormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {MdButtonModule} from '@angular2-material/button';
 
+import {ThirdpartyModule} from '../third_party_src/module';
+
 import {MultipleComponentsMyComp, NextComp} from './a/multiple_components';
 import {AnimateCmp} from './animate';
 import {BasicComp} from './basic';
+import {ComponentUsingThirdParty} from './comp_using_3rdp';
 import {CompWithAnalyzeEntryComponentsProvider, CompWithEntryComponents} from './entry_components';
 import {CompConsumingEvents, CompUsingPipes, CompWithProviders, CompWithReferences, DirPublishingEvents, ModuleUsingCustomElements} from './features';
 import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomePipeInRootModule, SomeService, someLibModuleWithProviders} from './module_fixtures';
@@ -22,35 +25,47 @@ import {CompForChildQuery, CompWithChildQuery, CompWithDirectiveChild, Directive
 
 @NgModule({
   declarations: [
-    SomeDirectiveInRootModule,
-    SomePipeInRootModule,
     AnimateCmp,
     BasicComp,
+    CompConsumingEvents,
     CompForChildQuery,
-    CompWithEntryComponents,
+    CompUsingPipes,
+    CompUsingRootModuleDirectiveAndPipe,
     CompWithAnalyzeEntryComponentsProvider,
-    ProjectingComp,
     CompWithChildQuery,
     CompWithDirectiveChild,
+    CompWithEntryComponents,
     CompWithNgContent,
-    CompUsingRootModuleDirectiveAndPipe,
     CompWithProviders,
     CompWithReferences,
-    CompUsingPipes,
-    CompConsumingEvents,
+    DirectiveForQuery,
     DirPublishingEvents,
     MultipleComponentsMyComp,
-    DirectiveForQuery,
     NextComp,
+    ProjectingComp,
+    SomeDirectiveInRootModule,
+    SomePipeInRootModule,
+    ComponentUsingThirdParty,
   ],
   imports: [
-    BrowserModule, FormsModule, someLibModuleWithProviders(), ModuleUsingCustomElements,
-    MdButtonModule
+    BrowserModule,
+    FormsModule,
+    MdButtonModule,
+    ModuleUsingCustomElements,
+    someLibModuleWithProviders(),
+    ThirdpartyModule,
   ],
   providers: [SomeService],
   entryComponents: [
-    AnimateCmp, BasicComp, CompWithEntryComponents, CompWithAnalyzeEntryComponentsProvider,
-    ProjectingComp, CompWithChildQuery, CompUsingRootModuleDirectiveAndPipe, CompWithReferences
+    AnimateCmp,
+    BasicComp,
+    CompUsingRootModuleDirectiveAndPipe,
+    CompWithAnalyzeEntryComponentsProvider,
+    CompWithChildQuery,
+    CompWithEntryComponents,
+    CompWithReferences,
+    ProjectingComp,
+    ComponentUsingThirdParty,
   ]
 })
 export class MainModule {

modules/@angular/compiler-cli/integrationtest/test/basic_spec.ts

@@ -43,13 +43,13 @@ describe('template codegen output', () => {
   });
 
   it('should be able to create the basic component', () => {
-    var compFixture = createComponent(BasicComp);
+    const compFixture = createComponent(BasicComp);
     expect(compFixture.componentInstance).toBeTruthy();
   });
 
   it('should support ngIf', () => {
-    var compFixture = createComponent(BasicComp);
-    var debugElement = compFixture.debugElement;
+    const compFixture = createComponent(BasicComp);
+    const debugElement = compFixture.debugElement;
     expect(debugElement.children.length).toBe(3);
 
     compFixture.componentInstance.ctxBool = true;
@@ -59,8 +59,8 @@ describe('template codegen output', () => {
   });
 
   it('should support ngFor', () => {
-    var compFixture = createComponent(BasicComp);
-    var debugElement = compFixture.debugElement;
+    const compFixture = createComponent(BasicComp);
+    const debugElement = compFixture.debugElement;
     expect(debugElement.children.length).toBe(3);
 
     // test NgFor
@@ -83,11 +83,9 @@ describe('template codegen output', () => {
     });
 
     it('should support i18n for content tags', () => {
-      const compFixture = createComponent(BasicComp);
-      const debugElement = compFixture.debugElement;
-      const containerElement = <any>debugElement.nativeElement;
-      const pElement = <any>containerElement.children.find((c: any) => c.name == 'p');
-      const pText = <string>pElement.children.map((c: any) => c.data).join('').trim();
+      const containerElement = createComponent(BasicComp).nativeElement;
+      const pElement = containerElement.children.find((c: any) => c.name == 'p');
+      const pText = pElement.children.map((c: any) => c.data).join('').trim();
       expect(pText).toBe('tervetuloa');
     });
   });

modules/@angular/compiler-cli/integrationtest/test/i18n_spec.ts

@@ -34,6 +34,7 @@ const EXPECTED_XMB = `<?xml version="1.0" encoding="UTF-8" ?>
 <!ELEMENT ex (#PCDATA)>
 ]>
 <messagebundle>
+  <msg id="63a85808f03b8181e36a952e0fa38202c2304862">other-3rdP-component</msg>
   <msg id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" desc="desc" meaning="meaning">translate me</msg>
   <msg id="65cc4ab3b4c438e07c89be2b677d08369fb62da2">Welcome</msg>
 </messagebundle>
@@ -43,6 +44,10 @@ const EXPECTED_XLIFF = `<?xml version="1.0" encoding="UTF-8" ?>
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
   <file source-language="en" datatype="plaintext" original="ng2.template">
     <body>
+      <trans-unit id="63a85808f03b8181e36a952e0fa38202c2304862" datatype="html">
+        <source>other-3rdP-component</source>
+        <target/>
+      </trans-unit>
       <trans-unit id="76e1eccb1b772fa9f294ef9c146ea6d0efa8a2d4" datatype="html">
         <source>translate me</source>
         <target/>

modules/@angular/compiler-cli/integrationtest/test/ng_module_spec.ts

@@ -7,6 +7,7 @@
  */
 import './init';
 
+import {ComponentUsingThirdParty} from '../src/comp_using_3rdp';
 import {MainModule} from '../src/module';
 import {CompUsingLibModuleDirectiveAndPipe, CompUsingRootModuleDirectiveAndPipe, SOME_TOKEN, ServiceUsingLibModule, SomeLibModule, SomeService} from '../src/module_fixtures';
 
@@ -15,9 +16,9 @@ import {createComponent, createModule} from './util';
 describe('NgModule', () => {
   it('should support providers', () => {
     const moduleRef = createModule();
-    expect(moduleRef.instance instanceof MainModule).toBe(true);
-    expect(moduleRef.injector.get(MainModule) instanceof MainModule).toBe(true);
-    expect(moduleRef.injector.get(SomeService) instanceof SomeService).toBe(true);
+    expect(moduleRef.instance instanceof MainModule).toEqual(true);
+    expect(moduleRef.injector.get(MainModule) instanceof MainModule).toEqual(true);
+    expect(moduleRef.injector.get(SomeService) instanceof SomeService).toEqual(true);
   });
 
   it('should support entryComponents components', () => {
@@ -26,7 +27,7 @@ describe('NgModule', () => {
         CompUsingRootModuleDirectiveAndPipe);
     expect(cf.componentType).toBe(CompUsingRootModuleDirectiveAndPipe);
     const compRef = cf.create(moduleRef.injector);
-    expect(compRef.instance instanceof CompUsingRootModuleDirectiveAndPipe).toBe(true);
+    expect(compRef.instance instanceof CompUsingRootModuleDirectiveAndPipe).toEqual(true);
   });
 
   it('should support entryComponents via the ANALYZE_FOR_ENTRY_COMPONENTS provider and function providers in components',
@@ -42,23 +43,41 @@ describe('NgModule', () => {
        ]);
      });
 
+  describe('third-party modules', () => {
+    // https://github.com/angular/angular/issues/11889
+    it('should support third party entryComponents components', () => {
+      const fixture = createComponent(ComponentUsingThirdParty);
+      const thirdPComps = fixture.nativeElement.children;
+      expect(thirdPComps[0].children[0].children[0].data).toEqual('3rdP-component');
+      expect(thirdPComps[1].children[0].children[0].data).toEqual('other-3rdP-component');
+    });
+
+    // https://github.com/angular/angular/issues/12428
+    it('should support third party directives', () => {
+      const fixture = createComponent(ComponentUsingThirdParty);
+      const debugElement = fixture.debugElement;
+      fixture.detectChanges();
+      expect(debugElement.children[0].properties['title']).toEqual('from 3rd party');
+    });
+  });
+
   it('should support module directives and pipes', () => {
     const compFixture = createComponent(CompUsingRootModuleDirectiveAndPipe);
     compFixture.detectChanges();
 
     const debugElement = compFixture.debugElement;
-    expect(debugElement.children[0].properties['title']).toBe('transformed someValue');
+    expect(debugElement.children[0].properties['title']).toEqual('transformed someValue');
   });
 
   it('should support module directives and pipes on lib modules', () => {
     const compFixture = createComponent(CompUsingLibModuleDirectiveAndPipe);
     compFixture.detectChanges();
 
     const debugElement = compFixture.debugElement;
-    expect(debugElement.children[0].properties['title']).toBe('transformed someValue');
+    expect(debugElement.children[0].properties['title']).toEqual('transformed someValue');
 
-    expect(debugElement.injector.get(SomeLibModule) instanceof SomeLibModule).toBe(true);
+    expect(debugElement.injector.get(SomeLibModule) instanceof SomeLibModule).toEqual(true);
     expect(debugElement.injector.get(ServiceUsingLibModule) instanceof ServiceUsingLibModule)
-        .toBe(true);
+        .toEqual(true);
   });
 });

modules/@angular/compiler-cli/integrationtest/third_party_src/README.md

@@ -0,0 +1,8 @@
+This folder emulates consuming precompiled modules and components.
+It is compiled separately from the other sources under `src`
+to only generate `*.js` / `*.d.ts` / `*.metadata.json` files,
+but no `*.ngfactory.ts` files.
+
+** WARNING **
+Do not import components/directives from here directly as we want to test that ngc still compiles 
+them when they are not imported.

modules/@angular/compiler-cli/integrationtest/third_party_src/comp.ts

@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'third-party-comp',
+  template: '<div>3rdP-component</div>',
+})
+export class ThirdPartyComponent {
+}

modules/@angular/compiler-cli/integrationtest/third_party_src/directive.ts

@@ -0,0 +1,17 @@
+/**
+ * @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
+ */
+
+import {Directive, Input} from '@angular/core';
+
+@Directive({
+  selector: '[thirdParty]',
+  host: {'[title]': 'thirdParty'},
+})
+export class ThirdPartyDirective {
+  @Input() thirdParty: string;
+}

modules/@angular/compiler-cli/integrationtest/third_party_src/module.ts

@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+import {NgModule} from '@angular/core';
+
+import {ThirdPartyComponent} from './comp';
+import {ThirdPartyDirective} from './directive';
+import {AnotherThirdPartyModule} from './other_module';
+
+@NgModule({
+  declarations: [
+    ThirdPartyComponent,
+    ThirdPartyDirective,
+  ],
+  exports: [
+    AnotherThirdPartyModule,
+    ThirdPartyComponent,
+    ThirdPartyDirective,
+  ],
+  imports: [AnotherThirdPartyModule]
+})
+export class ThirdpartyModule {
+}

modules/@angular/compiler-cli/integrationtest/third_party_src/other_comp.ts

@@ -0,0 +1,16 @@
+/**
+ * @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
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'another-third-party-comp',
+  template: '<div i18n>other-3rdP-component</div>',
+})
+export class AnotherThirdpartyComponent {
+}

modules/@angular/compiler-cli/integrationtest/third_party_src/other_module.ts

@@ -0,0 +1,17 @@
+/**
+ * @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
+ */
+
+import {NgModule} from '@angular/core';
+import {AnotherThirdpartyComponent} from './other_comp';
+
+@NgModule({
+  declarations: [AnotherThirdpartyComponent],
+  exports: [AnotherThirdpartyComponent],
+})
+export class AnotherThirdPartyModule {
+}

modules/@angular/compiler-cli/integrationtest/third_party_src/tsconfig-build.json

@@ -0,0 +1,20 @@
+{
+  "angularCompilerOptions": {
+    // For TypeScript 1.8, we have to lay out generated files
+    // in the same source directory with your code.
+    "genDir": ".",
+    "debug": true
+  },
+
+  "compilerOptions": {
+    "target": "es5",
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "rootDir": "",
+    "declaration": true,
+    "lib": ["es6", "dom"],
+    "baseUrl": ".",
+    "outDir": "../node_modules/third_party"
+  }
+}