I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css
Related
So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!
Basically the heading. I have a strapi app at localhost:1337 which I will fetch in React. I'm not very sure how localhost works, and therefore I want to know if the path will still be relevant when I deploy the react app.
When you deploy your react.js app on any server your url named http://localhost:1337/Dashboard
will be changed. In it http://localhost:1337/ is the base url or domain name. Which will change the server to the new one.
your code will maintain same value for that API and you will have to re-build your code each time you change your API, (most of people use low cost hosting provider which allow only port 80 to be used) my advice is to move your endpoit (backend url) outside your code in a json, .env file ... but what will work on most of platform is a variable defined in your public/index.html (not a best pratice but it will work) ex:
<html>
<head>
<!-- you will add this tag here it will contain your backend url -->
<script>
var bakendUrl = "http://....";
</script>
<!-- some other code here -->
</head>
<body>
<div id="root"></div>
</body>
</html>
I have a react website and in my html template I put the google analytics tracking code snippet.
The tracking works on my local (so I can actually see my dev session in GA console) but it doesn't work after I deploy to cloud. Here how my template looks like and react just render the root div.
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root" />
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="GA link..."></script>
<script>
GA tracking code...
</script>
</html>
My site is here. You can see from the source code the tracking code is there. However current session just doesn't show up in GA.
When I go to your site I see calls going out to Google Tag Manager and Google Analytics and Doubleclick.
Maybe you have a script blocker (uBlock Origin, Noscript, ...) disabled on localhost but active on the production site?
I resolved it eventually. Regenerate another project in GA and use the new project worked for me. Maybe it was something mess up with my old project setup.
I am trying to run the google-cdn plugin via Gulp (gulp-google-cdn) to covert bower references in my HTML file into the CDN equivalent. Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
My task (I use a subdirectory with tasks per file):
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('../bower.json')))
.pipe(gulp.dest('../dist/') )
;
});
HTML:
<!DOCTYPE html>
<html ng-app="OntarioDarts" ng-cloak lang="en">
<head>
</head>
<body layout="row" ng-cloak>
<div layout="column" class="relative" layout-fill role="main">
<md-content flex md-scroll-y>
<ng-view></ng-view>
</md-content>
</div>
</body>
<!-- Load JavaScript Last for Speed. Load from CDN for cache speed -->
<!-- Angular JS -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
The distribution file does not point Angular to the CDN, but still tries to use the bower_components, even though it did not complain that the files were not found.
One problem I found is that I have Angular set at ^1.5.0 in my bower.json. However, I was only using the default Google CDN, which does not currently have the 1.5.0 available. I changed the version in the bower.json file to be ^1.4.0, and then the file was changed to use the CDN with version 1.4.7.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
Gulp-google-cdn does not do anything, and enabling the DEBUG, shows: google-cdn Could not find satisfying version for angular-material ^1.0.5
That's because the newest version available from the Google CDN is 1.0.4.
The problem though is that the reference did not get changed to HTTPS://, but was left simply as src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"
That's not necessarily a problem. That's a protocol-relative URL. If your page is served over HTTP, angular.min.js is fetched over HTTP. If your page is served over HTTPS, angular.min.js is fetched over HTTPS.
Unless you absolutely need angular.min.js to always be fetched over HTTPS you can just leave it like that.
EDIT: ... except for when you're trying to open a local HTML file in a browser. Then your protocol is file:// and the protocol relative URL will refer to your local file system. Which of course leads nowhere.
One way of fixing this would be to serve your html files through a locally running webserver (e.g. with gulp-webserver). When your HTML pages come from e.g. http://localhost:8000/ all the protocol relative URLs will be served over http:// as well.
If you just want all the CDN URLs to be prefixed with https:// instead, here's a way to wrap the google-cdn-data object to achieve this:
var gulp = require('gulp');
var googleCdn = require('gulp-google-cdn');
var jp = require('jsonpath');
function protocol(proto, cdn) {
jp.apply(cdn, '$.*.url', function(url) {
return function(version) {
return proto + url(version);
};
});
return cdn;
}
gulp.task('HTML:Release', function() {
return gulp.src('../src/*.html')
.pipe(googleCdn(require('./bower.json'), {
cdn: protocol('https:', require('google-cdn-data'))
}))
.pipe(gulp.dest('../dist/') );
});
You'll need to run npm install --save-dev google-cdn-data jsonpath for this to work.
I am building a wordpress site with a page that is an angular app. It was working until recently (and I can't recall which change broke it), but now the app does not load when I arrive at the page via a link (angular is loaded and the code snippet below processed, but nothing is logged), but it does work if I then refresh the page.
I've backed out all the real code to leave:
angular.module("af2015App", [])
.controller("TestCtrl", function() {
console.log("test test");
});
And commented out everything in the HTML except
<div ng-app="af2015App" class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
I'm at a loss as to how to debug these circumstances. I'm not loading pages via AJAX.
Thanks for your ideas everyone. I had another go at debugging and discovered that, even after turning off the script tag with angular, angular was still present. That gave me the idea to look at Batarang and, after deactivating that, all is working again. Perhaps this answer will help someone someday. Needless to say I don't know what the underlying problem was.
take a look at this plunker
working plunker
they only thing I can think of when looking at your code is that you are not closing your div tag
altough that is probably just an edit mistake
otherwise move your ng-app definition to your html tag
<html ng-app="af2015App">
<head>
//make sure your scripts are loaded correctly
<script src="path/to/angular.js"></script>
<script src="path/to/app.js"></script>
<script src="path/to/controller.js"></script>
</head>
<div class="app">
<p ng-controller="TestCtrl">Use the ...!</p>
</div>
</html>