application builder: In SSR body of server.ts is not taken into consideration when running ng serve with @angular-devkit/angular-builder:dev-server

[pawelfras]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When setting up a new application with SSR on, the development mode (ng serve) doesn't use the content from the server.ts file. It looks like the build process only checks whether the server.ts file exists - even if the file is empty, the build goes through without issues and the app is served but if it's missing, you get an error like this:

✘ [ERROR] TS6053: File '/path/to/your/app/server.ts' not found.
  The file is in the program because:
    Root file specified for compilation [plugin angular-compiler]

If your app depends on some custom logic written in server.ts, e.g custom providers, injecting those into your app doesn't work right now in dev mode and it throws an error: NullInjectorError: No provider for [your_injectable].

Minimal Reproduction

Minimal reproduction:

• ng new test-app --ssr
• add console.log to server.ts
• ng serve

Message from console.log won't appear in the terminal.

Reproduction of example when you want to provide values in server.ts (e.g. as in migration steps from @nguniversal to @angular/ssr)

• run ng new test-app --ssr
• manually create injection tokens e.g for REQUEST
• in server.ts

import { REQUEST } from './src/express.tokens';

...


 // All regular routes use the Angular engine
 server.get('*', (req, res, next) => {
   const { protocol, originalUrl, baseUrl, headers } = req;

   commonEngine
     .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: REQUEST, useValue: req },
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

• inject the REQUEST token e.g. in app.component.ts
• run ng serve

After opening the app, you'll see R3InjectionError:

[vite] Internal server error: R3InjectorError(Standalone[_AppComponent])[InjectionToken REQUEST -> InjectionToken REQUEST -> InjectionToken REQUEST]: 
  NullInjectorError: No provider for InjectionToken REQUEST!

Exception or Error

No response

Your Environment

Angular CLI: 17.0.3
Node: 18.17.1
Package Manager: npm 10.0.0
OS: darwin arm64

Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.3
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cli                    17.0.3
@angular/ssr                    17.0.3
@schematics/angular             17.0.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

Duplicate of #26323

[SalathielGenese]

@alan-agius4, this issue is not a duplicate of #26323.

#26323 is concerned with the provisioning of REQUEST and RESPONSE within the context of the Angular stereotypes (component, directive, service, pipe, module).

While in this issue, we are concerned with the development tooling: in Angular v17, the start script runs ng serve which uses the @angular-devkit/build-angular:dev-server builder as specified in the angular.json. Here is the call stack we are interested in for this builder:

1. https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/dev-server/index.ts#L18
2. https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts#L75
3. https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts#L77
4. https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/dev-server/vite-server.ts#L78 which has a comment reading...

   // Avoid bundling and processing the ssr entry-point as this is not used by the dev-server.

[JeanMeche]

Sorry, this is definitly the same issue. Providers are no set because the vite devserver doesn't rely on the express config right now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}