refactor: support resolving ngcc from APF v13 output (#1523)

Angular v13 version comes with the APF v13
output where all FW packages are strict ESM. This required some
changes in the ngcc lookup logic to properly work with strict ESM
and the new `package.json` `exports` field.

This is needed in v12 because a workspace may include projects that are
using different versions of Angular. Because we resolve ngcc from the
node modules of the application code, we need to support both formats.

Author: atscott

.circleci/config.yml

@@ -5,14 +5,17 @@ jobs:
   build-and-test:
     executor:
       name: node/default
-      tag: '12.18'
+      tag: '12.20'
     steps:
       - checkout
       - node/install-packages:
           pkg-manager: yarn
       - node/install-packages:
           app-dir: integration/project
           pkg-manager: yarn
+      - node/install-packages:
+          app-dir: integration/apf_project
+          pkg-manager: yarn
       - node/install-packages:
           app-dir: integration/workspace
           pkg-manager: yarn

integration/apf_project/app/app.component.ts

@@ -0,0 +1,11 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `<h1>Hello {{name}}</h1>`,
+})
+export class AppComponent {
+  name = 'Angular';
+  @Input() appInput = '';
+  @Output() appOutput = new EventEmitter<string>();
+}

integration/apf_project/app/app.module.ts

@@ -0,0 +1,17 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+import {FooComponent} from './foo.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    AppComponent,
+    FooComponent,
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

integration/apf_project/app/foo.component.html

@@ -0,0 +1,4 @@
+{{title | uppercase}}
+<span class="subtitle">
+    subtitle
+</span>

integration/apf_project/app/foo.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  templateUrl: 'foo.component.html',
+})
+export class FooComponent {
+  title = 'Foo Component';
+}

integration/apf_project/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "angular-ls-integration-test-project",
+  "private": true,
+  "dependencies": {
+    "@angular/common": "13.0.0-next.15",
+    "@angular/compiler": "13.0.0-next.15",
+    "@angular/compiler-cli": "13.0.0-next.15",
+    "@angular/core": "13.0.0-next.15",
+    "rxjs": "6.6.7",
+    "zone.js": "0.11.4"
+  }
+}

integration/apf_project/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "angularCompilerOptions": {
+    "strictTemplates": true,
+    "strictInjectionParameters": true
+  }
+}