After updating to angular 17 ssr rendering by default use caching for the http get methods, this is confirmed by the angular team. For me the caching not really works. My backend is .Net Core.
As you can see the GetProducts request is loaded after the html is loaded..
Here is the app.component.ts
export interface Product {
productId: number;
name: string;
price: number;
color: string;
size: string;
description: string,
orderItems: any[],
productImages: any[]
}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
products: Product[] = []
title = 'Gyakor';
constructor(private productService: ProductService, private httpClient: HttpClient) {
}
ngOnInit() {
this.httpClient.get<Product[]>("https://localhost:7283/api/Products/GetProducts").subscribe((result) => {
this.products = result;
})
}
}
The app.config
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient(withFetch()), provideClientHydration()]
};
The app.config.server.ts
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering()
]
};
export const config = mergeApplicationConfig(appConfig, serverConfig);
I tried changing the imports, and updating Angular. A little detail is that I get a Error: self-signed certificate when trying to fetch, but the fetch still runs, so I don't think this is caching problem. But change my mind if you can, I'm open for ideas.
withFetch, your request should not show up asxhrin the network debug tool !