docs: add angular with vite example

[drdreo]

I've created a plain Angular project using their CLI. With ng version 17.3 it also comes with vite so it could fit into that category.
The project also demos quickly how to use the plugins to get started.

Intention

I was not finding a single reference regarding Angular in the UnoCSS documentation which lead to the conclusion Angular is not supported. This is very much the opposite and I want to help to change that perception.

It would have great benefits having at least a demo example referenced inside the official docs. This could spread awareness of this great tool amongst the ng-folk.

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ecf2bbf
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/6643aad8a2b1170008773f77
😎 Deploy Preview	https://deploy-preview-3792--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[zyyv]

That's a great start, and you can refer to the other example, remove some unnecessary files, make it minimal.

[drdreo]

@zyyv thanks for the feedback. I have now removed all obsolete files, to have a minimal, servable project and also added the common stackblitz file (assuming this is needed for demo purposes).
I also added the entry to the examples cards here: https://unocss.dev/integrations/#examples But the i-logos-angular doesn't seem to exist yet.

Anything else you want me to add?

[userquin]

I also added the entry to the examples cards here: https://unocss.dev/integrations/#examples But the i-logos-angular doesn't seem to exist yet.

https://icones.js.org/collection/logos?s=angular (maybe we need to update iconify json dep)

EDIT: We can also use old Angular icon, or just add the official SVG icon (if any) to use it from file system.

[userquin]

@drdreo you can test your branch in SB: https://stackblitz.com/github/drdreo/unocss/tree/docs-vite-angular/examples/vite-angular

EDIT: it seems there is an error in SB: no idea why getting wrong branch (unocss is missing in package.json)

[userquin]

@drdreo can you run in root folder nr lint:fix to fix lint errors?

[drdreo]

@userquin My apologies, i had to setup pnpm first. Now its linted properly and i factored in your feedback.

[userquin]

I'll check the PR later... can you run the example working in your local? it seems there is some reference to src/uno.css file in angular and cannot be found, maybe we need to run something before?

[drdreo]

Yeah, so before Angular builds, we need the referenced uno.css file which is generated by the unocss cli.
For that i have added the "dev": "npm run build:css && npm run start", script which works for me locally. This is also used in the stackblitz.mjs but it seems the preview didn't update yet.

[userquin]

I'm going to include uno.css in .gitignores and fix pnpm workspace for the example... I'm also including cli.analytics = false in angular.json.

[userquin]

No idea what's wrong with my previous SB link, cloned repo can be found here: https://stackblitz.com/edit/stackblitz-starters-gybg14?file=package.json,src%2Funo.css