I recently converted an Angular application from version 2.x to 5.x, bumping ngrx along with it up to 4.x. The process was surprisingly painless, except, ironically, for the production build process, as one of the reasons I wanted to upgrade was to convert to the Angular CLI.
The Angular team removed the ng init command to convert existing projects to the CLI. That didn’t and doesn’t seem like a significant problem to me, because I could just create a new project with the CLI into a new directory and manually copy my old application files to where they’d need to be.
I started to get skeptical when I tried to sketch how the CLI would fit into our production or deployment workflows. Firstly, we’ve ran into a number of issues with npm and file permissions, and as one preventative measure I’ve removed any globally installed dependencies for any of our applications. Secondly, we use Vagrant in production. Without an ng init command that can work with an existing project, I think I’d need to write a script to create a new Angular project with the CLI and copy and paste the applicable files into the appropriate directories on every vagrant up. This seemed straightforward enough, I guess, but it also seemed like I was approaching the point where the cost of the CLI would outweigh the benefits.
I decided to just update my existing webpack build and move on to a different project. I went to the latest Angular documentation for ahead-of-time compilation and…it told me to use the Angular CLI. I didn’t see documentation for just using webpack or systemjs-plus-rollup anymore.
I used the Angular CLI to create a new project and ran ng eject, thinking I’d just steal its package.json and webpack.config.js, but I saw what looked like full paths to the project from my machine in the webpack config.
const projectRoot = "/Users/my-user-name/some-path/angular-cli/my-app";
...
new CircularDependencyPlugin({
"exclude": /(\\|\/)node_modules(\\|\/)/,
"failOnError": false,
"onDetected": false,
"cwd": "/Users/my-user-name/some-path/angular-cli/my-app"
}),
I found this very surprising. I felt like this made the ejected configuration unshareable by default. I also wondered if the CLI was doing this under the hood all along.
Writing this makes me feel dumb, but I don’t get how you’re supposed to share and collaborate on Angular projects that rely on the CLI if you can’t just ng build out-of-the-box.
In the end, I created a simple webpack config based on Todd Motto’s repo for his Ultimate Angular ngrx course. It took me a little time to realize I needed to update the configuration for @ngtools/webpack for Angular 5.x per the npm page, but overall, it seemed much simpler than dealing with the CLI.