My Angular application is served by Play server. The application can't find images and fonts I have added in the component when I build the application and run it.
The images are accessed in the component.html as follows
<div id="nav" class="nav-style nav-flexbox-container">
<img id="stats-icon-pic" src="assets/images/StatsIcon.png">
<img id="mail-icon-pic" src="assets/images/MailIcon.png">
<img id="profile-pic" src="assets/images/ExampleProfilePic.png">
</div>
The fonts are used as
#font-face{
font-family:"solway-bold";
src:url(../../assets/fonts/solway/fonts/Solway-Bold.ttf);
}
the images and fonts are in the assets folder in Angular application
When I build the application, I use the public folder of Play as output directory.
"build": "ng build --output-path ../public/ui",
I am facing two issues
1) The application can't find the images and fonts
I see the following error message on my Play application
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/ExampleLogo.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/MailIcon.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/ExampleProfilePic.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /assets/images/StatsIcon.png, statusCode: 404, message:Resource not found by Assets controller
[trace] u.CustomHttpErrorHandler - client error: request GET /Solway-ExtraBold.ttf, statusCode: 404, message:
[trace] u.CustomHttpErrorHandler - client error: request GET /Solway-Light.ttf, statusCode: 404, message:
I changed the path of images in src to ui/assets/images/StatsIcon.png but still get error client error: request GET /ui/assets/images/StatsIcon.png, statusCode: 404, message:
2) the font files are copied both in the ui/assets/fonts/... folder as well as the top level ui/assets/ folder. Why?
The problem was not due to Angular but due to my incorrect usage in play framework. Play has a route rule
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
The above means that all the requests for resources with path /assets/abc/def should be taken from the folder /public/abc/def. In my case the resources are at /public/ui/assets/images. So I had to change thesrcin the Angularhtmlto. This makes requests with pathassets/ui/assets/images/example-logo.pngwhich gets mapped to the pathpublic/ui/assets/images/example-logo.png`
Related
I have an IPFS file which I found inside my NFT, I am unable to get the asset inside that URL, can someone help.
This is the URL:
ipfs://QmcFAs7GH9bh6Q11bLVwd5J2c5EefadeL5Q8bZBLnMYYSJ/464.json
and I tried from browser with this URL:
https://ipfs.io/QmcFAs7GH9bh6Q11bLVwd5J2c5EefadeL5Q8bZBLnMYYSJ/464.json
I just shows a loading screen and a 404 http status is returned.
I have a page generated by Flutter-Web shops and it is a blank page. And I have an error in the console. This happened after uploading the build web of Flutter into GitHub Pages.
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://adamtechnologynl.github.io/') with script ('https://adamtechnologynl.github.io
/flutter_service_worker.js?v=2470069411'): A bad HTTP response code (404) was received when fetching the script.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
(index):88 Failed to load app from service worker. Falling back to plain <script> tag.
(anonymous) # (index):88
(index):47 GET https://adamtechnologynl.github.io/main.dart.js net::ERR_ABORTED 404
loadMainDartJs # (index):47
(anonymous) # (index):91
I found the solution. This happens when you have put it another directory instead of the root of the GitHub.
So my code is in "https://username.github.io/demo/book-king/belasting-web-v1/" so that last part we should append everything after "https://username.github.io/" also in the index.html. You can solve it by modifying the line (number 17 by me):
Change:
<base href="/">
into:
<base href="/demo/book-king/belasting-web-v1/">
And then you are done.
This solution works. But for me, line no 17 was not <base href="/">.
It was like this <base href="$FLUTTER_BASE_HREF">. Given that FLUTTER_BASE_HREF is a variable, it can be modified.
How?: Provide --base-href argument to flutter build like below
HostingURL : https://<github_user_name>.github.io/project_aj/demo/gh-pages/
Apart from the https://<github_user_name>.github.io should go as the value for --base-href
flutter build web --base-href=/project_aj/demo/gh-pages/
So I'm trying to serve my github pages website to https://dgatto.github.io/website/ and i keep getting these errors
Failed to load resource: the server responded with a status of 400 ()
manifest.json:1 Failed to load resource: the server responded with a status of 400 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
I think that the 400's are because of the "syntax error" and I'm pretty sure that the syntax error is because of the manifest.json file being read as text/html in the network tab.
My question is, how do I change the server to accept the file as json? It's github pages so I don't really have access to the server itself.
Here's the repo if that helps: https://github.com/dgatto/website
Since you are serving your Application at https://dgatto.github.io/website/, you should define it as the homepage in your package.json file and then build.
I have built a portfolio site for my first Angular project and now it is ready and I'm getting an error when my Angular project attempts to locate the JSON files, but it can find and generate the image files that are in the same assets folder and I can get the JSON when I run my project locally-
main.dad43c6….bundle.js:1 ERROR
e {headers: t, status: 404, statusText: "Not Found", url: "http://megakyle83.com/assets/json/socialMedia.json", ok: false, …}
error
:
"<HTML>
↵<HEAD>
↵<TITLE>404 Not Found</TITLE>
↵<BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
↵</HEAD>
↵<BODY>
↵<H1>Not Found</H1>
↵The requested document was not found on this server.
↵<P>
↵<HR>
↵<ADDRESS>
↵Web Server at megakyle83.com
↵</ADDRESS>
↵</BODY>
↵</HTML>
headers
:
t {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure response for http://megakyle83.com/assets/json/socialMedia.json: 404 Not Found"
name
:
"HttpErrorResponse"
ok
:
false
status
:
404
statusText
:
"Not Found"
url
:
"http://megakyle83.com/assets/json/socialMedia.json"
__proto__
:
Object
When I did my build I used the terminal command ng build --prod and then uploaded the files from the generated dist folder onto my Windows Plesk Server through GoDaddy. When I look at my assets folder on the Plesk server it shows that all the files are there under assets/json/ . I have several separate JSON files in this same folder. Could that be part of the problem?
I have all my files uploaded to my github at -https://github.com/RyanIndustries8/megakyle83
I have tried everything under the sun to make this work and I'm struggling to find anyone who knows enough about Angular to get an answers.
Look at the error message, http://megakyle83.com/assets/json/socialMedia.json 404 Not Found. I've browsed your repo and there is no such a file in assets/json/ directory moreover, there is no json directory in the assets.
I couldn't find missing socialMedia.json file in your entire repo. Ensure that this file exist under path mentioned in the error message.
The issue didn't end up being my code, instead it was a setting issue in the Plesk Server. I had to go into the Server Settings and add text/json and */json to the list of usable files. Thank you for looking at this issue.
I have a site which is trying to implement the push notifications. I have registered a project with google dev console and have the manifest.json . But from my index.html the manifest.json is giving the following errors
1)Failed to load resource: the server responded with a status of 401 (Unauthorized)
2) Manifest parsing error: Line: 1, column: 1, Unexpected token.
3) Unable to subscribe to push. DOMException: Registration failed - no sender id provided
Do i need to do anything from the google project registration side??
or should i do anything from my server side?
The site is running in .Net Server and i have mime type .json
The combination of
1) Failed to load resource: the server responded with a status of 401 (Unauthorized)"
and
2) Manifest parsing error: Line: 1, column: 1, Unexpected token.
indicates that something (HTTPAuth?) is blocking the browser's request for the manifest.json file, and it's attempting to parse whatever the server is returning as a 401 response (which won't be JSON...). If the browser can't download the manifest.json file, you can't expect anything to work after that.
Arguably the most important part of this is the "Manifest parsing error: Line: 1, column: 1, Unexpected token"
This means your manifest.json file is invalid - i.e. it's not valid JSON.
Try running it through this for more info: https://manifest-validator.appspot.com/
Once this has been fixed, it will allow Chrome to find your gcm_sender_id and fix the other two problems.