0

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.

1
  • Something doesn't match. If you use withFetch, your request should not show up as xhr in the network debug tool ! Commented Dec 30, 2023 at 13:30

1 Answer 1

0

I got it, I post my answer, hopefully it will help anybody else who gets this error!

Basically the Error: self-signed certificate which I mentioned was the problem. Seems like if any error happens at the nodeJs part of the application the client will fetch the data not the nodeJs.

I basically updated my backend to a hosting server (because the certificate over there is correct), and tried to fetch from over there. And it works flawlessly.

So basically any nodeJs side error must be resolved or the fetch will happen on the client side!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.