Setting up Angular with Slim 4

Hi,

I’m wanting to set up Angular with my Slim 4 project so I’m looking for suggestions on how best to set this up. It seems quite ridiculous to create the Angular project within my public folder so I’m thinking of adding it to the root directory of my Slim4 project and changing the output path in angular.json. So instead of:

"outputPath": "dist/my-app",

The output path would point to my public folder, something like this:

"outputPath": "../public",

All the necessary JS/CSS would be present in the public folder and as the index.html and index.php files were also present my Slim 4 api can be consumed.

Perhaps also use Twig to render the template the index.html page which would just be a copy of index.html

return $this->twig->render($response, 'index.twig', $viewData);

Any thoughts?

Thank you!

This looks helpful:
https://discourse.slimframework.com/t/veu-js-inside-slim/3840

and this:
https://odan.github.io/2020/04/17/slim4-twig-templates.html

This too:
https://odan.github.io/2019/09/21/slim4-compiling-assets-with-webpack.html#twig-webpack-extension-setup

Got it working. Followed the above and now have angular working as my front end.

Here’s my webpack.config.js if anyone is interested:

const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

    entry: {
        'main': './angular/app/dist/app/main.js',
        'polyfills': './angular/app/dist/app/polyfills.js',
        'runtime': './angular/app/dist/app/runtime.js',
        'vendor': './angular/app/dist/app/vendor.js'

        // here you can add more entries for each page or global assets like jQuery and bootstrap
        // 'layout/layout': './templates/layout/layout.js'
    },
    output: {
        path: path.resolve(__dirname, 'public/'),
        publicPath: '/',
    },

  optimization: {
    minimize: true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new TerserJSPlugin({}),
      new CssMinimizerPlugin()
    ],
  },

    performance: {
        maxEntrypointSize: 1024000,
        maxAssetSize: 1024000
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ],
    },
    plugins: [
        new CopyPlugin({
          patterns: [
            { from: "./templates/index.twig", to: "./index.html" },
            { from: "./angular/app/src/styles.css", to: "./styles.css" },
          ],
        }),    
        new CleanWebpackPlugin(),
        new WebpackManifestPlugin(),
        new MiniCssExtractPlugin({
            ignoreOrder: false
        }),
    ],
    watchOptions: {
        ignored: ['./node_modules/']
    },
    mode: "development"
};