fix(angular): set webpack base so angular assets load (#24106)

* fix(angular): set webpack base so angular assets load

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -48,7 +48,8 @@ export function makeDefaultWebpackConfig (
       new HtmlWebpackPlugin({
         template: indexHtmlFile,
         // Angular generates all of it's scripts with <script type="module">. Live-reloading breaks without this option.
-        ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module' } : {}),
+        // We need to manually set the base here to `/__cypress/src/` so that static assets load with our proxy
+        ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module', base: '/__cypress/src/' } : {}),
       }),
     ],
     devtool: 'inline-source-map',

system-tests/project-fixtures/angular/src/app/components/logo.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'app-logo',
+  template: `<img src="assets/cypress-logo-light.png" />`
+})
+export class LogoComponent {}

system-tests/project-fixtures/angular/src/app/mount.cy.ts

@@ -9,6 +9,7 @@ import { createOutputSpy } from 'cypress/angular';
 import { EventEmitter, Component } from '@angular/core';
 import { ProjectionComponent } from "./components/projection.component";
 import { LifecycleComponent } from "./components/lifecycle.component";
+import { LogoComponent } from "./components/logo.component";
 
 @Component({
   template: `<app-projection>Hello World</app-projection>`
@@ -218,6 +219,11 @@ describe("angular mount", () => {
     cy.get('p').should('have.text', 'Hi . ngOnInit fired: true and ngOnChanges fired: false and conditionalName: false')
   })
 
+  it('can load static assets', () => {
+    cy.mount(LogoComponent)
+    cy.get('img').should('be.visible').and('have.prop', 'naturalWidth').should('be.greaterThan', 0)
+  })
+
 
   describe("teardown", () => {
     beforeEach(() => {