Fail to deploy Angular project on Cloudflare Pages

Website, Application, Performance
1

I tried to deploy my Angular project from my Github repository with Cloudflare free plan.

But failed. How can I success deploy?

About project:

  • The project doesn’t include SSR or SSG.
  • I added .nvmrc to project.

Build settings on cloudflare is default:

Build command:
npm run build
Build output directory:
/dist/cloudflare
Build system version:
2 (latest)
Root directory:
/
Environment variables:
None

This is last part of build log:

11:57:04.079 Finished
11:57:04.079 Note: No functions dir at /functions found. Skipping.
11:57:04.080 Validating asset output directory
11:57:04.080 Error: Output directory “dist/cloudflare” not found.
11:57:05.266 Failed: build output directory not found

My project doesn’t have “dist” directory.

2

You need to set the build output directory to match what you get when building locally.

1 Like
3

Thank you. After I added folder, it was deployed successfully. But site returns 404. There is still a probrem.
By the way, the strange thing is default build directory when select Angular, dist/cloudflare.https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/ When you generated Angular project by ng new, dist is registered in .gitignore. So, if you add dist directory locally, it is not refrected to GitHub. Actually, I had to add directory on GitHub. This is unconfortable. Why is default build directory unconfortable? Anyway document is wrong because deploy fails in spite of following description. It should be fixed. And I have to start another discussion about wrong document.

4

This is because the directory will be created when you run the build command, so you don’t need to commit the code.

Is your code public?

5

Thank you. I can share two repositories.

This includes .nvmrc I added manually and files that were generated by ng new. And it doesn’t include code for SSR and dist directory.
Now I fail to deploy this from GitHub on Cloudflare when I select angular. Settings is in my first post. This is full log:

6
2024-05-16T13:12:07.343286Z Cloning repository…
2024-05-16T13:12:08.006636Z From GitHub - sakairy/angular-dafault
2024-05-16T13:12:08.007371Z * branch c11475b24bde875a417f0e51249c56c84941b5ca → FETCH_HEAD
2024-05-16T13:12:08.007492Z
2024-05-16T13:12:08.040158Z HEAD is now at c11475b a
2024-05-16T13:12:08.040556Z
2024-05-16T13:12:08.12571Z
2024-05-16T13:12:08.126223Z Using v2 root directory strategy
2024-05-16T13:12:08.151568Z Success: Finished cloning repository files
2024-05-16T13:12:09.887423Z Checking for configuration in a wrangler.toml configuration file (BETA)
2024-05-16T13:12:09.888216Z
2024-05-16T13:12:09.990607Z No wrangler.toml file found. Continuing.
2024-05-16T13:12:11.146403Z Detected the following tools from environment: [email protected], [email protected]
2024-05-16T13:12:11.14688Z Installing nodejs 22.2.0
2024-05-16T13:12:11.702706Z Trying to update node-build… ok
2024-05-16T13:12:11.908327Z Downloading node-v22.2.0-linux-x64.tar.gz…
2024-05-16T13:12:11.908614Z → https://nodejs.org/dist/v22.2.0/node-v22.2.0-linux-x64.tar.gz
2024-05-16T13:12:13.638652Z Installing node-v22.2.0-linux-x64…
2024-05-16T13:12:14.045589Z Installed node-v22.2.0-linux-x64 to /opt/buildhome/.asdf/installs/nodejs/22.2.0
2024-05-16T13:12:14.045815Z
2024-05-16T13:12:15.144806Z Installing project dependencies: npm clean-install --progress=false
2024-05-16T13:12:23.487628Z
2024-05-16T13:12:23.488018Z added 925 packages, and audited 926 packages in 8s
2024-05-16T13:12:23.488329Z
2024-05-16T13:12:23.488454Z 118 packages are looking for funding
2024-05-16T13:12:23.488552Z run npm fund for details
2024-05-16T13:12:23.489574Z
2024-05-16T13:12:23.489741Z found 0 vulnerabilities
2024-05-16T13:12:23.507221Z Executing user command: npm run build
2024-05-16T13:12:23.91952Z
7

|2024-05-16T13:12:23.919809Z|> [email protected] build|
|2024-05-16T13:12:23.919963Z|> ng build|
|2024-05-16T13:12:23.920089Z||
|2024-05-16T13:12:24.630752Z|- Building…|
|2024-05-16T13:12:24.631008Z||
|2024-05-16T13:12:29.407583Z|Initial chunk files | Names | Raw size | Estimated transfer size|
|2024-05-16T13:12:29.40786Z|main-EQBYMZJE.js | main | 193.18 kB | 52.50 kB|
|2024-05-16T13:12:29.407999Z|polyfills-S3BTP7ME.js | polyfills | 33.24 kB | 10.76 kB|
|2024-05-16T13:12:29.40815Z|styles-5INURTSO.css | styles | 0 bytes | 0 bytes|
|2024-05-16T13:12:29.408296Z||
|2024-05-16T13:12:29.408403Z| | Initial total | 226.42 kB | 63.26 kB|
|2024-05-16T13:12:29.40856Z||
|2024-05-16T13:12:29.40867Z|Output location: /opt/buildhome/repo/dist/nossr|
|2024-05-16T13:12:29.408765Z||
|2024-05-16T13:12:29.408854Z|Application bundle generation complete. [4.775 seconds]|
|2024-05-16T13:12:29.408959Z||
|2024-05-16T13:12:29.52084Z|Finished|
|2024-05-16T13:12:29.521486Z|Note: No functions dir at /functions found. Skipping.|
|2024-05-16T13:12:29.521614Z|Validating asset output directory|
|2024-05-16T13:12:29.521747Z|Error: Output directory dist/cloudflare not found.|
|2024-05-16T13:12:30.459097Z|Failed: build output directory not found|

8

I can see warning icon on side of “Building application”.
[url](h ttps://angular-dafault.pages.dev/)

h ttps://github.com/sakairy/angular_practice
This doesn’t include SSR but includes some components and other code. Additionally, I added dist/cloudflare on GitHub.
I deployed it on Cloudflare in following condition.

  • From GitHub
  • Select Angular
  • Default Settings
    Doploy seems to be succeeded, but I can’t see the site.
    [url](h ttps://angular-practice.pages.dev/)
9

i restrected include many url so i separeted.

10

Change your output directory to /dist/nossr/browser.

1 Like
14

Thank you. Everything is fine! I had to set output directory to what includes index.html in dist.

15

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.