Troubleshooting Angular 6 SSR Build Errors

When upgrading to Angular 6, you may encounter the error:

Module not found: Error: Can't resolve './dist/server/main.bundle'

This typically indicates that the server build output is not being generated as expected. Instead of a /server directory, you might find that only a /browser directory is created. Here’s how to troubleshoot and resolve this issue.

Steps to Resolve the Issue

1. Check Your angular.json Configuration: Ensure that your angular.json file is correctly set up for server-side rendering. Below is a sample configuration for the server build:

   "server": {
     "builder": "@angular-devkit/build-angular:server",
     "options": {
       "outputPath": "dist/server",
       "main": "main.server.ts",
       "tsConfig": "tsconfig.server.json"
     }
   }

   Make sure that the outputPath is set to dist/server and that the main entry point points to your server file (usually main.server.ts).

2. Verify the Existence of Server Entry File: Confirm that the main.server.ts file exists in your project root. This file is crucial for the server-side rendering process.

3. Run the Build Command: Execute the following command to build your project for server-side rendering:

   ng build --prod && ng run your-project-name:server:production

   Replace your-project-name with the actual name of your project as defined in angular.json.

4. Check for Errors in the Console: If the build fails, inspect the console output for any additional errors that may provide clues as to what went wrong.

5. Consult Angular Universal Documentation: If you continue to face issues, refer to the official Angular Universal guide for detailed instructions on setting up server-side rendering.

Conclusion

By following these steps, you should be able to resolve the issue of the missing server bundle in your Angular 6 application. Ensure that your configuration is correct and that all necessary files are in place to facilitate a successful build.