[bug] get 404 not found ~partytown/debug/partytown-sandbox-sw.html with simple angular bundle html file and express server

[hiepxanh]

Describe the bug
Hi, nice to meet you. I see your team's videos on twitter and it so amazing. The other framework tutorial is very good. But I want to try on html example to implement on my Angular app. I do it with basic html and express example but it just not work. and get error.

• the first load is fine
• the second load is error: partytown.js:42 GET http://localhost:3000/~partytown/debug/partytown-sandbox-sw.html?1653750131269 404 (Not Found)

To Reproduce
Steps to reproduce the behavior:
the partytown folder was copied by script, I just copy it again to this public folder.

1. clone https://github.com/hiepxanh/partytown-example
2. npm install then node server-html.js => should work fine, but node server-angular.js
3. open incognito: first load work
4. f5 to reload. See error

Reproduction link
my stackblitz here but I have cors problem on stackbitz server https://stackblitz.com/github/hiepxanh/partytown-example?file=server.js

Expected behavior
it should not error

Partytown version
What version of Partytown you are using, e.g. 0.0.6

Screenshots
If applicable, add screenshots to help explain your problem.

const express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

const port = 3000

const myLogger = function (req, res, next) {
  console.log('logger:', req.originalUrl)
  next()
}

app.use(myLogger)

app.use(express.static('public'))

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Additional context
I read this but doesn't help

https://partytown.builder.io/distribution#builderiopartytownlib

Also this issue doesn't help too #107

[hiepxanh]

ok I guest problem it self is angular, here is the partytown html version, it work great

but the angular version

• the same partytown version
• the same patytown insert code
• run first time work correctly,
• second time is error
• so weird...
  
  

[hiepxanh]

here is angular project if you interest https://github.com/hiepxanh/clover-error
here is the video that i record https://drive.google.com/file/d/1UBokM5xuRr44gftJ70Sft6WwnQTr_T1W/view?usp=sharing
the video cannot play directly, maybe you should download it
I wonder how should we fix the problem, I should create angular issue or partytown issue?

[hiepxanh]

please help me...

[hiepxanh]

https://github.com/hiepxanh/angular-partytown I update the angular 14 version. just only patch partytown on html only. still fail

[nicksrandall]

I'm seeing this issue with React version as well.

There is no html in the lib folder and therefore it does not get copied over to my apps public folder to be served.

Here are some docs I found that describe the issue: https://partytown.builder.io/distribution

[hiepxanh]

@steve8708 @adamdbradley sir? can you take a look?

[mhevery]

Hey @hiepxanh ,
Let me see if I understand:
1st request it works
2nd request on page refresh it 404s.

Do you see any additional errors?

[hiepxanh]

I dont see anything else sir, first time I thought server false but it server correctly, just auto fail on second query

[hiepxanh]

@mhevery do you have any suggestions? I can do anything like a test or debug, or something, I love this library very much. but I need your guidance. I will do anything you need sir

[mhevery]

One thing you can help is to make sure that the reproduction application is as small as possible. That makes our life easier in pinpointing the issue. (We are a bit busy with relate project so it may take some time to get to this.)

[hiepxanh]

Yes sir, I already pushed the built version of angular here.

https://github.com/hiepxanh/partytown-example
I think it may be the angular itself have some block on the service worker which fails on the second request. I will try to reproduce on Angular 14 today

[adamdbradley]

Sorry but this issue seems related to Angular and copying files to the correct location, and not partytown itself. https://partytown.builder.io/angular