Question : Proper way to handle angular 2 or 4

[neovea]

Hi there,
I'm willing to work with symfony and webpack encore, and add angular 4 to it. Is there any proper way to handle this ?

Thanks

[weaverryan]

I'd be very happy to add Angular support :). I haven't looked into it at all yet and I don't use Angular. For Vue, it was of adding the vue-loader - #49. For react, it involved add a babel preset. I imagine that API would be something like enableAngularLoader() (assuming it needs a loader), but I don't know what is needed in Webpack for Angular.

In other words, PR very welcome - even if it's just a work-in-progress PR.

[Coffee2CodeNL]

Use the angular CLI and then run ng eject after starting a new project, that'll output the Webpack config.
Learned that in the Gitter chat.

I've asked if the guys from the Angular Gitter.im chat if they could take a peek at this, so fingers crossed! :)

[Coffee2CodeNL]

Here's a default output.

const fs = require('fs');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');

const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const minimizeCss = false;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
        // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
        const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
        const minimizeOptions = {
            autoprefixer: false,
            safe: true,
            mergeLonghand: false,
            discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
        };
        return [
            postcssUrl({
                url: (URL) => {
                    // Only convert root relative URLs, which CSS-Loader won't process into require().
                    if (!URL.startsWith('/') || URL.startsWith('//')) {
                        return URL;
                    }
                    if (deployUrl.match(/:\/\//)) {
                        // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                        return `${deployUrl.replace(/\/$/, '')}${URL}`;
                    }
                    else if (baseHref.match(/:\/\//)) {
                        // If baseHref contains a scheme, include it as is.
                        return baseHref.replace(/\/$/, '') +
                            `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                    }
                    else {
                        // Join together base-href, deploy-url and the original URL.
                        // Also dedupe multiple slashes into single ones.
                        return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                    }
                }
            }),
            autoprefixer(),
        ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
    };




module.exports = {
  "resolve": {
    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules",
      "./node_modules"
    ],
    "symlinks": true
  },
  "resolveLoader": {
    "modules": [
      "./node_modules",
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./src/main.ts"
    ],
    "polyfills": [
      "./src/polyfills.ts"
    ],
    "styles": [
      "./src/styles.css"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  },
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//
        ]
      },
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.css$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.less$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.styl$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.css$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.less$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/styles.css")
        ],
        "test": /\.styl$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ]
  },
  "plugins": [
    new NoEmitOnErrorsPlugin(),
    new GlobCopyWebpackPlugin({
      "patterns": [
        "assets",
        "favicon.ico"
      ],
      "globOptions": {
        "cwd": path.join(process.cwd(), "src"),
        "dot": true,
        "ignore": "**/.gitkeep"
      }
    }),
    new ProgressPlugin(),
    new SourceMapDevToolPlugin({
      "filename": "[file].map[query]",
      "moduleFilenameTemplate": "[resource-path]",
      "fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
      "sourceRoot": "webpack:///"
    }),
    new HtmlWebpackPlugin({
      "template": "./src/index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) {
            return 1;
        }
        else if (leftIndex < rightindex) {
            return -1;
        }
        else {
            return 0;
        }
    }
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "minChunks": 2,
      "async": "common"
    }),
    new CommonsChunkPlugin({
      "name": [
        "inline"
      ],
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": [
        "vendor"
      ],
      "minChunks": (module) => {
                return module.resource
                    && (module.resource.startsWith(nodeModules)
                        || module.resource.startsWith(genDirNodeModules)
                        || module.resource.startsWith(realNodeModules));
            },
      "chunks": [
        "main"
      ]
    }),
    new NamedModulesPlugin({}),
    new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/environment.ts": "environments/environment.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json",
      "skipCodeGeneration": true
    })
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  },
  "devServer": {
    "historyApiFallback": true
  }
};

[Coffee2CodeNL]

@weaverryan is this useful?

I've also been publishing a link to this issue on various platforms to see if people can help out.

[Coffee2CodeNL]

@stof do you perhaps have a clue for us? 😄

[weaverryan]

This does help. I actually don't see anything special in this setup, except for enabling typescript and also the AotPlugin.

@isdp It might already be possible to use Encore with Angular just by calling enableTypeScriptLoader(). What I really need is someone to help out and do some of the work for me :). I don't use Angular, but would like to support it. Could you try using Angular and Encore by just calling enableTypeScriptLoader()? And also by trying to use the AotPlugin (you can add it via addPlugin()).

Thanks!

[neovea]

Hi and thanks for your answers. Actually I ended up using React. As I just landed on the symfony project, I've been given the goal to implement a reactive solution. But Angular appeared to be a bad choice because of its monolithique aspect.
Developing and operating à progressive migration of the interface was more suited by react or vuejs.
But what you Shared @isdp is still à huge help, thanks. And thanks to you @weaverryan and the team working on Encore. I would be glad to help if I had the time to...

[D37R4C7]

Hi,

@weaverryan It's working out of the box as you already guessed.

But Angular 2+ is not that big benefit for a Symfony application, because it's more useful for single page applications then for mixing with twig. I will give vue.js a try instead. I hope getting Angular 5 running using Webpack Encore will help somebody, anyway.

Angular 5 (Angular 2-4 will need another plugin (AotPlugin) to be injected) can be added like this...

npm install --save-dev @ngtools/webpack

// webpack.config.js
var Encore = require('@symfony/webpack-encore');
var AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

Encore
.enableTypeScriptLoader()
.addPlugin(new AngularCompilerPlugin({
        tsConfigPath: './PathTo/tsconfig.json',
        entryModule: './PathTo/AngularBootstrapModule'
    }))
;

var config = Encore.getWebpackConfig();

config.resolve = {
    extensions: ['.ts']
};

module.exports = config;

[Coffee2CodeNL]

Holy reproducing feces!

This would help a ton as I won't have to switch projects to work on the angular frontend and a Symfony based API as backend at the same time 👌

[mateusz-sawit]

I have managed to put Angular5 app into Symfony 3 project with 2 step compiling. Here is what I have done (it was some time ago so I may have missed sth):

1. generate new angular project outside the Symfony
2. put angular src content into symfony src/AngularApp
3. put angular .angular-cli.json, tslint.json into symfony root folder
4. put angular's tsconfig.json to symfony's src dir
5. add missing dependencies from angular's package.json to symfony's package.json
6. configure .angular-cli.json: "apps": [{ root: "src/AngularApp", "outDir": "assets/angularApp" .... }]
7. add scripts from angular's package.json to symfony's package.json (some name changes required)
8. in package.json my dev build command is now "ng build && ./node_modules/.bin/encore dev"
9. in webpack.config.js you need to add entries for ./assets/angularApp/polyfills.bundle.js, ./assets/angularApp/styles.bundle.js, ./assets/angularApp/vendor.bundle.js, ./assets/angularApp/main.bundle.js and add them in your twig in the same order
10. put in your twig and you should see angular app working

you can also use ng serve to develop but you will not have your twig template

[rottenoats]

@mateusz-sawit that worked really well.

Also, something you may have forgotten (at least required for me), was to also add the generated inline.bundle.js to the webpack.config.js and add it first (among the other scripts) in the twig.

[Lyrkan]

@Rebolon ng serve uses WebpackDevServer internally : https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/tasks/serve.ts

You can probably achieve the same thing by running yarn encore dev-server.

[Rebolon]

@Lyrkan maybe we would have to eject the webpack config from angular-cli ?
i'm trying to use watch options on ng build.
I'll post my resulst here

(i delete my post by mistake... instead of editing it: so what i was saying was (summarised): with previous post we don't have a watch system)

[mateusz-sawit]

@Rebolon you can use ng serve in my configuration - in package.json add script: "serve": "ng serve" and then run npm serve - you will have your angular app running alone but without "symfony" content

moreover you should be able to use any ng commands in your project - i.e. ng generate, and the generated content should be put in right place.