Write a production smoke test for Angular deep links and asset fallbacks

Create a deployment smoke test for an Angular app hosted at APP_URL. Verify a direct nested route renders and survives reload, its JavaScript assets return JavaScript rather than the SPA HTML fallback, a missing static asset remains 404, and an unknown API route is not rewritten to index.html. The test must run against the deployed host, not ng serve.

GET /orders/123          -> 200 HTML; Angular renders Order 123
reload /orders/123       -> still renders Order 123
GET emitted main chunk   -> 200 JavaScript content type
GET /assets/missing.svg  -> 404, not index.html
GET /api/does-not-exist  -> API 404, not index.html

• Use a configurable deployed base URL.
• Start with a fresh browser context and direct navigation.
• Check response status and content type for assets and API paths.
• Do not assume every 200 response is correct.
• Keep authentication setup explicit for protected routes.

1. Navigate directly to a representative nested route and assert page identity.
2. Reload and assert the same route and content remain valid.
3. Read one emitted script URL from the document and request it directly.
4. Request missing asset and API paths and verify genuine error behavior.
5. Run the smoke test after deployment before broad traffic exposure.

import {expect, test} from '@playwright/test';

const baseURL = process.env.APP_URL!;

test('deployed Angular routing and fallbacks are correct', async ({page, request}) => {
  const direct = await page.goto(`${baseURL}/orders/123`);
  expect(direct?.status()).toBe(200);
  await expect(page.getByRole('heading', {name: /order 123/i})).toBeVisible();

  await page.reload();
  await expect(page).toHaveURL(/\/orders\/123$/);
  await expect(page.getByRole('heading', {name: /order 123/i})).toBeVisible();

  const scriptPath = await page.locator('script[src]').evaluateAll((scripts, appOrigin) =>
    scripts
      .map(script => script.getAttribute('src'))
      .find(src => src && new URL(src, appOrigin).origin === new URL(appOrigin).origin),
    baseURL,
  );
  expect(scriptPath).toBeTruthy();
  const script = await request.get(new URL(scriptPath!, baseURL).toString());
  expect(script.status()).toBe(200);
  expect(script.headers()['content-type']).toMatch(/javascript/);

  const missingAsset = await request.get(`${baseURL}/assets/missing-smoke.svg`);
  expect(missingAsset.status()).toBe(404);

  const missingApi = await request.get(`${baseURL}/api/does-not-exist`);
  expect(missingApi.status()).toBe(404);
  expect(missingApi.headers()['content-type']).not.toMatch(/text\/html/);
});

The smoke test performs a constant number of browser navigations and HTTP requests; its duration is dominated by deployed network and application startup time.

• A subpath deployment must construct URLs from the configured base and verify the emitted base href.
• A protected route needs stable test authentication without weakening production authorization.
• A CDN can cache HTML and assets differently from the origin, so the test targets the public host.
• An API may use a structured 404 content type other than JSON, but it must not receive SPA HTML.

• Misconfigure the server to rewrite missing assets and verify the content-type assertion fails.
• Remove the SPA fallback and verify direct navigation fails while client navigation still works.
• Run against the public CDN and the origin to localize a caching mismatch.
• Deploy below a subpath and verify script URLs resolve under the intended base.

• Testing only client-side clicks misses direct-entry server behavior.
• Accepting any 200 lets HTML masquerade as JavaScript or API data.
• Running only against ng serve says nothing about CDN rewrite rules.
• Rewriting every 404 to index.html hides broken assets and API routes.