Angular 18 Webpack Builder Issue: GET / Error

[jiangbw112]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

A newly created Angular 18 project encounters an issue when the builder is set to the traditional webpack build. After successfully running ng serve, accessing the application via browser displays "error GET /". However, if changed back to the default application builder, it runs normally.

Minimal Reproduction

Angular 18 Webpack Builder Issue: GET / Error

Problem Description

A newly created Angular 18 project encounters an issue when the builder is set to the traditional webpack build. After successfully running ng serve, accessing the application via browser displays "error GET /". However, if changed back to the default application builder, it runs normally.

Steps to Reproduce

Step 1: Create Angular 18 Project

npx @angular/cli@18.2.13 new angular18app --routing=true --style=css --package-manager=npm

Step 2: Switch from Standalone to Module-based Bootstrap

Angular 18 projects created with the new CLI use standalone components by default, but the legacy browser builder requires the traditional NgModule approach.

2.1. Create app.module.ts

Create a new file src/app/app.module.ts:

2.2. Update main.ts

Replace the standalone bootstrap with module bootstrap:

Step 3: Update Builder Configuration

Modify the angular.json file to use the legacy webpack builder:

3.1. Change Builder Type

// In angular.json under projects > [project-name] > architect > build
{
  "builder": "@angular-devkit/build-angular:browser", // Changed from "application"
  "options": {
    "outputPath": "dist/angular18app",
    "index": "src/index.html",
    "main": "src/main.ts", // Changed from "browser"
    "polyfills": ["zone.js"],
    "tsConfig": "tsconfig.app.json",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.css"],
    "scripts": []
  }
}

3.2. Update Serve Configuration

// In angular.json under projects > [project-name] > architect > serve
{
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "angular18app:build:production" // Changed from "browserTarget"
    },
    "development": {
      "buildTarget": "angular18app:build:development" // Changed from "browserTarget"
    }
  }
}

Key Changes:

• "browser" → "main" (entry point property name)
• "browserTarget" → "buildTarget" (serve configuration)
• Remove any "prerender" or "ssr" options (not supported by browser builder)

Step 4: Start Development Server

ng serve

Step 5: Access Application

Open http://localhost:4200 in browser

Expected Result

✅ Application should load normally showing the default Angular welcome page

Actual Result

❌ Error GET / is displayed in the browser instead of the application

Alternative Workaround

While reverting to the modern application builder is an option, I am required to use the browser builder for this project due to specific project constraints.

Exception or Error

Your Environment

Angular CLI: 18.2.21
Node: 20.19.5
Package Manager: npm 10.8.2
OS: win32 x64

Angular: 18.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.21
@angular-devkit/build-angular   18.2.21
@angular-devkit/core            18.2.21
@angular-devkit/schematics      18.2.21
@angular/cli                    18.2.21
@schematics/angular             18.2.21
rxjs                            7.8.2
typescript                      5.5.4
zone.js                         0.14.10

Anything else relevant?

No response

[alan-agius4]

This is caused by an upstream bug streamich/memfs#1193 which was fixed and released a couple of minutes ago.