Moving to Angular 4 from Angular 2

Venkateshwar
Aug 9, 2017 · 3 min read

If you have an Angular 2 application, and are planning moving on to Angular 4… keep reading.

We upgraded our Enterprise Dashboard app from Angular 2 to Angular 4. We faced some issues, that everyone else might experience. I have noted down some of the them and their fixes.

Our WebApp was running in JIT(Just In Time) as AOT was in beta at the time of development. So I have included Ahead-Of-Time (AOT) compatibility fixes too, if you are interested.

Why move to Angular4?

Upgrade notes

If you have an angular 2 application, you might be using a beta version of angular-cli. For angular 4, it is advised to use the latest angular-cli and the easiest way to go about the upgrade is to start with a clean slate with the latest angular-cli.

npm uninstall angular-cli -g

npm cache clean

npm install @angular/cli -g

mkdir myAppV2 && cd myAppV2

ng new --styles sass -si -sg -prefix cc

You should have a fresh application with necessary scaffolding. Now copy the dependencies from your old application and update the necessary version in package.json

If you were using angular/animations, you will have to add @angular/cdk as dependency. We will talk more about this later.

npm install

Runng serve and make sure the app runs without any errors. As an additional step try ng build --prod now your application will be built with AOT and you should find the distributables under /dist folder.

If all goes well, Copy the rest of the files from the /src folder of you old app. Update modules imports and routes to the new app. Try serving the application and observe a ton of errors would appear. These are compatibility issues.

NG4 upgrade issues:

  • Angular has replaced the <template> tags to <ng-template> . This is to avoid collision with HTML5 template tags. This is a fairly simple change. You should be able to do a regex match and replace from all ‘.html’ files in you app.
  • In the process of bundling, the templates and styles are made inline even if they are used as ‘URL’s. So if you have used require in your components to import the templates and styles, you will need to remove them.
  • If you have declared a property private within a component/directive and used in the template, it will no longer work. Strict encapsulation in angular4 , needs public variables to be accessible in templates.
  • angular/material have made all their component as modules and this is to enable efficient tree-shaking while building.
  • angular/material has also renamed the material classes from .md to .mat. This change will ensure there is no conflict between angularjs- material and @angular/material within same app when used together. You might want to check all of your .scss files including theme.scss .
  • There is another change in the input directive from md-input to mdInput. md-prefix and md-suffix has been renamed to matPrefix and matSuffix.
  • Use Renderer2 instead of Renderer. Its optimized for dom access, create virtual elements and modify.
  • You might end up having a memory exceed error when running ng build / serve commands. You will have to increase the max_memory_limit for node process. This can be done by changing ng.cmd in%AppData%\npm with the following change. Refer the conversation of https://github.com/angular/angular-cli/issues/5618 for more info.

AOT compatibility issues.

  • To enable AOT, the components should be statically type-checked. Refer https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts to fix all type errors.
  • If u have used a variable typed as string and used directly in *ngIf , you might want to convert into a boolean value. Try double not ( !! ) to convert string to boolean in truthy cases.
  • Get rid of enums that are used in Route configuration. You might have used in route guards. They are not supported in AOT.

If everything goes fine, you should be able to build the application using --prod flag. Let me know if you face any other issues, would be glad to help. Note that you will have to use --base-href=/subdirectory . This will ensure the image-urls used in styles are properly named.

PS: Treeshaking is not happening with angular-cli. Angular team and Webpack team are working on this issue. If you are more concerned about tree-shaking, use RollUp for building.

Venkateshwar

Written by

FrontEnd Developer, CloudCherry.

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