How to setup Vite in Angular after using Webpack

After updating to Angular 18 and choosing Vite as the Build tool, some packages are not resolved, i.e.:

X [ERROR] Could not resolve "@angular/common/http"

../../../../http-options.ts:1:27:
1 │ import { HttpParams } from "@angular/common/http";
╵ ~~~~~~~~~~~~~~~~~~~~~~

You can mark the path "@angular/common/http" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


The problem is, I have two projects and two package.json files, one was referencing the other packages with the help of the tsconfig.json file:

"paths": {
"@angular/*": [ "../node_modules/@angular/*" ],


I installed "vite-tsconfig-paths" and added a vite.config.ts file. But it didn't solve the problem. I also added the resolve alias to the vite config.

Most of all I would just like to know if it is possible. Or even better, if there is another way to set it up.

Continue reading...