[BUG] Could not load index.html

[mparpaillon]

Please provide the environment you discovered this bug in.

"@analogjs/content": "^1.10.2-beta.8",
"@analogjs/router": "^1.10.2-beta.8",
"@analogjs/trpc": "0.3.0",
"@angular-magic/ngx-gp-autocomplete": "^2.0.2",
"@angular/animations": "^19.1.0",
"@angular/cdk": "^19.1.0",
"@angular/common": "^19.1.0",
"@angular/compiler": "^19.1.0",
"@angular/core": "^19.1.0",
"@angular/forms": "^19.1.0",
"@angular/platform-browser": "^19.1.0",
"@angular/platform-browser-dynamic": "^19.1.0",
"@angular/platform-server": "^19.1.0",
"@angular/router": "^19.1.0",

"@analogjs/platform": "^2.0.0-alpha.2",
"@analogjs/vite-plugin-angular": "^2.0.0-alpha.2",
"@analogjs/vitest-angular": "^2.0.0-alpha.2",
"@angular-devkit/build-angular": "^19.1.0",
"@angular-eslint/eslint-plugin": "^19.0.2",
"@angular-eslint/eslint-plugin-template": "^19.0.2",
"@angular-eslint/template-parser": "^19.0.2",
"@angular/build": "^19.1.0",
"@angular/cli": "^19.1.0",
"@angular/compiler-cli": "^19.1.0",
"@angular/language-service": "^19.1.0",
"@angular/ssr": "^19.1.0",
"@nx/angular": "20.2.2",
"@nx/cypress": "19.8.2",
"@nx/devkit": "19.8.2",
"@nx/eslint": "19.8.2",
"@nx/eslint-plugin": "19.8.2",
"@nx/jest": "19.8.2",
"@nx/js": "19.8.2",
"@nx/vite": "19.8.2",
"@nx/workspace": "19.8.2",

Which area/package is the issue in?

vite-plugin-nitro

Description

Hi,
The nx build task doesn't seem to work for me.

Does this error ring a bell? It seems to happen when trying to Prerender static pages.

nx build marketplace --skip-nx-cache

   ✖  1/8 dependent project tasks failed (see below)
   ✔  7/8 dependent project tasks succeeded [0 read from cache]

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————


> nx run marketplace:build:production

vite v6.2.2 building for production...
transforming...
✓ 1528 modules transformed.
Prerendering static pages...

[nitro]  ERROR  Error: Could not load /Users/michel/www/optee/dist/apps/marketplace/client/index.html (imported by node_modules/@analogjs/vite-plugin-nitro/src/lib/runtime/renderer-client.ts): ENOENT: no such file or directory, open '/Users/michel/www/optee/dist/apps/marketplace/client/index.html'


undefined

✗ Build failed in 14.59s

 NX   [@analogjs/vite-plugin-nitro] Could not load /Users/michel/www/optee/dist/apps/marketplace/client/index.html (imported by node_modules/@analogjs/vite-plugin-nitro/src/lib/runtime/renderer-client.ts): ENOENT: no such file or directory, open '/Users/michel/www/optee/dist/apps/marketplace/client/index.html'

Pass --verbose to see the stacktrace.


————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Ran target build for project marketplace and 8 task(s) they depend on (32s)

   ✖  1/8 failed
   ✔  7/8 succeeded [0 read from cache]

Please provide the exception or error you saw

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Are you using any custom options in the vite config for the build? Seems like the dist/apps/marketplace/client folder is empty

[mparpaillon]

Yes I do but starting a new Analog app in my NX Monorepo and using my vite.config seemed to work. What broke was copying my app folder to this new Analog app.

What I understand is that something goes wrong during the build but absolutely no error is visible. Only thing I see is that the next phase can't work since client folder is empty.

My build config is

 build: {
  outDir: "../../dist/apps/marketplace/client",
  reportCompressedSize: true,
  sourcemap: true,
  target: ["es2020"],
},

[mparpaillon]

Apparently that was the issue...

I don't understand why

[brandonroberts]

Apparently that was the issue...

I don't understand why

Yea, that shouldn't impact this usually. So the client app failed to build without this?

[mparpaillon]

I'm sorry. At this point I really don't understand what's going on. It builds (and serves) now but it doesn't actually run

I'm getting this error (in the browser console) when I try to locally run the app

Uncaught (in promise) RuntimeError: NG04014: Invalid configuration of route ''. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren

I don't even know where to go from here

I see the warning about the lack of default export but there is one in (redirect).page.ts so I don't get it

import type { RouteMeta } from "@analogjs/router";
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
import type { CanActivateFn } from "@angular/router";
import { Router } from "@angular/router";
import { SupabaseService } from "../supabase.service";

export const RedirectGuard: CanActivateFn = async () => {
  const router = inject(Router);
  const session = await SupabaseService.getSession();

  if (!session) {
    router.navigate(["/auth"]);
  } else {
    router.navigate(["/client"]);
  }

  return true;
};

export const routeMeta: RouteMeta = {
  canActivate: [RedirectGuard],
};

@Component({
  selector: "mkp-redirection-page",
  template: ``,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class RedirectComponent {}

[brandonroberts]

That's correct because you removed the src/app/**/*.page.ts from the tsconfig.app.json. Now the route files aren't getting compiled correctly and just return an empty string.

What's in your outputPath in your angular.json/project.json? That overrides the build.outDir in the vite.config.ts

[mparpaillon]

Hmmmm makes sense :(
Thanks Brandon

Here is the project.json

"outputs": [
  "{options.outputPath}",
  "{workspaceRoot}/dist/apps/marketplace/.nitro",
  "{workspaceRoot}/dist/apps/marketplace/ssr",
  "{workspaceRoot}/dist/apps/marketplace/analog"
],
"inputs": [
  "vite"
],
"options": {
  "main": "apps/marketplace/src/main.ts",
  "configFile": "apps/marketplace/vite.config.ts",
  "outputPath": "dist/apps/marketplace/client",
  "tsConfig": "apps/marketplace/tsconfig.app.json"
}

And yeah, as soon as I put back "src/app/**/*.page.ts" in my tsconfig.app.json then I get the error again

I guess the build doesn't work even the verbose mode doesn't tell me why...

[brandonroberts]

If you can reproduce this in a small standalone repo that would help. Its hard to diagnose as you're also using Analog 2.0 alpha packages.

[mparpaillon]

OK. I'll have a look. What I don't understand is that the npm serve works well once I put back the "src/app/**/*.page.ts"

[mparpaillon]

To be honest I'm kinda tired of debugging this.

I tried to remove folder by folder, page by page to find the source of the issue and at some point I managed to build the app. So I started going backward to understand which page was the issue and now I'm getting the following error again

Saddest part is that even if I completely rollback I still get this error now. The flakiness and the lack of meaningful logs is quite annoying.
I really tried hard to use Analog in production but I think I'll have to move away from it

[brandonroberts]

@mparpaillon That's fair. These are problems that haven't been encountered and we haven't changed anything about the build process. If you can invite me to the repo, I can take a closer look. If not, I understand.

Looking back I saw you're building with 2 different versions of Vite from the screenshots. If there are 2 different versions installed that could cause issues also.