VS "ASP.NET Core with Angular" template: weather data never renders (zoneless CD), plus broken unit-test setup
- Dominant language
- C#
- Stars
- 38.4k
- Forks
- 10.9k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 281
Description
### Is there an existing issue for this?
I searched `dotnet/aspnetcore` for `angular zoneless`, `esproj angular`, `angular karma vitest`, and `angular weather forecast empty` and found no duplicate.
### Describe the bug
Creating a new **ASP.NET Core with Angular** project in Visual Studio produces an app whose sample page renders the table headers but **never renders any data rows**. The API works correctly; the data arrives and is never displayed.
Root cause: the generated workspace is **zoneless** (Angular 22 default — no `polyfills` entry in `angular.json`, `zone.js` is not a dependency and is not installed), but the `app.ts` that Visual Studio writes stores the HTTP result in a **plain mutable field**:
```ts
public forecasts: WeatherForecast[] = [];
this.http.get('/weatherforecast').subscribe(
(result) => { this.forecasts = result; }, // nothing triggers change detection
(error) => { console.error(error); }
);
```
With no zone.js there is no patched XHR to trigger change detection, and a plain field assignment is not reactive, so the view is never re-rendered after the response arrives.
Secondary effect: `forecasts` is initialised to `[]`, which is truthy, so `*ngIf="forecasts"` shows the table immediately and the intended `Loading...` branch is unreachable.
### Additional defects in the same generated project
Three more, all independent of the above:
1. **`src/app/app.spec.ts` has a syntax error.** The file ends with `};` instead of `});` — the `describe(` call is never closed, so the spec cannot compile.
2. **The unit-test setup references karma, which is not installed.** `angular.json` sets `test.options.karmaConfig: "karma.conf.js"`, and a `karma.conf.js` is generated that `require`s `karma-jasmine`, `karma-chrome-launcher`, `karma-jasmine-html-reporter`, `karma-coverage` and `@angular-devkit/build-angular/plugins/karma`. **None of those are in `package.json`.** The workspace is otherwise configured for vitest (`vitest` + `jsdom` in devDependencies, `tsconfig.spec.json` has `"types": ["vitest/globals"]`). Current `ng new` generates neither `karma.conf.js` nor the `karmaConfig` option.
3. **`jest-editor-support` is added to `dependencies`** (a runtime dependency, in a vitest project) rather than `devDependencies`, and unpinned as `"*"`.
Minor: `tsconfig.app.json` / `tsconfig.spec.json` carry `outDir` entries that current `ng new` no longer emits.
### These are introduced by the VS patch steps, not by the Angular CLI
I generated a clean workspace with the same CLI version and flags the template records, and diffed it against the generated project:
```
npx @angular/cli@22.1.7 new --style=css --ssr=false --no-standalone --routing --skip-git --skip-install --defaults
```
The CLI output has **none** of these defects. Every one of them maps to a step the template's own `CHANGELOG.md` lists:
> - Create Angular project with ng: `ng new --defaults --skip-install --skip-git --no-standalone`
> - **Update app.ts component to fetch and display weather information.**
> - **Modify app.spec.ts with updated tests.**
> - **Add `karma.conf.js` for unit tests.**
> - **Update `angular.json` to point to `karma.conf.js`.**
> - **Update package.json to add `jest-editor-support`.**
The integration layer appears to predate Angular's zoneless default and the karma-to-vitest switch.
### Expected Behavior
A newly created project should display the weather forecast rows on first run, and `npm test` should run.
### Steps To Reproduce
1. Visual Studio → Create a new project → **ASP.NET Core with Angular** → .NET 10.
2. F5 (https profile).
3. Observe: heading, description and table headers render; no data rows. `GET /weatherforecast` returns 200 with valid JSON.
4. `npm test` fails — `karma.conf.js` cannot resolve its `require`s, and `app.spec.ts` does not parse.
### Suggested fix
Make the sample state a signal, which restores reactivity without reintroducing zone.js:
```ts
public readonly forecasts = signal(undefined);
this.http.get('/weatherforecast').subscribe({
next: (result) => this.forecasts.set(result),
error: (error) => console.error(error)
});
```
with `@if (forecasts(); as forecasts) { ... @for (forecast of forecasts; track forecast.date) { ... } }` in the template. Separately, drop `karma.conf.js` and the `karmaConfig` option, fix the `app.spec.ts` paren, and move `jest-editor-support` to `devDependencies` (pinned).
I understand the template itself lives in Visual Studio rather than this repo — filing here for visibility, as with #52049. Happy to also file on Developer Community.
### Exceptions (if any)
None — no console errors. The failure is silent.
### .NET Version
10.0.400
### Anything else?
- Visual Studio 18.9.12120.119 (Community). VS 2022 17.14.37314.3 also installed; the solution is `.slnx` / `net10.0`, created by VS 18.9.
- Template pins `@angular/*` at `^22.0.0` and `@angular/cli` at `^22.0.4`; resolved installs were `@angular/core` 22.1.5 and `@angular/cli` 22.1.7.
- `dotnet new details angular` reports no template package, and `C:\Program Files\dotnet\templates\10.0.11\` contains no SPA templates, confirming this ships with VS rather than the SDK.
Contributor guide
Research direction
Start with the template steps listed in CHANGELOG.md and compare the generated app.ts, app.spec.ts, angular.json, package.json, karma.conf.js, and tsconfig files with a clean Angular 22 workspace using the documented ng new command. Reproduce the forecast rendering failure and run npm test; done means the generated page displays weather rows and the unit tests run without the broken Karma setup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, testing, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100