Forem: Windson Mateus

[Boost]

Windson Mateus — Sat, 08 Nov 2025 03:26:40 +0000

Gemini CLI: The Future of Programming and Reflections on the Impacts of AI

Windson Mateus ・ Nov 7 '25

Gemini CLI: The Future of Programming and Reflections on the Impacts of AI

Windson Mateus — Fri, 07 Nov 2025 20:58:06 +0000

My biggest motivation in studying and using AI tools has been to seek gains in time/productivity, in the most varied possible areas of life. I've been studying a lot about this lately. And these agentic coding tools have been really catching my attention. Hence came the motivation for this video/post.

Initially, the main difference these agents have compared to what we already use integrated into our IDE is that they have a deep understanding not only of the context but of their entire codebase. It's already fantastic to see the AI guessing the rest of our code as we confirm by hitting TAB. Agents provide much more powerful resources for creating new functionalities and including new features that were not previously possible at this level.

The Gemini CLI is a programming agent, also known as an agentic programming tool. It allows developers to delegate programming activities to this agent, accelerating deliveries and improving productivity.

Following what has been emerging in terms of AI, 1 year seems like 1 decade, as the speed with which these tools are evolving is absurd, so much so that what I am covering will certainly be outdated by the time you see this. I started testing the Gemini CLI at version 0.1.22 and days later when I was writing this post, I saw that it had already updated to 0.6.1.

In the same category as the Gemini CLI, we have Open AI Codex (which currently uses GPT-5 Codex) and Claude Code, both of which are paid. The free version of the Gemini CLI, which we will see in my demonstration, allows for 60 requests per minute and 1000 requests per day, through the Gemini 2.5 Pro model, and that's already a lot, at least for my use. Another free option is Qwen Code, which is adapted from the Gemini CLI. There is also Google Jules, an asynchronous coding assistant, still experimental. Perhaps at some point, it will converge with the Gemini CLI.

Installation and Initial Execution

$ npm install -g @google/gemini-cli

To execute:

$ gemini

There is an option to log in with your Google account (free) or use an Enterprise access API (paid). Then you type commands to converse in a similar way to the conversational AI interface:

@ to reference files in the project.
! executes commands (e.g.: ! npm test)

To end the session:

/quit

Example Application in Angular

In the video, I show a frontend application where I usually study and test new Angular features, which is my main work stack currently. It is a simple registration of games, platforms, and genres. As a side note, it communicates with a backend developed in Java — Spring Boot accessing a small Sqlite database.

Demonstration of Gemini CLI usage in the video

We will start by replicating the implementation of a basic CRUD on the frontend side. Something that an experienced developer familiar with the application wouldn't take more than 1 hour to implement, but which the Gemini CLI will do in minutes. Afterwards, an Angular 16 to 20 migration. Something that usually takes a good amount of time depending on the project's complexity, was resolved in a few minutes. Finally: a dashboard with the record count on the initial page.

These are very common situations that we usually work on in our daily lives.

P.S.: I even requested a report and a graph, but it didn't work out, even though I only tried once. In defense of the Gemini CLI in this case, I should have had appropriate endpoints already created on the backend, something I didn't have and didn't want to create to not extend the video too much. Something else that worked very well was the migration to the new Angular if/else structure, which I also ended up not showing. Updating this code in a large project would provide huge time savings.

"Human in the loop" always

What many already know: You can't trust everything AI does.

Certain refactorings I request from AIs, whether or not they are integrated into the IDE, completely break the logic. And I don't think agents will be able to solve even these more complex situations. A reality where you give an order and the system will be ready exactly the way you want does not exist. At least not yet...

I tried to run these commands that I sent to the Gemini CLI from inside the Github Copilot Chat in VS Code and it got lost most of the time. It was noticeable that the Gemini CLI proved to be much more reliable, almost always fulfilling my order or at least implementing 80–90% of what I expected.

In the end, a minimally experienced developer will always be necessary, as there will be adjustments to be made, technical debt to be dealt with, and the code must always be reviewed. AI still gets lost at various points. Hallucinations and inaccuracies can occur, but even so, the gain in productivity tends to be enormous due to the collaboration provided in this initial "boost."

Calm down, it’s not vibe coding!

"Vibe coding" has gotten a bad reputation as if it were about a person sitting down, asking the AI for the application, and it doing it while you have a coffee. But that's not how I understand the concept.

“Vibe coding” has proven to be an incredibly useful tool for prototyping, generating repetitive code (boilerplate), and generally accelerating the workflow. It’s no longer just about writing lines of code, but about defining problems, guiding the AI, verifying the results, and, ultimately, being the guardian of the quality and security of the final product.”

Reflections and human/social impacts

We are now entering a more philosophical area, so to speak. Well, I am not an expert on the subject. I've just been researching and trying to delve deeper into something that seems very revolutionary to me, largely because of the power it can have to change the way we work. But along with this come some very deep reflections.

I understand that this can be frightening for some colleagues in the profession. Whether it's out of fear of losing their job to an AI, or out of resistance to changing the way they have worked their entire lives. Changing old habits is usually difficult.

Sacrifice knowledge for speed: It's good that the defect on line 25 was quickly resolved, but it's even better to find time to understand why.

Sometimes it's inevitable, sometimes you really just need to solve that problem as quickly as possible, but the question remains: If I didn't type anything and let the AI do it for me, how much did I really learn from it? It’s always good to try to learn. This creates a risk of junior developers not evolving and remaining juniors forever.

A developer does not learn by reading a book or watching a YouTube tutorial. They learn by typing. Just as you don't learn to dance, play soccer, or improve your physical condition by watching videos. There are situations where a code will be generated by the AI and only an experienced developer will notice that it is not the best solution. I think it is important to use the facilities that AI has provided us to enhance our learning.

Conclusion: AI is not for replacing, but for empowering

As young people say, I might be a little "emotional," my daughter has even said that I've become the "AI crazy guy"... lol. But I have more than 25 years in the profession, and I consider this moment a watershed. I see enormous potential here, which, if used well, can revolutionize our software development process.

Note that my example application is very simple. Imagine what this will be able to do in 1 or 2 years, given how quickly these tools have been evolving. It's impressive to see what can already be done even though we are still in their initial versions.

Productivity and time savings will evolve significantly. This is what I want most for myself and what companies also want for their staff.

From everything I've been following, I can state that the use of these tools is already a reality in major development projects around the world.

Demis Hassabis, neuroscientist, co-founder of Deepmind, and Nobel laureate in 2024, on programmers worried about their jobs: “For the next era, for the next 10 years, we will have people who embrace these technologies as one, which could lead to superhuman productivity. The best programmers will be even better, perhaps up to 10x better... The best programmers will be able to check if the code produced by the AI is truly good/adequate.”

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

Windson Mateus — Thu, 06 Mar 2025 21:36:48 +0000

I’ve always been curious to check the evolution process of Angular over the years, from its early versions (Angular 2, not AngularJs) to the present ones.

Hence, the motivation for this project, developed in my free time in recent months. Besides this post, I developed a small application, the code of which you can check on my GitHub.

Moreover, it will serve as a way for me to always keep up and study the evolution of this technology that has been my main work in recent years.

There are many versions, and in this post, I will talk about the advances present in each one and the most relevant changes in the application as I evolve the Angular versions, as well as the errors and solutions I applied. In each session, I will mention the release date of that Angular and the version of node in which I ran our sample application.

In every new version, we will have something that optimizes the bundle, making these smaller and thus applications loading faster. This is usually one of the main objectives of the Angular development team. Something that always occurs is also the adoption of a more recent and stable version of Typescript.

The Project

Each version of Angular has its own branch. The latest version in the repository (at the time of writing it is version 19) is also the master.

I created the project in a WSL Ubuntu running on Windows 11. You can do this on Windows too, but in Linux I have been more productive, mainly because to switch between node versions I have been using "n" (I think it's better than nvm).

Initially, I started with Angular 15 and went back through the versions, but then I saw that it would be more interesting to start from the older versions to the newer ones to better understand the evolution process.

I took the compatibility table from the official documentation as a reference to know which node is suitable for the Angular version I’m working with. In practice, I noticed that there were some cases where the documentation guidelines didn’t work.

In addition, the upgrade guide from one version to another is quite useful. Then it might be necessary to install new versions of some libraries manually and sometimes delete the node_modules folder before the process.

As the Angular versions evolved, we also advanced the libraries like ngx-bootstrap, rxjs, etc.

The Application

My goal was to develop a simple CRUD, a game registration. CRUDs are always present in a programmer's life. From there we can monitor what changes in the code as we evolve in the Angular versions.

To keep it simple, the backend is a db.json file running on a json-server.

The listing screen is loaded via lazy loading just to emphasize the importance of its use, but in practice, it would only make sense if there were several modules. In addition, I set a 0.7-second delay so that the loading gif could be observed.

I thought about calculating the size of the builds for each version, but I gave up considering that in a very small application it wouldn't make much difference.

Starting with Angular 7, we are using ngx-bootstrap. To see its compatibility table with Angular, I consulted the documentation, in the Compatibility section.

Common Situations and Errors When Using Older NodeJs and Angular Versions

When running the application, the "error:0308010C:digital envelope routines :: unsupported" or "error:03000086 code: 'ERR_OSSL_EVP_UNSUPPORTED" may occur. This can be resolved by downgrading to a previous version of node or changing some of its and openssl's settings. Since in our case the idea is to run the application in an older version, updating the dependencies is not an option.

The error "This likely means that the library __ which declares _. has not been processed correctly by ngcc, or is not compatible with Angular Ivy" may keep appearing in VS Code, but the application works. I observed this from Angular 4 to 7.

It is usually better to use the latest node to run ng update (or npm install) as postinstall errors and others might occur, and then go back to the node corresponding to the Angular version in question to run the application.

When following the process of advancing version by version via ng update, it is quite common for it to only work after a --force.

Angular 2, September 14, 2016

The first version of Angular as we really know it started at 2, which was created from scratch, taking only the old AngularJs, from 2010, as a basis. Google completely overhauled the architecture, preventing us from considering them the same language.

There was no Angular 3, by decision of the development team, to avoid confusion with Angular Router, which was already at version 3 at the time.

As you can see in the repository, we will only have versions of the sample application from Angular 4 onwards. I did not implement in Angular 2 simply because it was very difficult to set up an environment where the application would run, even using the oldest available node versions.

Angular 4, March 23, 2017 (node 8)

Angular 4 was the major update after Angular 2. From here, a new version was released regularly every 6 months.

One of the main advances at the time was AOT (Ahead of Time) and the View Engine, aiming to make the bundle smaller and faster to load; the animations package was extracted from angular/core to its own package; source map generation was possible.

About our application, it installed without errors with node 8 and not with 6, contrary to what the documentation stated.

Errors that occurred: 1) "Cannot read property 'config' of null": resolved by including the .angular-cli.json file, following the structure suggested in this link; 2) "Unknown browser query 'dead'": resolved by deleting the browserslist file in the src folder or editing it according to the link.

Unlike rxjs versions above 6, there is no EMPTY operator. So, we use empty(). When using a service you still need to reference it in providers.

Apparently, there was still no support for lazy loading, as it did not recognize the notation.

At first, ngx-bootstrap could not be used, so I opted for a javascript confirmation prompt as a substitute for its modal.

Angular 5, November 1, 2017 (node 8)

The news in this version included: optimization and reduction in bundle size; AOT compilation enabled by default; service workers for PWA development.

The upgrade process to Angular 5 worked according to the documentation guidelines. One strange thing that happened was an error importing the environment, necessary to define the base API URL. I had to invoke it with the relative path (".. /') for webpack to understand and compile the application correctly. This was the only version where we had this problem.

Angular 6, May 4, 2018 (node 8)

One of the most important news in Angular 6 was the synchronization of major versions of framework packages (angular/core, angular/common, angular/compiler, etc.), Angular CLI, and Angular Material+CDK to a single version 6.0.0. The first version of the important ng update was launched here. Many new features in Angular Material. RxJS 6. LTS expansion to all major releases.

From here, each major release would be supported for 18 months, with 6 months of active development followed by 12 months of critical bug fixes and security patches. First mention of _Ivy _for the future.

In this version, it was possible to run our application with app-routing/games-routing and lazy-loading.

Angular 7, October 18, 2018 (node 8)

This new version of Angular shows good evolution in using ng update for version evolution. Here, performance budgeting is introduced, which allows increasing or reducing memory usage limits through settings in angular.json.

I followed the migration guidelines from 6 to 7, and it was much smoother than I imagined.

About our app, it was already possible to start using ngx-bootstrap in its version 5.6.0, and with that the BsModal works from now on.

Angular 8, May 28, 2019 (node 12)

Contrary to what the official documentation points out, node 12 was needed to run npm install on the application, and not ^10.9.0. Trying to migrate from angular 7, the command recommended by the documentation also didn't work, even running on node 10.9.

Perhaps the most important news in this version was Differential Loading by default. It builds 2 bundles, generating a version of the application for modern browsers (ES2015) and another for old ones (ES5).

There were changes in the notation of the important Lazy Loading feature and the preview version of Ivy was released.

In our app, I removed codelyzer _and _tslint, since we won’t use them anyway, and they would be deprecated in Angular 11 for eslint. Angular/http was removed in this version (it had been deprecated since Angular 5), now located inside angular/commons.

Angular 9, February 6, 2020 (node 12)

Angular 9 was the most important update in 3 years. The Ivy compiler was finally established, being much superior to the View Engine, with the mission of reducing bundle size, increasing build speed, and improving debugging; Enabled AOT builds not only in production but also in other environments; A more informative ng update, with very detailed reports of what is being done during the process, being able to even refactor the code if necessary; No more need for entryComponents to inform a component to the compiler, as Angular finds it on its own.

Ivy has a huge focus on tree-shaking processes. It involves the TypeScript compiler analyzing your code to identify which libraries are needed, eliminating any unused code. In Angular 9, Ivy is the default rendering engine.

In this post, an interesting analysis is made of the improvements obtained in a migration from Angular 7 to 9.

In our app, when running ng update, there was an error in the animations library (also resolved with --force), and it ran successfully on the first attempt, although some errors occurred after the application started.

The error "________ does not appear to be an NgModule class_" (CommonModule, among others) did not compromise the application. It seems to be a false negative that is sometimes reported by VS Code.

The error "Error TS1323: Dynamic import is only supported when the --module flag is commonjs or esNext" is resolved by setting "module": "esnext" in tsconfig.json.

In tsconfig.json, Ivy is enabled and the _target _is upgraded to es2015.

Angular 10, June 24, 2020 (node 12)

From this version, warnings _are sent when your _build _contains _CommonJS, which can lead to heavier and slower applications. The message is "CommonJS or AMD dependencies can cause optimization bailouts." Very common to appear, I've encountered it several times in applications I've worked on.

Option to create an application in strict TypeScript mode, which helps with code maintenance, early bug detection, and allows the CLI to perform advanced optimizations on your application. The default bundle budgets can be reduced by up to 75%.

New projects disable ES5 _builds _by default. No more ESM5 or FESM5 bundles, saving 119MB of download and installation when running npm install for Angular packages and libraries. Support for IE 9 and 10 is finally discontinued.

In our app, there were some libraries I had to manually analyze. I upgraded ngx-bootstrap to v6, suitable for Angular 10. _Warning _for unused environment files, which made me delete the prod.

We see ng update running even more smoothly, with fewer problems. The _module _in tsconfig was set to es2020. And it ran smoothly on the first try.

Angular 11, November 11, 2020 (node 14)

Major highlights in this version: Build report improvements, with more detailed information; codelyzer _and _tslint were discontinued, and migration to eslint is recommended; Support for IE9/IE10/IE mobile removed, only maintaining support for IE11.

Angular 12, May 12, 2021 (node 14)

In this version, View Engine was definitively deprecated, aiming to converge the entire Angular ecosystem to Ivy. Protractor _will no longer be included in new projects, and should be replaced by other options like _Cypress, WebdriverIO, etc. The nullish coalescing operator (??) can now be used in Angular templates. Support for Tailwind CSS. Strict mode is now enabled by default in the CLI, which helps catch errors earlier in the development cycle. Support for webpack 5.

When migrating from version 11 to 12, the error “An unhandled exception occurred: The ‘buildOptimizer’ option cannot be used without ‘aot’” occurred. This was resolved by changing “aot” to “true” in angular.json.

Additionally, after the migration, several warnings related to CSS started to appear. I tried solving this by modifying angular.json, without success. Since it didn't affect the application, I decided to let it go. The warning persisted until version 14. According to this post, the issue was resolved in Angular 15, apparently with the update to TypeScript 4.9.4.

Other issues were resolved after I started using styles.scss instead of styles.css.

Angular 13, November 4, 2021 (node 14)

This was a very important version, one of the ones I worked on the most due to a complex migration project at my company, which I documented in this post.

Bootstrap enters version 5 from this point. Support for IE11 has been removed. Bundle _optimization is provided by removing IE-specific _polyfills _and _code paths.

The need for differential loading that existed until Angular 12 has also been removed. Now, only main.js is created during the build, with no separate main-es5.js or main-es2015.js files, making the process faster.

There was a conflict error between Jasmine and angular-devkit/build-angular, which I resolved by changing jasmine-core from 3.4 to 3.8, as mentioned in the link.

Angular 14, June 2, 2022 (node 14)

In this version, standalone components arrived in the framework with developer preview status: they are self-contained components that can be imported more directly, without declaring a module.

The application migration process via ng update was the most successful so far. No issues occurred. The TypeScript compilation target _was updated to the new standard: ES2020. The form classes have all been migrated to their new untyped versions (e.g., _FormGroup _-> _UntypedFormGroup).

Angular 15, November 18, 2022 (node 16)

In Angular 15, standalone APIs evolved from developer preview to stable, working correctly throughout the framework, and can be created directly via the Angular CLI. There is a new standalone API for Router and HttpClient, which can reduce code size by up to 11% in the case of Router. Image Directive available for image optimization. Route guard code is now more reduced and optimized. Improved presentation and understanding of the stacktrace. Refactoring of Angular Material. CDK Listbox. Improvements in esbuild.

Regarding the application, as I mentioned at the beginning of the post, I started the project in this version. Since there were no updates from a previous version, the project might be a bit "cleaner" from here on.

Angular 16, May 3, 2023 (node 16)

Angular 16 was considered the biggest release since the creation of Angular. Reactivity was completely rethought, with the introduction of Angular Signals, making the desire to make zone.js optional a reality. SSR (Server Side Rendering) and Hydration features are introduced, bringing performance improvements.

Hydration enables Angular to avoid re-rendering the application from scratch, resulting in about a 45% improvement in tests that were conducted. Support for unit testing with Jest and plans to gradually replace Karma with Web Test Runner. Support for TypeScript 5.

The Angular Signals library allows you to define reactive values and express dependencies between them. The rxjs-interop library allows for easy interoperability between Signals and RxJS.

A guide and a new schematics tool have been created to practically transition applications from older versions to standalone APIs.

Angular 17, November 8, 2023 (node 20)

In this version, we have Deferrable views (in developer preview), making the lazy loading feature even more powerful, allowing loading on demand pieces of a page.

A new official documentation on angular.dev. Dependency injection debug in devtools. ng generate creates standalone API components by default.

One of the most important new features is the improved integrated control flow (still in developer preview). The use of *ngIf and *ngSwitch, for example, was a bit confusing. Now we have @if/@else and @switch/@case. In the case of @for, its implementation is so much better optimized that it can be up to 90% faster in some situations compared to the old *ngFor. For a more detailed understanding, I recommend this article for if and this one for for.

Hydration is now stable and enabled by default in all new applications using SSR. There are new lifecycle steps to handle these introduced features.

The default build now uses Vite and esbuild. Improvements of up to 67% in build time and up to 87% with SSR/SSG have been reported. During development, the edit-refresh with ng serve can be up to 80% faster. All compared to the old model that used webpack.

Angular 18, May 22, 2024 (node 20)

The highlight of Angular 18 is perhaps the enhancement of various features released in the last 3 releases.

The release of the long-awaited zoneless change detection, in experimental support, marks the end of using zone.js, whose performance has always been questioned. By removing it from the application, the benefits include: better interoperability with other structures and micro-frontends; faster initial rendering and runtime; smaller bundle size and faster page loads; more readable stacktraces; and simpler debugging.

The use of signals has evolved to the point that even YouTube has adopted it. Improved debugging experience, making it possible to check the hydration status through devtools.

Material 3, deferrable views, and built-in control flow are now stable and have incorporated improvements. Server-side rendering enhancements. There are reports of companies that reduced the bundle size of one of their apps by 50% just by using the new @defer.

When running ng update, there is now an option to select “Migrate application projects to the new build system.”

Angular 19, November 19, 2024 (node 20)

In this latest version of Angular, we have more news. In Developer preview: incremental hydration, with support for the most demanding performance use cases; with the ServerRoute interface, it is possible to control which routes render on the client, server, or during compilation and resolve route parameters during pre-rendering; new Schematics to keep you up to date with the latest best practices: inputs, outputs, queries, inject-based dependency injection, and the new build system.

Editing and updating code have been improved with *HMR *(Hot Module Replacement). Enabled by default.

Karma is being deprecated and in 2025 a standard test runner recommendation will be chosen. The Material 3 Theming API has evolved. New time-picker component. Report of unused imports.

Standalone components, which were introduced in Angular 14, are now enabled by default. Directives, components, and pipes are updated during ng update, which has a new migration option: provide-initializer.

Our app continues migrating smoothly through its various ng updates.

Trying to keep up with what has arrived and what's coming

I would like to test several of these new features that I haven't had the opportunity to include in the sample application: Signals (zoneless app), Hydration, Standalone APIs, Deferrable views.

Let's try in the future.

Upgrading from Angular 8 to 13

Windson Mateus — Sat, 30 Apr 2022 03:27:20 +0000

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 the last year we had meetings with the frontend 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 log4j vulnerability in Java and the discontinuity of the faker library that affected the projects in AngularJS, officially unsupported.

Then came an opportunity to work with technical debt. When we did this work the Angular version was 13 and because Google only supports up to 2 previous versions, Angular 2 through 10 were no longer supported.

Initial guidelines

We take the experience we had in migrating the component project in Angular 8 to 13. These are the possible migration approaches:

1) Run a ng update 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 not recommended in our case where there was a gap of 5 versions. It may be the most appropriate option for future migrations.

2) 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. This approach has been adopted for the migration of our component project and is what we recommend in this situation.

Migration roadmap

1) Install latest version of Angular

npm install -g @angular/cli

2) Create new project

ng new novo-projeto

3) Copy fonts from old project

When copying the fonts it is recommended to keep the new package.json 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. Update angular versions of the package.json of the subprojects (if any) as well.

4) Modify tsconfig.lib.json settings

Update the tsconfig.lib.json files of 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 primeng to the package.json. This will be the most common error because it will occur for all various dependencies that have not yet been included, such as: bootstrap, ng-select, among others. 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 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 angular.json file from old project

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 build-ng-packagr has been discontinued. Remove the build-ng-packagr from package.json and modify the tasks in angular.json, so that where there is @angular-devkit/build-ng-packagr:build replace for @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 ng-packagr in the package.json file, to one corresponding to the Angular version in the project.

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 @angular/cdk to 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 chart and ng2-charts, which is a wrapper of the first, running:

npm install --save ng2-charts and npm install --save chart.js

Common errors involving code change and solutions

Module errors of type: '"primeng"' has no exported member 'ConfirmDialogModule'

In earlier versions of primeng imports were like this:

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'

In order to support dynamic imports, add the line to tsconfig.json:

"module": "esnext",

When working with observables, error Error TS2554: Expected 1 arguments, but got 0 may arise

Occurs after migration to rxjs 7. It can be solved by passing a fake value:

this.subject.next("");

Error: Module not found: Resolving to directories is not possible with the exports field (request was ./)

It usually occurs after migration to Angular 12. It is solved by removing the "/" at the end of imports or replacement of double quotes by single. Example:

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';

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 typescript compiler is indicating that window.document.getElementById('content') may return NULL. Because it is a migrated code that already worked previously just add the ! to code: document.getElementById('content')!. innerHTML = '';

error NG8002: Can't bind to 'minWidth' since it isn't a known property of 'p-dialog'.

From primeng 9 some properties must be set in style. Therefore, in html, where it has [width]="600" [minWidth]="200" change to [style]="{width: '600px', minWidth: '200px'}". Look at the brackets or a CSS-style setar error occurs

error TS7006: Parameter 'perfis' implicitly has an 'any' type

This is because variables now need to have some type defined, so it is necessary at all points in the code to set them to any or for a more specific type. A sometimes pointed solution is to set "noImplicitAny" to false in the tsconfig.json, but it is not recommended.

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 there are several approaches but we chose to add the "!" in the definition of the variable:

public container!: ViewContainerRef;

We did this because we have assurances that this is initialized because it worked in the previous project in Angular 8, since the previous code ran without errors at runtime.

Note: In tsconfig.json, compilerOptions can be defined as "strictPropertyInitialization": false, to ignore these errors and speed up this phase of migration, but 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 an interface property as optional, solved with "!" just like the previous error.

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 typescript are more rigid. In this case you will need to modify the code to use the boolean primitive type.

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.

It usually happens from version 9 of Angular. Add to the public_api.ts the line corresponding to the class in question, in this example:

export * from './lib/msg-center/msg-center.component';

error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s)

Change the code as follows, in this example:

static forRoot(): ModuleWithProviders<XYZClientModule>

error TS7030: Not all code paths return a value.

Ensure that a value is returned in the code in question. It usually occurs in more extensive if clauses.

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

And 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'

It can occur in html tag attributes. For example, where there were:

<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 migration

Code entryComponents Removal: From Angular 13 on, the use of entryComponents is no longer required
Remove [responsive] attributes from p-dialog. In the new version such components are fully responsive and so the attribute has been discontinued.