dotnet / dotnet/aspnetcore

VS "ASP.NET Core with Angular" template: weather data never renders (zoneless CD), plus broken unit-test setup

Open
#69,078 1 comment 0 reactions 0 assignees View on GitHub
External
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.