fix(webpack-dev-server): handle polyfills array for upcoming angular 15 change

npm/webpack-dev-server/cypress/e2e/angular.cy.ts

@@ -2,7 +2,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_REACT: ProjectFixtureDir[] = ['angular-13', 'angular-14']
+const WEBPACK_REACT: ProjectFixtureDir[] = ['angular-13', 'angular-14', 'angular-15']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

npm/webpack-dev-server/src/helpers/angularHandler.ts

@@ -124,9 +124,11 @@ export async function generateTsConfig (devServerConfig: AngularWebpackDevServer
   }
 
   if (buildOptions.polyfills) {
-    const polyfills = getProjectFilePath(buildOptions.polyfills)
+    const polyfills = Array.isArray(buildOptions.polyfills)
+      ? buildOptions.polyfills.filter((p: string) => devServerConfig.options?.projectConfig.sourceRoot && p.startsWith(devServerConfig.options?.projectConfig.sourceRoot))
+      : [buildOptions.polyfills]
 
-    includePaths.push(polyfills)
+    includePaths.push(...polyfills.map((p: string) => getProjectFilePath(p)))
   }
 
   const cypressTypes = getProjectFilePath('node_modules', 'cypress', 'types', 'index.d.ts')
@@ -202,7 +204,11 @@ export async function getAngularJson (projectRoot: string): Promise<AngularJson>
 
 function createFakeContext (projectRoot: string, defaultProjectConfig: Cypress.AngularDevServerProjectConfig) {
   const logger = {
-    createChild: () => ({}),
+    createChild: () => {
+      return {
+        warn: () => {},
+      }
+    },
   }
 
   const context = {

npm/webpack-dev-server/test/handlers/angularHandler.spec.ts

@@ -77,6 +77,33 @@ describe('angularHandler', function () {
     expectLoadsAngularBuildOptions(buildOptions)
   })
 
+  it('sources the config from angular-15', async () => {
+    const projectRoot = await scaffoldMigrationProject('angular-15')
+
+    process.chdir(projectRoot)
+
+    const devServerConfig = {
+      cypressConfig: {
+        projectRoot,
+        specPattern: 'src/**/*.cy.ts',
+      } as Cypress.PluginConfigOptions,
+      framework: 'angular',
+    } as AngularWebpackDevServerConfig
+
+    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
+
+    expect(webpackConfig).to.exist
+    expect((webpackConfig?.entry as any).main).to.be.undefined
+    expect(sourceWebpackModulesResult.framework?.importPath).to.include(path.join('@angular-devkit', 'build-angular'))
+
+    const { buildOptions } = await expectNormalizeProjectConfig(projectRoot)
+
+    await expectLoadsAngularJson(projectRoot)
+    await expectLoadsAngularCLiModules(projectRoot)
+    await expectGeneratesTsConfig(devServerConfig, buildOptions)
+    expectLoadsAngularBuildOptions(buildOptions)
+  })
+
   it('allows custom project config', async () => {
     const customProjectConfig = {
       root: '',

system-tests/projects/angular-15/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "angular-15",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "^15.0.0-next.4",
+    "@angular/common": "^15.0.0-next.4",
+    "@angular/compiler": "^15.0.0-next.4",
+    "@angular/core": "^15.0.0-next.4",
+    "@angular/forms": "^15.0.0-next.4",
+    "@angular/platform-browser": "^15.0.0-next.4",
+    "@angular/platform-browser-dynamic": "^15.0.0-next.4",
+    "@angular/router": "^15.0.0-next.4",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.0-next.3",
+    "@angular/cli": "~15.0.0-next.3",
+    "@angular/compiler-cli": "^15.0.0-next.4",
+    "typescript": "~4.8.4"
+  },
+  "projectFixtureDirectory": "angular"
+}

system-tests/projects/angular-15/src/app/components/standalone.component.cy.ts

@@ -0,0 +1,21 @@
+import { StandaloneComponent } from './standalone.component'
+
+describe('StandaloneComponent', () => {
+  it('can mount a standalone component', () => {
+    cy.mount(StandaloneComponent, {
+      componentProperties: {
+        name: 'Angular',
+      },
+    })
+
+    cy.get('h1').contains('Hello Angular')
+  })
+
+  it('can mount a standalone component using template', () => {
+    cy.mount('<app-standalone name="Angular"></app-standalone>', {
+      imports: [StandaloneComponent],
+    })
+
+    cy.get('h1').contains('Hello Angular')
+  })
+})

system-tests/projects/angular-15/src/app/components/standalone.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'app-standalone',
+  template: `<h1>Hello {{ name }}</h1>`,
+})
+export class StandaloneComponent {
+  @Input() name!: string
+}