Updating angular-cli Projects

Jonas Felix
Feb 16, 2017 · 3 min read


=> Please follow on Twitter & Medium for more!

I absolutely love angular-cli and for me it’s the go to tool for any angular project. The team around it is doing a great job, and I’m very thankful but:… things to consider …

Sorry for the mixed up article. Hope it’s still helpful. Here have a Angular Potato.

The angular-cli is under heavy development and moving it into the @angular/cli package lead to the removal of several features, that they either don’t want to maintain within angular-cli or want to rewrite “better” in the next version:

“npm install -g @angular/cli vs angular-cli”

The project was now moved into the core repository of angular, but the “old” package is still there. If you want to keep things simple for the moment, you can just install angular-cli, ignore the deprecated message and continue to use it for a while. But some day you’ll have to move on.

ng init, ng update

Running ng init with the proper parameters guided you through a update wizard where you could choose to overwrite, diff or ignore a new file. In combination with git and vscode/git-view, this was the quickest way for me to update a project. According to github the team decided to remove this with beta31. If you still want to use it, you can just downgrade to beta30: “npm -g install @angular/cli@1.0.0-beta.30”

Tip: If you have an old project you may run into a browser error “Unhandled Promise rejection: Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html” Removing the node_modules folder and running npm install again fixt that for me.

“New Project / Git diff” update path:

Alternatively to “ng init” I found this way very practical:

  1. npm uninstall -g angular-cli
  2. npm install -g @angular/cli
  3. Create new project vanilla project with “ng new” and the parameters of your current project (--prefix xyz --routing true).
  4. Delete .git, assets, src/styles.css and src/app in your new vanilla project
  5. Move .git and the other folders from your current folder into the vanilla project
  6. Open Visual Studio Code GIT view
  7. Go through all changes and either “fix/merge” them or revert them (you can also revert a missing file)
  8. Test it :-)
  9. Commit the merged/updated files

This also works great with changes to package.json, as you can see them in the diff view. It also works if you added any file that you forgot to take over from your former project, as git will show you missing files. Just don’t commit before you are happy with the upgrade-merged version.

ng github-pages:deploy gone

As a side note, also the command to deploy a project to github pages was remove. But there is an alternative project that gives you the same functionality:

npm install -g angular-cli-ghpages
ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
angular-cli-ghpages [OPTIONS]

PS: We do Angular in Switzerland (Zürich/Basel) :-)…

=> Please follow on Twitter & Medium for more!

Jonas Felix

Written by

Full Stack Entrepreneur - on a creative journey after first successful exit. New tech, science, OpenSource, Software Development, Space Enthusiast, Skydiver...

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade