This code provides a function to build an Angular application for server-side deployment using Webpack, incorporating project-specific configurations and gulp helpers. It automates the compilation process and returns the compiled server-side JavaScript code.

Run example

npm run import -- "Compile the project using webpack"

Compile the project using webpack

// source https://github.com/christianalfoni/webpack-bin/issues/106
function webpackAngularProject(project) {
    // set up project path
    var previous = process.cwd();
    process.chdir(project);
    module.paths.unshift(project + '/node_modules');

    var webpack = require('webpack');
    var webpackConfig = require(path.join(project, 'webpack.config.js'));
    var gulp = require(path.join(project, 'config', 'gulp-helpers.js'));
    var settings = gulp.loadSettings(require(path.join(project, 'config', 'build-config.json')));
    var config = webpackConfig({
        env: 'prod',
        platform: 'server'
    }, gulp.root, settings);
    var compiler = webpack(config);

    // TODO: do we need this since it is already mocked in angular-cli
    //mockTypescriptFs = eval("'use strict';" + r[0].code);
    //mockTypescriptFs(project, data);
    //compiler.inputFileSystem = memfs;
    //compiler.outputFileSystem = memfs;
    //compiler.resolvers.normal.fileSystem = memfs;
    //compiler.resolvers.context.fileSystem = memfs;

    return new Promise((resolve, reject) => {
        compiler.run(function (err, stats) {
            process.chdir(previous);
            if (err) return reject(err);
            resolve(stats.compilation.assets['server.js'].source());
        });
    });
};
webpackAngularProject;

import { promises as fs } from 'fs';
import path from 'path';
import webpack from 'webpack';
import { argv } from 'yargs';

/**
 * Compiles an Angular project using Webpack.
 * @param {string} project - The path to the project's root directory.
 * @returns {Promise<string>} - A promise that resolves with the compiled server.js code.
 */
async function webpackAngularProject(project) {
    try {
        // Set up project path
        const previousDir = process.cwd();
        process.chdir(project);
        module.paths.unshift(path.join(project, 'node_modules'));

        // Load project config
        const webpackConfig = await import(path.join(project, 'webpack.config.js'));
        const gulpConfig = await import(path.join(project, 'config', 'gulp-helpers.js'));
        const buildConfig = await import(path.join(project, 'config', 'build-config.json'));

        // Create Webpack config
        const gulp = await gulpConfig();
        const settings = await gulp.loadSettings(buildConfig);
        const config = await webpackConfig({ env: 'prod', platform:'server' }, gulp.root, settings);

        // Create Webpack compiler
        const compiler = webpack(config);

        // Run Webpack
        const stats = await new Promise((resolve, reject) => {
            compiler.run((err, stats) => {
                if (err) return reject(err);
                resolve(stats);
            });
        });

        // Return compiled server.js code
        const serverJsCode = stats.compilation.assets['server.js'].source();
        process.chdir(previousDir);
        return serverJsCode;
    } catch (error) {
        process.chdir(previousDir);
        throw error;
    }
}

export default webpackAngularProject;

This code defines a function webpackAngularProject that builds an Angular application for the server environment using Webpack.

Here's a breakdown:

1. Project Setup:

   • It changes the current working directory to the provided project path.
   • It modifies the module.paths to include the project's node_modules directory.

2. Dependencies:

   • It requires webpack, webpack.config.js, gulp-helpers.js, and build-config.json from the project.

3. Configuration:

   • It loads the build-config.json settings and uses them to configure the webpack.config.js for production and server environments.

4. Webpack Compilation:

   • It creates a Webpack compiler instance using the configured settings.
   • Commented-out Code: There's commented-out code that seems to be related to mocking the TypeScript compiler and filesystem, but it's currently unused.

5. Build Execution:

   • It runs the Webpack compiler asynchronously, returning a promise that resolves with the source code of the compiled server.js file.

6. Cleanup:

   • After the compilation is complete, it restores the previous working directory.

In essence, this code automates the process of building an Angular application for the server using Webpack, leveraging project-specific configurations and gulp helpers.