Changing angular.json builder from browser to application results in a 404 error [duplicate]: Unraveling the Mystery

Are you stuck with a pesky 404 error after changing the builder in your angular.json file from browser to application? Don’t worry, you’re not alone! This article will guide you through the reasons behind this error and provide you with a step-by-step solution to get your Angular application up and running smoothly.

What’s the difference between browser and application builders?

Before we dive into the solution, let’s quickly understand the difference between the browser and application builders in Angular.

The browser builder is used for development and testing purposes. It creates a development build of your application that can be served directly from the browser. This build is optimized for debugging and hot module replacement (HMR).

On the other hand, the application builder is used for production builds. It creates a production-ready build of your application that can be deployed to a server or hosting platform. This build is optimized for performance and scalability.

The Problem: 404 Error after changing builder from browser to application

When you change the builder from browser to application, Angular creates a production-ready build of your application. However, this build is not served directly by the browser. Instead, it’s expected to be served by a server. If you’re not using a server or haven’t configured it correctly, you’ll encounter a 404 error.

The 404 error occurs because the browser is trying to access the application at a URL that doesn’t exist. For example, if your application is deployed at example.com, the browser will try to access example.com/index.html which doesn’t exist.

Solution: Configure your Server to Serve the Application

To solve the 404 error, you need to configure your server to serve the application. Here are the steps to follow:

Step 1: Create a new server configuration file

Create a new file called server.js in the root of your project with the following code:

const express = require('express');
const app = express();
const port = 4200;

app.use(express.static('dist'));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

This code creates an Express.js server that serves the application from the dist folder. The app.get('/*', ...) route ensures that any URL that doesn’t match a static file is redirected to the index.html file.

Step 2: Update the angular.json file

Update the angular.json file to include the new server configuration:

{
  "projects": {
    "your-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "outputPath": "dist",
            "baseHref": "/"
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-app:build"
          },
          "configurations": {
            "production": {
              "builder": "@angular-devkit/build-angular:prod",
              "options": {
                "outputPath": "dist",
                "index": "src/index.html",
                "baseHref": "/"
              },
              "server": {
                "type": "node",
                "script": "server.js"
              }
            }
          }
        }
      }
    }
  }
}

This code updates the serve configuration to use the new server.js file.

Step 3: Run the Application

Run the application using the following command:

ng serve --configuration=production

This command builds the application using the production configuration and serves it using the new server configuration.

Common Pitfalls to Avoid

When configuring your server, make sure to avoid the following common pitfalls:

• Not updating the baseHref in angular.json: Failing to update the baseHref in angular.json can cause the application to serve from the wrong URL.
• Not configuring the server to serve the correct folder: Make sure the server is configured to serve the correct folder (in this case, dist).
• Not redirecting unknown URLs to index.html: Failing to redirect unknown URLs to index.html can cause the application to throw a 404 error.

Conclusion

Changing the builder from browser to application in angular.json can be a bit tricky, but with the right configuration, you can get your application up and running smoothly. By following the steps outlined in this article, you should be able to resolve the 404 error and deploy your application to a server or hosting platform.

Remember to double-check your configuration and avoid common pitfalls to ensure a seamless deployment experience.

Builder	Description
Browser	Used for development and testing purposes. Creates a development build of the application that can be served directly from the browser.
Application	Used for production builds. Creates a production-ready build of the application that can be deployed to a server or hosting platform.

By understanding the differences between the browser and application builders, you can make informed decisions about your application’s build and deployment process.

If you have any further questions or need additional assistance, feel free to ask in the comments below!

Frequently Asked Question

Are you struggling with a 404 error when changing the angular.json builder from browser to application? Don’t worry, we’ve got you covered! Check out these frequently asked questions to resolve your issue.