Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 BUG: Following deploy-an-angular-site documentation fails when actually deploying #5527

Closed
marceloverdijk opened this issue Apr 5, 2024 · 6 comments
Labels
bug Something that isn't working c3 Relating to C3 (create-cloudflare) package

Comments

@marceloverdijk
Copy link

Which Cloudflare product(s) does this pertain to?

C3

What version(s) of the tool(s) are you using?

2.17.1 [C3]

What version of Node are you using?

20.12.0

What operating system and version are you using?

Mac

Describe the Bug

Observed behavior

Following https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/ documentation gives build error when deploying:

09:25:06.071	Error: Output directory "dist/cloudflare" not found.
09:25:07.230	Failed: build output directory not found

Expected behavior

When following the exact steps from the documentation, build successfully deployed.

Steps to reproduce

I've followed https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/ to create a new Angular project using:

npm create cloudflare@latest my-angular-app -- --framework=angular

using create-cloudflare version 2.17.1

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-angular-app
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Angular
│
├ Continue with Angular via `npx @angular/[email protected] my-angular-app --ssr`
│

? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE my-angular-app/README.md (1066 bytes)
CREATE my-angular-app/.editorconfig (274 bytes)
CREATE my-angular-app/.gitignore (548 bytes)
CREATE my-angular-app/angular.json (2996 bytes)
CREATE my-angular-app/package.json (1287 bytes)
CREATE my-angular-app/tsconfig.json (903 bytes)
CREATE my-angular-app/tsconfig.app.json (324 bytes)
CREATE my-angular-app/tsconfig.spec.json (273 bytes)
CREATE my-angular-app/server.ts (1703 bytes)
CREATE my-angular-app/.vscode/extensions.json (130 bytes)
CREATE my-angular-app/.vscode/launch.json (470 bytes)
CREATE my-angular-app/.vscode/tasks.json (938 bytes)
CREATE my-angular-app/src/main.ts (250 bytes)
CREATE my-angular-app/src/favicon.ico (15086 bytes)
CREATE my-angular-app/src/index.html (298 bytes)
CREATE my-angular-app/src/styles.scss (80 bytes)
CREATE my-angular-app/src/main.server.ts (264 bytes)
CREATE my-angular-app/src/app/app.component.scss (0 bytes)
CREATE my-angular-app/src/app/app.component.html (19903 bytes)
CREATE my-angular-app/src/app/app.component.spec.ts (940 bytes)
CREATE my-angular-app/src/app/app.component.ts (311 bytes)
CREATE my-angular-app/src/app/app.config.ts (321 bytes)
CREATE my-angular-app/src/app/app.routes.ts (77 bytes)
CREATE my-angular-app/src/app/app.config.server.ts (350 bytes)
CREATE my-angular-app/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

├ Copying template files
│ files copied to project directory
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Updating angular.json config
│ updated `angular.json`
│
├ Updating application code
│ updated src/app/app.config.ts
│
├ Updating package.json
│ updated `package.json`
│
├ Installing adapter dependencies
│ installed via `npm install`
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Retrieving current workerd compatibility date
│ compatibility date 2024-04-04
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd my-angular-app
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

Then I pushed this to https://github.com/marceloverdijk/my-angular-app using:

git branch -M main
git remote add origin [email protected]:marceloverdijk/my-angular-app.git
git push -u origin main

Then I created a new Pages project with the default settings:

image

Which is similar as in the documentation page:

image

After creating the project the build starts, but fails with:

09:25:06.071	Error: Output directory "dist/cloudflare" not found.
09:25:07.230	Failed: build output directory not found

(see full logs below)

Please provide a link to a minimal reproduction

https://github.com/marceloverdijk/my-angular-app

Please provide any relevant error logs

2024-04-05T07:24:37.788807Z	Cloning repository...
2024-04-05T07:24:38.760565Z	From https://github.com/marceloverdijk/my-angular-app
2024-04-05T07:24:38.761248Z	 * branch            28db06ea840da97cef3f9edf59f8f6c2fd49fb3f -> FETCH_HEAD
2024-04-05T07:24:38.761459Z	
2024-04-05T07:24:38.795375Z	HEAD is now at 28db06e Initialize web application via create-cloudflare CLI
2024-04-05T07:24:38.795831Z	
2024-04-05T07:24:38.877739Z	
2024-04-05T07:24:38.878321Z	Using v2 root directory strategy
2024-04-05T07:24:38.901142Z	Success: Finished cloning repository files
2024-04-05T07:24:40.588745Z	No wrangler.toml file found
2024-04-05T07:24:40.74494Z	Detected the following tools from environment: [email protected], [email protected]
2024-04-05T07:24:40.745562Z	Installing project dependencies: npm clean-install --progress=false
2024-04-05T07:24:44.698116Z	npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
2024-04-05T07:24:44.700688Z	npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
2024-04-05T07:24:53.803947Z	
2024-04-05T07:24:53.804271Z	added 988 packages, and audited 989 packages in 12s
2024-04-05T07:24:53.804415Z	
2024-04-05T07:24:53.804517Z	126 packages are looking for funding
2024-04-05T07:24:53.804665Z	  run `npm fund` for details
2024-04-05T07:24:53.816391Z	
2024-04-05T07:24:53.816638Z	3 vulnerabilities (1 low, 2 moderate)
2024-04-05T07:24:53.816732Z	
2024-04-05T07:24:53.816845Z	To address all issues (including breaking changes), run:
2024-04-05T07:24:53.816963Z	  npm audit fix --force
2024-04-05T07:24:53.817095Z	
2024-04-05T07:24:53.817201Z	Run `npm audit` for details.
2024-04-05T07:24:53.842455Z	Executing user command: npx ng build --configuration production
2024-04-05T07:24:55.280742Z	- Building...
2024-04-05T07:24:55.281113Z	
2024-04-05T07:25:05.966617Z	Browser bundles        
2024-04-05T07:25:05.966888Z	Initial chunk files     | Names               |  Raw size | Estimated transfer size
2024-04-05T07:25:05.967074Z	main-HJTHD5EI.js        | main                | 223.32 kB |                61.05 kB
2024-04-05T07:25:05.967205Z	polyfills-RT5I6R6G.js   | polyfills           |  33.10 kB |                10.72 kB
2024-04-05T07:25:05.967311Z	styles-5INURTSO.css     | styles              |   0 bytes |                 0 bytes
2024-04-05T07:25:05.967409Z	
2024-04-05T07:25:05.96751Z	                        | Initial total       | 256.43 kB |                71.77 kB
2024-04-05T07:25:05.967613Z	
2024-04-05T07:25:05.967715Z	
2024-04-05T07:25:05.967832Z	Server bundles         
2024-04-05T07:25:05.967932Z	Initial chunk files     | Names               |  Raw size
2024-04-05T07:25:05.968031Z	chunk-SAMN74NJ.mjs      | -                   | 519.78 kB |                        
2024-04-05T07:25:05.968133Z	polyfills.server.mjs    | polyfills.server    | 261.67 kB |                        
2024-04-05T07:25:05.968253Z	chunk-SYPW6T6X.mjs      | -                   |  18.75 kB |                        
2024-04-05T07:25:05.968354Z	chunk-HQUS2UUF.mjs      | -                   |   2.05 kB |                        
2024-04-05T07:25:05.968446Z	render-utils.server.mjs | render-utils.server |   1.42 kB |                        
2024-04-05T07:25:05.968546Z	server.mjs              | server              | 490 bytes |                        
2024-04-05T07:25:05.968705Z	main.server.mjs         | main.server         | 149 bytes |                        
2024-04-05T07:25:05.968809Z	
2024-04-05T07:25:05.968909Z	Lazy chunk files        | Names               |  Raw size
2024-04-05T07:25:05.969031Z	chunk-DMHSCYU6.mjs      | xhr2                |  11.80 kB |                        
2024-04-05T07:25:05.969141Z	
2024-04-05T07:25:05.969263Z	Prerendered 1 static route.
2024-04-05T07:25:05.96937Z	Output location: /opt/buildhome/repo/dist
2024-04-05T07:25:05.969468Z	
2024-04-05T07:25:05.969597Z	Application bundle generation complete. [10.683 seconds]
2024-04-05T07:25:05.969724Z	
2024-04-05T07:25:06.070755Z	Finished
2024-04-05T07:25:06.071385Z	Note: No functions dir at /functions found. Skipping.
2024-04-05T07:25:06.071518Z	Validating asset output directory
2024-04-05T07:25:06.071678Z	Error: Output directory "dist/cloudflare" not found.
2024-04-05T07:25:07.230932Z	Failed: build output directory not found
@marceloverdijk marceloverdijk added the bug Something that isn't working label Apr 5, 2024
@github-project-automation github-project-automation bot moved this to Untriaged in workers-sdk Apr 5, 2024
@marceloverdijk
Copy link
Author

marceloverdijk commented Apr 5, 2024

I'm starting to wonder if the documentation is corect anyway?

image

Is the npx ng build --configuration production command correct?

That just runs the ng build, which is e.g. diffrently that is one the generated package.json for e.g. deploy:

  "scripts": {
    "ng": "ng",
    "start": "npm run build && wrangler pages dev dist/cloudflare --compatibility-date=2024-04-04 --experimental-local",
    "build": "ng build && npm run process",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:my-angular-app": "node dist/my-angular-app/server/server.mjs",
    "process": "node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
    "deploy": "npm run build && wrangler pages deploy dist/cloudflare"
  },

E.g. the process step is not being executed that way...

@marceloverdijk
Copy link
Author

Also note when I do a local build using npm run build the output in ./dist/ is:

image

so there is ./dist/cloudflare folder.

@marceloverdijk
Copy link
Author

marceloverdijk commented Apr 5, 2024

I changed the build command from the default value npx ng build --configuration production to npm run build and then it seems to work.

But with the default genereated npm tasks:

  "scripts": {
    "ng": "ng",
    "start": "npm run build && wrangler pages dev dist/cloudflare --compatibility-date=2024-04-04 --experimental-local",
    "build": "ng build && npm run process",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:my-angular-app": "node dist/my-angular-app/server/server.mjs",
    "process": "node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
    "deploy": "npm run build && wrangler pages deploy dist/cloudflare"
  },

this won't use the production configuration, right?

I think there is piece missing in the documenatation or in the generated setup from npm create cloudflare@latest my-angular-app -- --framework=angular.

@admah admah added the c3 Relating to C3 (create-cloudflare) package label Apr 5, 2024
@haryasa
Copy link

haryasa commented Apr 11, 2024

I changed the build command from the default value npx ng build --configuration production to npm run build and then it seems to work.

But with the default genereated npm tasks:

  "scripts": {
    "ng": "ng",
    "start": "npm run build && wrangler pages dev dist/cloudflare --compatibility-date=2024-04-04 --experimental-local",
    "build": "ng build && npm run process",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:my-angular-app": "node dist/my-angular-app/server/server.mjs",
    "process": "node ./tools/copy-files.mjs && node ./tools/alter-polyfills.mjs",
    "deploy": "npm run build && wrangler pages deploy dist/cloudflare"
  },

this won't use the production configuration, right?

I think there is piece missing in the documenatation or in the generated setup from npm create cloudflare@latest my-angular-app -- --framework=angular.

If we look at the generated angular.json, the value of projects.my-angular-app.architect.build.defaultConfiguration should be production. It means that when the configuration is not specified on the command line, the build command by default will use production configuration.

In this case, ng build is the same as ng build --configuration production. So I think that it is correct to use npm run build for the "Build command" setting.

marceloverdijk added a commit to marceloverdijk/cloudflare-docs that referenced this issue Apr 11, 2024
dario-piotrowicz pushed a commit to cloudflare/cloudflare-docs that referenced this issue Apr 12, 2024
@github-project-automation github-project-automation bot moved this from Untriaged to Done in workers-sdk Apr 12, 2024
@Ningyoplug
Copy link

Using the default options for Angular isn't working for me.

56546

Log:

2024-06-12T11:50:24.012781Z	Cloning repository...
2024-06-12T11:50:25.163674Z	From https://github.com/Ningyoplug/HSRchat
2024-06-12T11:50:25.16421Z	 * branch            14adb2abb04406ff4d4e32356cf426f50f9e9b27 -> FETCH_HEAD
2024-06-12T11:50:25.164314Z	
2024-06-12T11:50:25.371042Z	HEAD is now at 14adb2a Removed the thing I was testing
2024-06-12T11:50:25.371544Z	
2024-06-12T11:50:25.460319Z	
2024-06-12T11:50:25.461046Z	Using v2 root directory strategy
2024-06-12T11:50:25.486722Z	Success: Finished cloning repository files
2024-06-12T11:50:27.103513Z	Checking for configuration in a wrangler.toml configuration file (BETA)
2024-06-12T11:50:27.104332Z	
2024-06-12T11:50:27.220727Z	No wrangler.toml file found. Continuing.
2024-06-12T11:50:27.371615Z	Detected the following tools from environment: [email protected], [email protected]
2024-06-12T11:50:27.372325Z	Installing project dependencies: npm clean-install --progress=false
2024-06-12T11:50:31.196894Z	npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
2024-06-12T11:50:33.100657Z	npm WARN deprecated [email protected]: Use your platform's native atob() and btoa() methods instead
2024-06-12T11:50:33.23736Z	npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
2024-06-12T11:50:33.683426Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
2024-06-12T11:50:33.726656Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
2024-06-12T11:50:33.758639Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead.
2024-06-12T11:50:33.759419Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
2024-06-12T11:50:33.78197Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
2024-06-12T11:50:33.782499Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead.
2024-06-12T11:50:33.783013Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead.
2024-06-12T11:50:33.783547Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
2024-06-12T11:50:33.783874Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
2024-06-12T11:50:33.826554Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
2024-06-12T11:50:33.827773Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
2024-06-12T11:50:33.845617Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
2024-06-12T11:50:33.899081Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
2024-06-12T11:50:33.941574Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
2024-06-12T11:50:33.981147Z	npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
2024-06-12T11:50:41.228485Z	
2024-06-12T11:50:41.228713Z	added 945 packages, and audited 946 packages in 13s
2024-06-12T11:50:41.229042Z	
2024-06-12T11:50:41.229599Z	130 packages are looking for funding
2024-06-12T11:50:41.229767Z	  run `npm fund` for details
2024-06-12T11:50:41.235514Z	
2024-06-12T11:50:41.23569Z	3 high severity vulnerabilities
2024-06-12T11:50:41.235832Z	
2024-06-12T11:50:41.23594Z	To address issues that do not require attention, run:
2024-06-12T11:50:41.236152Z	  npm audit fix
2024-06-12T11:50:41.236261Z	
2024-06-12T11:50:41.236353Z	To address all issues (including breaking changes), run:
2024-06-12T11:50:41.236536Z	  npm audit fix --force
2024-06-12T11:50:41.236619Z	
2024-06-12T11:50:41.236684Z	Run `npm audit` for details.
2024-06-12T11:50:41.263495Z	Executing user command: npm run build
2024-06-12T11:50:41.833848Z	
2024-06-12T11:50:41.834705Z	> [email protected] build
2024-06-12T11:50:41.834882Z	> ng build
2024-06-12T11:50:41.835026Z	
2024-06-12T11:50:43.937926Z	- Generating browser application bundles (phase: setup)...
2024-06-12T11:50:59.640369Z	✔ Browser application bundle generation complete.
2024-06-12T11:50:59.64424Z	✔ Browser application bundle generation complete.
2024-06-12T11:50:59.650446Z	- Copying assets...
2024-06-12T11:50:59.745161Z	✔ Copying assets complete.
2024-06-12T11:50:59.745623Z	- Generating index html...
2024-06-12T11:50:59.863364Z	✔ Index html generation complete.
2024-06-12T11:50:59.866955Z	
2024-06-12T11:50:59.867142Z	Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
2024-06-12T11:50:59.867465Z	main.2e76038df96bee02.js      | main          | 248.87 kB |                63.16 kB
2024-06-12T11:50:59.867579Z	polyfills.f264bffba4be93c7.js | polyfills     |  33.07 kB |                10.63 kB
2024-06-12T11:50:59.867676Z	styles.01dc8c5223fc6af0.css   | styles        |   3.15 kB |               961 bytes
2024-06-12T11:50:59.867768Z	runtime.61512f202df53a5b.js   | runtime       |   1.04 kB |               598 bytes
2024-06-12T11:50:59.867828Z	
2024-06-12T11:50:59.867885Z	| Initial Total | 286.13 kB |                75.31 kB
2024-06-12T11:50:59.86794Z	
2024-06-12T11:50:59.867993Z	Build at: 2024-06-12T11:50:59.865Z - Hash: 7a49dda706d82fb5 - Time: 15763ms
2024-06-12T11:50:59.990117Z	Finished
2024-06-12T11:50:59.990894Z	Note: No functions dir at /functions found. Skipping.
2024-06-12T11:50:59.991199Z	Validating asset output directory
2024-06-12T11:50:59.991546Z	Error: Output directory "dist/cloudflare" not found.
2024-06-12T11:51:00.790501Z	Failed: build output directory not found

I also tried dist/cloudflare/browser but it didn't work.

What DID finally work was using npx ng build --verbose --output-path dist/cloudflare, which I found here.

@fahrnbach
Copy link

fahrnbach commented Nov 3, 2024

In addition to what @Ningyoplug said above,

it looks like adding the following to your Cloudflare page build configuration found in
Settings>Build>Build Configuration fixes the deployment issue
and any subsequent 404 error you may get once the page deploys.

Build command:
npx ng build --verbose --output-path dist/cloudflare
Build output:
dist/cloudflare/browser

Build_Configuration_Angular

Optionally you can change your package.json build command to be:
npx ng build --verbose --output-path dist/cloudflare
and leave the cloudflare build command to the deafult of ng build.

If you are building successfully but getting a 404 change the build output to dist/cloudflare/browser

fahrnbach added a commit to fahrnbach/cloudflare-docs that referenced this issue Nov 3, 2024
Hotfix for Update Build Settings For angular. Fixed and working.

Request to change PagesBuildPreset to this solution or add instructions to change the ng build command in package.json.

Request to update the Angular preset on the dashboard to match. 

Seems like there are quite a few people with this issue.

See: cloudflare/workers-sdk#5527
Also: https://stackoverflow.com/questions/78463333/fail-to-deploy-angular-project-on-cloudflare-pages/79151848#79151848 
And: https://community.cloudflare.com/t/angular-app-deployed-to-pages-is-unavailable-on-domain/632745
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something that isn't working c3 Relating to C3 (create-cloudflare) package
Projects
None yet
Development

No branches or pull requests

5 participants