feat: add option to disable route extraction feature

[eneajaho]

Command

build

Description

When migrating apps to SSR, route extraction basically gets in the way and makes it harder to understand where the issue/error is coming from, as it tries to run before everything else either during build or server.

Instead of fixing other SSR related errors, I have to go and fix route extraction issues.

Also, there is no way to know if route extraction is happening. But even if it was possible the code would be full of checks on what mode is Angular running, and having to deal with all the states instead of just handling a normal case of -> open the url -> render angular -> serve html.

Describe the solution you'd like

Add a flag to disable route extraction during build or serve totally, at least just for development purposes.
When routes are dynamically loaded based on config, having the extraction happen before the config can be loaded breaks the dynamic apps. If I build my app with a config that has 3 routes, and then on runtime I want to use another config.json file to load other routes (that also include the first three but with different configs), would cause my app to misbehave because of the initial extracted routes.

---

NG_BUILD_PARTIAL_SSR=1 partially solves this by skipping the route extraction and doing it initial request.

Repo

Comment out line 9 to better understand that serving or building the app is painful, even though on normal conditions opening localhost:4200/config.json loads fine.

https://github.com/eneajaho/dx-issue/blob/main/src/main.server.ts#L9

[eneajaho]

Also, having errors without stacktrace showing up is not that great.

[alan-agius4]

The current behavior is expected due Node.js fetch URL Requirement, you are using Node.js fetch, which requires absolute URLs. Relative URLs are not valid in this environment and will cause an error. Angular's built-in HttpClient has logic to handle URL transformations that fetch lacks.

I am curios why this configuration loading approach was chosen? IMHO, using DI to load the config is much cleaner, and in your case actually would be more performant as the configuration will not be requested both on the browser and client.

Example:

export const appConfig = {
  providers: [
     // other providers.
    provideHttpClient(withFetch()),
    {
      provide: CONFIG_TOKEN,
      useFactory: async () => {
        const httpClient = inject(HttpClient);
        return httpClient.get('/config.json').toPromise();
      },
    },
  ],
};

[jnizet]

@alan-agius4 Your alternative will provide a Promise<Config>, not a Config, won't it?

So all the code dealing with this config would have to be asynchronous and handle a potential loading error, whereas the original solution allows the code to be synchronous.

[alan-agius4]

One other alternative would be to use the provideAppInitializer

@Injectable()
export class ConfigService {
  private config: any;

  setConfig(data: any): void {
    this.config = data;
  }

  getConfig(): any {
    return this.config;
  }
}

function initializeAppConfig() {
  const http = inject(HttpClient);
  const configService = inject(ConfigService);

  return firstValueFrom(
    http.get('/config.json').pipe(
      tap(config => {
        configService.setConfig(config);
      })
    )
  );
}

bootstrapApplication(AppComponent, {
  providers: [
    …,
    provideAppInitializer(initializeAppConfig),
  ],
});