AngularJs cannot get route with dot in url on localhost - javascript

Using route provider and having this route set:
.when('/:name/:id', {
It works (enters on my route and execute the code) when I use:
https://localhost.myapp.com:9000/Paul/123
But it does not work using this url:
https://localhost.myapp.com:9000/Paul/123.456
But my id = 123.456 so I need to use the second scenario and I get error "Cannot GET ..." so I believe that the dot is the issue.
If I check the network tab it I see that the browser interprets 123.456 like a file for example readme.txt it thinks that the chars after the dot is the extension of the file.
Strange thing is that on production it works.
Any ideea on how to fix this ?

I have managed to find an answer to this issue. It was related to webpack which was present only on my localhost and not in production (this explains why I had this issue only on localhost).
I had to add this setting in webpack config file webpack.dev.js under devServer section:
historyApiFallback: {
disableDotRule: true
}

Related

"_ssgManifest.js" & _buildManifest.js missing from a nextjs app hosted on Google Cloud Platform

sometimes the console shows these errors on opening the website
GET https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js
[HTTP/3 404 Not Found 311ms]
GET https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js
[HTTP/3 404 Not Found 334ms]
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js”. 1434-247:1:1
Loading failed for the <script> with source “https://example.com/subpath/_next/static/9ufj5kFJf/_ssgManifest.js”.
the app does use ISR and that seems to be working, it does get updated, what do these files do? what could happen if they are missing?
"react": "17.0.2"
"next": "10.1.3",
"node" "15.1.2"
I had the same problem with GCP (Kubernetes engine) with pods count > 1. I resolved the issue by restarting the deployment (all pods).
On that Github issue #Prabir linked to in a comment, someone posted a way to use the generateBuildId function within the Next.js config file:
const execSync = require("child_process").execSync;
const lastCommitCommand = "git rev-parse HEAD";
module.exports = {
async generateBuildId() {
return execSync(lastCommitCommand).toString().trim();
},
};
I work with an app that uses some combination of AWS CodeBuild and Docker images, which prevents direct access to all the git commands so that snippet above didn't work. But using CODEBUILD_BUILD_ID or really any environment variable (unique to either that commit or the build itself) did. I'm not as familiar with the GCP-equivalents but this Cloud Build Docs page makes it seem like $COMMIT_SHA would be a good option to try.

React app not loading js file when accessing it with a non home page url

I have a react app which I serve with nodejs backend. My requirement is to inject a variable from node server to react code when it is running. When I access the app with the home page URL it works fine but not with other URLs. I am going to put more details to understand the complete scenario.
In node server I have code to create a file like this: dist folder is where react build is stored
fs.writeFileSync(
path.join(__dirname, "../dist", "config.js"),
`window.INJECTED_VARIABLE= { value: "qwerty", }`
);
In public > index.html I have this script to load the created config.js file.
<script src="./config.js"></script>
Now, when I run my node server and access my app with the home URL http://localhost:3000, I am able to access the injected value - window.INJECTED_VARIABLE as { value: "qwerty", } and config file is also present under "sources" tab in chrome devtools.
I have one page in my app - http://localhost:3000/profile/profileId, when I directly open my app with this URL, I see window.INJECTED_VARIABLE as undefined. It looks like there is no config file in source tab if we look in chrome devtools.
I am getting a same problem in production too.
Can anyone explain this behavior and help me in fixing it. I would appreciate any help.
The dot in ./config.js denotes a URL relative to the current path. i.e. A document served from /profile/profileId will request the file /profile/profileId/config.js - which doesn't exist.
To specify that a partial URL always be from the root, you should omit the dot.
<script src="/config.js"></script>

Why will my MEAN app only (partially) run when I set the Angular build directory to /src/ instead of /dist/?

I'm following Heroku's tutorial to create a contact list using the MEAN stack (Heroku's running example here). I'm able to deploy it to Heroku and it works there. But when I run it locally on my machine, the browser (Chrome 67.0.3396.87 on macOS High Sierra) only displays a "Cannot GET /" message.
I believe it's related to how the Angular build directory /dist/ referenced in line 12 of server.js does not exist (as far as I can tell). The beginning of server.js looks like this:
var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var ObjectID = mongodb.ObjectID;
var CONTACTS_COLLECTION = "contacts";
var app = express();
app.use(bodyParser.json());
// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));
// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;
I looked into it and found that Angular deletes the /dist/ directory upon ng serve. I also found that there is a flag --delete-output-path whose default is true.
I set the --delete-output-path flag to false in .angular-cli.json as recommended by this answer as well as in /node_modules/#angular/cli/lib/config/schema.json. Despite those changes (trying to set the flag in one file, or the other file, or both files at the same time), I'm still getting the "Cannot GET /" message and the /dist/ directory still doesn't appear to be there.
The only way I've been able to even run part of the app is to change server.js's line 12 reference from /dist/ to /src/. This allows /src/index.html to begin loading at localhost:5000/ (the browser displays the text "Loading..." as specified in line 16 of index.html) and gets the contacts API up and running at localhost:5000/api/contacts/. But the Angular components (the list of contacts that is the purpose of the tutorial) don't load. Maybe because I changed the build directory to a totally different location.
Is there something with the /dist/ directory that I'm missing? Or does my issue with getting the app to run locally have nothing to do with /dist/ at all?
Notice that you don't have a way of handling requests to the route '/' since the line:
app.use(express.static(distDir));
only ensures that all bundled files generated in your "dist" folder are accessible when your index.html requires them, but you still have to serve the index.html itself. When using the MEAN stack one normally would do something like this:
app.use ('/api', yourApiRouter);
//and for everything else let the client-side routing handle the route:
app.get ('*', function(req, res) {
res.sendFile(distDir + 'index.html');
}
I recommend to use the native "path" module to join your __dirname with your "dist" folder and your index.html location rather than simple concatenation.
You can use an arrow function instead of a callback when using app.get function if you are using ES6

Bundled file is not found

I am using Golang (Echo) for my backend and React for my frontend. When I bundle my code using webpack, the file is created; however, I am getting an error in my console when I go to localhost:3000 stating the bundle file cannot be found. This is the exact error message: GET http://localhost:3000/build/app.bundle.js net::ERR_ABORTED.
Here is my server:
func main() {
env.SetEnvVars()
e := echo.New()
e.File("/", "server/static/index.html")
e.Logger.Fatal(e.Start(os.Getenv("PORT")))
}
Here is my webpack.config.js file:
module.exports = {
entry: './client/main.jsx',
output: {
path: path.resolve(__dirname, 'server/static/build'),
filename: 'app.bundle.js'
},
...
And the script tag in my index.html file is:
<script src="./build/app.bundle.js"></script>
The directory path regarding these files is currently:
/
server/
main.go
static/
index.html
build/
app.bundle.js
Any help would be appreciated!
The echo server you've set up only serves one single path, the root path ("/"), by rendering the contents of the index.html file. Because you haven't set up any other handlers for that server, any request to a path other than the root will result in 404, including those requests made from the index page via script and link tags, e.g.; <script src="./build/app.bundle.js"></script>.
To be able to serve a request to a path like "/static/build/app.bundle.js" for example you need to tell the server how to do that by registering a new handler.
With the echo server you can use its Static method to do that.
e.Static("/static", "static")
Please keep in mind that the links you use in html tags, the location of the corresponding files on your machine, and the location from where you launched your app matters if you use relative paths like ./build/app.bundle.js, and because of that the two arguments to e.Static may need to be somewhat different from the example here.
Here's a bit more info.

Javascript not loading due to net::ERR_CONTENT_LENGTH_MISMATCH

I've got an app that runs fine locally, but barfs in production. (Classic problem, right?)
In production, the JS isn't firing correctly. When I open up the browser console, I see this error:
net::ERR_CONTENT_LENGTH_MISMATCH
When I look in the network tab of Developer Tools, is shows that it failed on a GET request for text/html.
It's a cryptic error. I've only found two other SO posts that even mention is and they're unsolved. (For the interested: first post and second post)
Any idea (1) what it means or (2) how to resolve it?
I am getting Error: net::ERR_CONTENT_LENGTH_MISMATCH
Have a look at your server logs to determine what the real issue is.
For me the problem lay somewhere between nginx and file permissions:
tail -f /usr/local/var/log/nginx/error.log or run nginx -t to determine your conf location, where you could specify a custom log path.
refresh the asset in your browser, eg http://localhost:3000/assets/jquery/jquery.js
You may see something like this in the logs:
"/usr/local/var/run/nginx/proxy_temp/9/04/0000000049" failed (13:
Permission denied) while reading upstream for file xyz
Heres how I fixed:
sudo nginx -s stop
sudo rm -rf /usr/local/var/run/nginx/*
sudo nginx
According to this bug report, that error occurs when an external resource length does not match the Content-Length header given in the response.
This might occur because of a misconfigured server, or (as a stretch) maybe some BOM characters got put into the file, or maybe even different lines endings (are you writing on a DOS machine and deploying to a UNIX machine?) may cause issues.
Hope this helps.
I had a similar issue when trying to interpret JSON results. It turned out that somewhere along the line an odd character landed in the database - in this instance the culprit was "â??". It is not clear how this value arrived in the database, but it is likely related to HTML encoding issues - "Â" character showing up instead of " " Either way, after removing the odd characters, the problem was solved.
I had similar issue
[crit] 6889#0: *14817 open() "/var/cache/nginx/proxy_temp/3/02/0000000023" failed (13: Permission denied) while reading upstream
it was because Nginx worker process were not able to access folder /var/cache/nginx/proxy_temp/ - I just changed the folder permissions and everything started working
I had similar issue developing locally on MAMP and using Chrome as browser. Same problematic websites on the live servers had no such issues. First I thought it was MAMP that was playing around and I checked settings like PHP versions mismatch, apache version etc., reinstalled, but the issue remained. At the end I just switched to using Brave browser (was delaying the shift to Brave for a while anyway) and that fixed it for me.
Hope this helps.

Categories

Resources