build(angular): v21

[rbalet]

Rebuilt the project with angular v21

Changes

• Fully standalone
• Migration to vitest
• Migration to v21 (Skipped v20)
• Remove scss dependency in favor of css
• Remove clean-publish dependency as it seems useless
• Bump to minimum node 20 requirement

Note

• I had to rename @nanostores-angular to nanostores-angular because of a typo
• I still have an error on starting the test, but it goes through with a success, I have not the knowledge to understand what the error is :/
• Closes: upgrade to angular v21 #4

[ninaTorgunakova]

Looks great @rbalet, sorry for this delay with review - long Christmas holidays!

Just a couple of small comments from me, also there is a couple of merge conflicts with master

[ninaTorgunakova]

Can we preserve the old readme content:

https://github.com/nanostores/angular/blob/main/README.md

[rbalet]

@ninaTorgunakova I believe I did not change it.
Can you double check ?

[ninaTorgunakova]

Sorry, wrong link, I meant this one:

https://github.com/nanostores/angular/blob/main/projects/%40nanostores-angular/README.md

Added a suggestion in the code

[ninaTorgunakova]

Suggested change

	# NanostoresAngular
	This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
	## Code scaffolding
	Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
	```bash
	ng generate component component-name
	```
	For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
	```bash
	ng generate --help
	```
	## Building
	To build the library, run:
	```bash
	ng build nanostores-angular
	```
	This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
	### Publishing the Library
	Once the project is built, you can publish your library by following these steps:
	1. Navigate to the `dist` directory:
	```bash
	cd dist/nanostores-angular
	```
	2. Run the `npm publish` command to publish your library to the npm registry:
	```bash
	npm publish
	```
	## Running unit tests
	To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
	```bash
	ng test
	```
	## Running end-to-end tests
	For end-to-end (e2e) testing, run:
	```bash
	ng e2e
	```
	Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
	## Additional Resources
	For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
	# Nano Stores Angular
	<img align="right" width="92" height="92" title="Nano Stores logo"
	src="https://nanostores.github.io/nanostores/logo.svg">
	Angular integration for **[Nano Stores]**, a tiny state manager
	with many atomic tree-shakable stores.
	## How to install
	```sh
	pnpm add @nanostores/angular # or npm or yarn

How to use

// your NgModule:
import { NANOSTORES, NanostoresService } from '@nanostores/angular';

@NgModule({ providers: [{ provide: NANOSTORES, useClass: NanostoresService }], ... })

app.component.ts:

// example using async pipes:
import { Component } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { Observable, switchMap } from 'rxjs';

import { profile } from '../stores/profile';
import { IUser, User } from '../stores/user';

@Component({
  selector: "app-root",
  template: '<p *ngIf="(currentUser$ | async) as user">{{ user.name }}</p>'
})
export class AppComponent {
  currentUser$: Observable<IUser> = this.nanostores.useStore(profile)
    .pipe(switchMap(({ userId }) => this.nanostores.useStore(User(userId))));

  constructor(private nanostores: NanostoresService) { }
}

// example without async pipes:
import { Component, OnInit } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { switchMap } from 'rxjs';

import { profile } from '../stores/profile';
import { User } from '../stores/user';

@Component({
  selector: "app-root",
  template: '<p>{{ text }}</p>'
})
export class AppComponent implements OnInit {
  text = '';

  constructor(private nanostores: NanostoresService) { }

  ngOnInit() {
    this.nanostores.useStore(profile).pipe(
      switchMap(({ userId }) => this.nanostores.useStore(User(userId)))
    )
    .subscribe(user => this.text = `User name is ${user.name}`);
  }
}

```

[ninaTorgunakova]

Sorry, wrong link, I meant this one:

https://github.com/nanostores/angular/blob/main/projects/%40nanostores-angular/README.md

Added a suggestion in the code