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!
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"
};