An Angular code app is the one stack that is not a drop-in for Power Apps, so it deserves a careful guide. A Power Apps code app is just a Vite app, and most frameworks add a single plugin to a Vite config you own. Angular is different, however, because its CLI hides the Vite config you would normally edit. As a result, you must bring Vite back yourself before the Power Apps plugin can slot in.
This guide follows a build we actually tested. Moreover, it flags the exact misconfiguration that silently breaks the bundle, so you can avoid it.
Why an Angular code app needs a workaround
The other stacks are npm create vite templates, so you own a vite.config.ts and simply add the powerApps() plugin. Angular’s first-party tooling does not expose that config, because ng build wraps Vite and esbuild internally. Therefore there is no plugins array to extend.
To make an Angular code app, you run Angular on a Vite config you control. Specifically, you use the AnalogJS vite-plugin-angular. Once Angular runs on your own Vite config, the same framework-agnostic glue applies: the @microsoft/power-apps SDK and CLI, the @microsoft/power-apps-vite plugin, and a power.config.json file.
Build your Angular code app step by step
First, assemble a small Vite project by hand, since no create-vite Angular template exists. Your vite.config.ts lists the Angular plugin first:
import angular from '@analogjs/vite-plugin-angular'
import { powerApps } from '@microsoft/power-apps-vite/plugin'
export default defineConfig({
resolve: { mainFields: ['module'] },
plugins: [angular(), powerApps()],
})
Next, install and build:
npm install
npm run build
Then bind the app to your environment and publish:
npx power-apps init -n "My Angular App" -e <environment-id>
npm run build && npx power-apps push
The tsconfig gotcha that cost the most time
One detail matters more than any other. The plugin reads tsconfig.app.json, not tsconfig.json, and it uses the files it resolves as the Angular compiler’s program. Consequently, two mistakes break the build quietly.
First, if tsconfig.app.json is missing, the build warns that your component is “not in the TypeScript program.” Second, and worse, a tsconfig.app.json that sets noEmit: true with a glob include produces an empty bundle under one kilobyte, even though the build reports success. Therefore you should use files: ["src/main.ts"] so the program follows imports, and you should not set noEmit.
What to check as you go
Verification is simple once you know the trap. After building, your dist/assets/*.js bundle should weigh roughly 100 KB, not under one kilobyte. Indeed, our Angular code app build reached a healthy bundle of about that size with no plugin warnings, and dist/index.html referenced ./assets/... with relative paths.
Angular-specific notes
To read context, import getContext from @microsoft/power-apps/app in a service and expose it through a signal. Data connectors, meanwhile, generate plain TypeScript services under src/generated/; you inject a thin wrapper and call XxxService.getAll(). Above all, treat Angular as the teaching example of the platform’s boundary: when a framework hides Vite, you bring Vite back.
Stress-test notes
Before publishing, we did more than build this Angular code app – we tested it the way a real project runs. We added the extras a normal app needs: page navigation and a form. We also loaded data in the background and called the Power Apps SDK. Then we opened the running app in an automated browser, a tool called Playwright. Routing, the form, and the data load all worked.
A few things are worth knowing, even if you are new to code.
Don’t make the app wait for Power Apps before it shows anything. The SDK call that reads the signed-in user (getContext()) only finishes when the app runs inside Power Apps. On your laptop it never finishes, so let that call run in the background instead of holding up the first screen.
Turn on the hash version of routing with provideRouter(routes, withHashLocation()). In plain terms, it puts a # in the address bar. That keeps links and the refresh button working inside Power Apps.
Two smaller notes. Forms work out of the box, even with Angular’s newer “zoneless” setup, so you need no extra packages. We also added one tiny line of HTML for a favicon, purely to silence a harmless browser warning. With those settings, the Angular code app ran exactly like the others.
Where to go next
This Angular walkthrough is one stack in a larger set. For the big picture, read the pillar guide on choosing any Vite framework for Power Apps code apps. From there you can compare the smoother stacks, namely React, Vue, Svelte, Solid, and Preact.
For the authoritative platform reference, see the Power Apps code apps documentation on Microsoft Learn.
Leave a Reply