In this post, I will report what I learned in the migration of Angular applications v8 to v13. In addition, I will show you the most common errors that you may encounter in the process as well as their respective solutions, indicating the sources when appropriate. I spent 1 year and a half allocated in a division that worked with many applications and a suite of components built in Angular 8. In the last 2 months of last year, we had meetings with the working group where the subject of angular application migration has always been talked. Considered a critical issue, especially when we remembered the risk of recent cases such as the in Java and the discontinuity of the library that affected the projects in . frontend log4j vulnerability faker AngularJS, officially unsupported Then came an opportunity to work with technical debt. When we did this work the Angular version was 13 and because , Angular 2 through 10 were no longer supported. Google only supports up to 2 previous versions Initial guidelines We take the experience we had in migrating the component project from Angular 8 to 13. These are the possible migration approaches: Run a with each version because it is not possible through it to move from version 8 straight to 13, so you need to run this command to migrate from 8 to 9, from 9 to 10, and so on. The advantage is that it converts the code automatically, but the process of going through so many versions ends up being more costly and therefore it is not advised in our case where there was a . It may be the most appropriate option for future migrations. ng update gap of 5 versions Create a new project in Angular 13 and copy the fonts from the old project into Angular 8. Then solve the problems as they arise. for the migration of our component project and is what we recommend in this situation. This approach has been adopted Migration roadmap 1) Install the latest version of Angular npm install -g @angular/cli 2) Create a new project ng new novo-projeto 3) Copy fonts from an old project When copying the fonts it is advised to keep the new that was generated to include and resolve the various dependencies on demand so that at the end of the process only the ones really needed are included, thus also meeting the best safety standards. package.json Update angular versions of the of the subprojects (if any) as well. package.json 4) Modify tsconfig.lib.json settings Update the tsconfig.lib.json files in the subprojects (if any) to align with the current tsconfig.json files "target": "es2017",   "module": "es2020",   "lib": [   "es2020",   "dom"   ] Common configuration errors and solutions An unhandled exception occurred: The target entry-point "@novo-projeto" has missing dependencies: primeng/toast, primeng/button Add the to the . This will be the most common error because it will occur for all the various dependencies that have not yet been included, such as , , among others. primeng package.json bootstrap ng-select Try to always define the version of the dependency corresponding to the current version of Angular in the project. Other situations that can be solved in this way are errors of the type: Script file ____ does not exist. or An unhandled occurred exception: ENOENT: no such file or directory, lstat ______ "ng build" for library fails with "does not support the 'build' target Copy file from the old project angular.json npm WARN @angular-devkit/build-ng-packagr@0.1002.0 requires a peer of ng-packagr@^10.0.0 but none is installed. You must install peer dependencies yourself. The has been . build-ng-packagr discontinued Remove the from and modify the in , so that where there is replace for build-ng-packagr package.json tasks angular.json @angular-devkit/build-ng-packagr:build @angular-devkit/build-angular:ng-packagr Directory import '...\node_modules\@angular\compiler-cli\ngcc' is not supported resolving ES modules imported from ...\node_modules\ng-packagr\lib\utils\ng-compiler-cli.js. Did you mean to import @angular/compiler-cli/ngcc/index.js? Resolves by modifying the version of in the file to one corresponding to the Angular version of the project. ng-packagr package.json Cannot resolve type entity i5.Scrolling Module to symbol* ou *ERROR: The target entry-point "primeng/dropdown" has missing dependencies: @angular/cdk/scrolling It is solved by adding the to . @angular/cdk package.json ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js) ... Can't resolve 'OpenSans-Regular.eot' in '...\dist\seus-components\css' : Install the postcss and postcss-cli npm install postcss postcss-cli Error: Module not found: Error: Can't resolve 'chart.js/auto' Install and , which is a of the first, running: chart ng2-charts wrapper npm install --save ng2-charts and npm install --save chart.js Common errors involving code change and solutions error type: Module '"primeng"' has no exported member 'ConfirmDialogModule' The earlier versions of imports were like this: primeng import { Checkbox, MessageService, ConfirmDialogModule } from 'primeng/primeng'; References are now more specific, so they need to be corrected: import { Checkbox } from 'primeng/checkbox';   import { MessageService } from 'primeng/api';   import { ConfirmDialogModule } from 'primeng/confirmdialog'; error TS1323: Dynamic imports are only supported when the '--module' flag is set to 'es2020' , add this line to : In order to support dynamic imports tsconfig.json "module": "esnext", When working with , error may arise observables Error TS2554: Expected 1 arguments, but got 0 . It can be solved by passing a value: Occurs after migration to rxjs 7 fake this.subject.next(""); Error: Module not found: Resolving to directories is not possible with the exports field (request was ./) . It is solved by removing the "/" at the end of or replacing double quotes with a single. Example: It usually occurs after migration to Angular 12 imports Before: import { MsgCenterModule } from '@seu-componente/etc-client/'; After: import { MsgCenterModule } from '@seu-componente/etc-client'; Before: import { ABCEnum, XYZEnum } from "../../tabela.constants"; After: import { ABCEnum, XYZEnum } from '../../tabela.constants'; An error of the type: Module not found: Error: Can't solve 'dayjs' / Error: Module not found: Error: Can't solve 'inputmask' Installing this library because even though it is not directly used in the application, it is necessary in some cases because it is referenced by the component used: npm install dayjs --save

npm install inputmask --save Type error: Object is possibly 'null'. TS2531 for window.document The that may return NULL. typescript compiler is indicating window.document.getElementById('content') Since it is a migrated code that already worked previously, just add the ! to this code: document.getElementById('content')!. innerHTML = ''; error NG8002: Can't bind to 'minWidth' since it isn't a known property of 'p-dialog'. . Therefore, in html, where it has From primeng 9 some properties must be set in style change to . Look at the brackets occurs. [width]="600" [minWidth]="200" [style]="{width: '600px', minWidth: '200px'}" or a CSS-style setar error error TS7006: Parameter 'perfis' implicitly has an 'any' type variables now need to have some type defined, so it is necessary at all points in the code to set them to or for a more specific type. This is because any A sometimes pointed solution is to set to in the , but . "noImplicitAny" false tsconfig.json it is not advised error TS2564: Property 'titulo' has no initializer and is not definitely assigned in the constructor Starting with version 2.7 the typescript compiler . requires that the property/variable be initialized To solve this there are but we chose to add the "!" in the definition of the variable: several approaches public container!: ViewContainerRef; We did this because we have assurances that this was initialized because it worked on the previous project in Angular 8 since the previous code ran without errors during runtime. Note: In , , to ignore these errors and speed up this phase of migration, but . tsconfig.json compilerOptions can be defined as "strictPropertyInitialization": false it is recommended to go back to true later error TS2322: Type 'string | null' is not assignable to type 'string | undefined'. Very common when setting , solved with "!" just like the previous error. an interface property as optional error TS2322: Type 'Boolean' is not assignable to type 'boolean' ... 'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible Newer versions of are more rigid. In this case, you will need to modify the code to use the primitive type. typescript boolean error NG3001: Unsupported private class MsgCenterComponent. This class is visible to consumers via SistemaClientModule -> MsgCenterComponent, but is not exported from the top-level library entrypoint. . Add it to the the line corresponding to the class in question, in this example: It usually happens from version 9 of Angular public_api.ts export * from './lib/msg-center/msg-center.component'; error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s) Change the code , in this example: as follows static forRoot(): ModuleWithProviders<XYZClientModule> error TS7030: Not all code paths return a value. Ensure that the value is returned to the code in question. It usually occurs in more extensive -clauses. if error TS2339: Property 'throw' does not exist on type 'typeof Observable' Change the call to: return throwError(() => response); error TS1192: Module '".../node_modules/@types/uuid/index"' has no default export. Install dependency: npm i --save-dev @types/uuid Modify the call in the code to: import * as uuid from 'uuid'; error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}' You need to define the type of index that the object has by modifying the code to: pagesStatus: {[index: string]:any} = {} error TS2322: Type 'string' is not assignable to type 'number' This can occur in attributes. For example, where there were: html tag <p-fileUpload mode="advanced" name="demo[]" maxFileSize=1000000 multiple=true chooseLabel="Buscar arquivo" (onUpload)="onUpload($event)"></p-fileUpload> Place the brackets: <p-fileUpload mode="advanced" name="demo[]" [maxFileSize]="1000000" [multiple]="true" chooseLabel="Buscar arquivo" (onUpload)="onUpload($event)"></p-fileUpload> After upgrading : From Angular 13 on, the use of is no longer required Code entryComponents Removal entryComponents Remove attributes from . In the new version, such components are fully responsive and so the attribute has been discontinued. [responsive] p-dialog Also published . here

Fetch

Google

Initialized

Target

Chronology and Evolution of Angular through the Years - From v2 to v19

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Make resilience your competitive advantage

Upgrading Angular From v8 to v13

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Chronology and Evolution of Angular through the Years - From v2 to v19

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Chronology and Evolution of Angular through the Years - From v2 to v19

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps