Hey Net-Heads!! Framework migration always plays a key role in enhancing the performance and maintenance of the application. On this page, I’m going to put out my thoughts on the Angular migration activity.
This page talks about the steps involved in the successful migration of Angular application from Ver9 to Ver11.
Migration Steps:
- Navigate to the Angular project folder and run the following:
ng updateAnd the output looks like this:
Using package manager: 'npm'Collecting installed dependencies...Found 58 dependencies.We analyzed your package.json, there are some packages to update:Name Version Command to update--------------------------------------------------------------------------------@angular/core 9.1.2 -> 11.2.10 ng update @angular/corerxjs 6.5.5 -> 6.6.7 ng update rxjsThere might be additional packages which don't provide 'ng update' capabilities that are outdated.You can update the additional packages by running the update command of your package manager.
It is a clear message stating what all packages need an update.
2. Running ng updatecommand to update the packages:
ng update -g @angular/core@11 @angular/cli@11you might end up with an error message like
You can suppress the above error by passing — allow-dirty to the ng update command
ng update -g @angular/core@11 @angular/cli@11 --allow-dirtyThis command might land you in another error scenario i.e. Incompatible Peer Dependency
As mentioned in the error message, you can use — force option to suppress this error.
ng update -g @angular/core@11 @angular/cli@11 --allow-dirty --forceThe above command will successfully update all the dependencies within the package to latest.
Surprises:
If you are migrating from Angular 9 to 11 and post migration if you run ng serve or ionic serve , you might endup with an error like below:
- If your application uses an observable type i.e.
BehaviorSubject
Go to the shared.service.ts file and define theviewType property like below
private viewType!:string;2. If your application uses custom fonts, then you might endup with CssSyntaxError:Can’t resolve ‘./scss/assets/fonts/WorkSans-SemiBoldItalic.ttf’ in ‘/Users/sravankadium/work/external/test/app/app-ui/src’
All you need to do is update the customFonts.scss file $font-part url like below
# Previous path
$font-part: './assets/fonts/WorkSans'# Post Migration
# New path
$font-part: '/assets/fonts/WorkSans'
You can also have a look at the useful commands to spin up an Angular Application
