I have written an app using the MEAN-stack(MongoDB, Express, AngularJS Node.js). Locally everything works as its supposed to but for some reason it behaves differently when I run it on Heroku.
The problem is that some of my angular controllers are transferred with the content type header text/html instead of application/javascript. As stated this is not a problem locally.
I have updated my npm and bower packages so everything should be up to date. Except for express where I use v. 3.4.4(because version 4.x.x requires a rewrite of the config). I use the same version of the frame works locally and on heroku.
Please let me know if I can provide any more information that would make it easier to solve the problem.
Regards
In most of the cases, when your scripts are transferred as text/html, it's because they are not found and return an HTML 404 page, you can check it using the Chrome Developer Tools in the Network tab.
When you have this issue, there is a lot of chance that your app is completely broken and that's why I ask you this.
Don't know if you're using some tasks runner like Grunt for your deployment process or just pushing your project as is but in both cases you need to check that the path of your files are correctly set by checking the requested url of yours scripts transferred with the wrong MIME TYPE.
Had also same problem with the Yeoman generator that was messing with the minification and file renaming some time ago.
Related
I added angular universal to my project and upon saving, it compiles successfully though in the network tab I can see the request for whatever route im on gets hung on pending and the website stays loading forever in the browser. This issue is not present during CRS. Things I have tried that did not work:
I have cloned the same project elsewhere to see if it was some fat finger accident
I have not only add logic to stop DOM methods from being used, I have outright removed the use of them everywhere in the app
I added 3rd party libraries like Domino js to mock methods on Node
I started a completely blank angular project, added nothing to it other than angular universal and I get the same issue!
I will try it on another computer soon to see if it is just an issue on this machine.
What could the issue be? I don't get any errors and refreshing the page it works.
Is hot reload broken for me? missing anything?
EDIT: I have now tried it on a 2 other Windows machines and the result is the same. Perhaps this is a bug. Essentially makes Angular useless to me.
Angular Version 12.1
I was able to get it to work by upgrading my Angular to version 14, and starting a fresh project with SSR added. Frustratingly to say the least but I can finish my project and I copied back in most of my code from the project I was working on.
For what ever reason Angular 11 and 12 were giving me this issue on multiple machines on fresh angular projects. It never gave me any errors to show. I will report back if any time during the rest of the porting of code if the issue persists.
I had the same hassle when initially integrated the Angular Universal to my project.
After a period of time I consider the according workaround:
SSR for the single page applications is useful in production for SEO, Open Graph, etc.
Angular Universal adds additional files:
main.server.ts
app.server.module.ts
Then the classic angular approaches are still possible to be used (the old app.module.ts).
Now for the local development environment I'm continue using the classic "ng serve" command and the Angular continue reloads normally on each file change.
And the SSR is compileing only for the production build.
Then if I want to debug something related to the SSR I'm deploying the production build to the test environment and calling the test urls to see the results.
I recently faced the task of converting a fairly mature angular project to SSR because I had overestimated the search power of SEO in angular projects. I'm not familiar with node, my angular project is on an apache server and uses php(slim) as the backend api, however, when I started trying to use "most of the tutorials", i.e., the first step, introducing nguniversal/express-engine into the project, it went well, npm did not report any errors.
Then I tried to run npm run build:ssr and it also worked fine. The problem is that when I run npm run serve:ssr, it ends up throwing a "ReferenceError: navigator is not defined" error...
Earlier, I built a completely clean angular project for testing, from build:ssr to run serve:ssr. Even I specified node xxxx/xxxx/main.js directly, no problem, which is obvious, because the angular project for testing is absolutely clean.
However, this does not work on my current "existing angular project". Yes, I fully understand that SSR doesn't allow for navigator or most so-called DOM manipulation, and although I'm not familiar with angular universal yet, I've previewed it and I know that's not possible, but here's the biggest problem :
In this existing angular project, there is no any navigator operations, not even a single line of code
In fact, main.js is also generated automatically, I can't stop it at all, I don't understand why there is "navigator" written in main.js?
I've checked many so-called solutions, including writing something in server.ts, but nothing helps, how can I continue? This is really quite desperate!
Big thank any help!
I'm starting to learn Angular 2 and I am quite lost in some subjects... like the server.
Following the instructions for a Quick Setup I installed Node and npm... when I run the project in Node everything goes perfect. The label <label> gets recognized and it gets the template for that label (in this case an html form).
But when I run the same project in MAMP, that label doesn't get recognized and comes out a 'Failed to load resource' error in the console for the template associated to that label.
So I guess Angular 2 is dependent on Node and that's a problem because I want to upload later the project and I think my hosting plan doesn't allow me to run Node...
I don't know if I'm prejudging, maybe anybody can help me clear this... Thanks.
Angular2 has niether any Relation nor any Dependency on node.js.
You can write Angular2 app just using Angular2 packages without using node or mamp or xampp and host that app.
If you have written any thing in Angular2 and node.js combination then you can host it on free services like Heroku for testing purpose.
Final solution:
Ok, wrong again. I'm the worst detective ever.
it works with TypeScript as with JavaScript, just need the "npm start" to compile TypeScript into JavaScript. Then it automatically runs on a "localhost", but once compiled, you can run the index.html like any html, without the need of a server, like you were all saying, it's not like .php which makes all sense.
so the problem that led me to all of this misunderstandings was that the Node "localhost" worked and the Apache "localhost" didn't, and the mistake was that I was calling into #Component: templateUrl: "../template/file.html", and the path is written in "/app/whatever.js", but it's working from "index.html", so it would be just templateUrl: "template/file.html" and everything works as expected.
what I don't know is why it works, with the wrong path, when I run it from Node! an error would have saved me a lot of time... and yours...
Well, at least I have clarified a lot of concepts in this investigation. Thank you all!
Thanks, Zeeshan, in the links you gave me the clue. As I told on my original message, I started following the Quick Start, but I forgot to mention I chose TypeScript over JavaScript... and that was the "mistake", because TypeScript needs Node to compile to JavaScript, as I'm guessing for the results I get:
the TypeScript project only runs after executing it in Node via console ("npm start") and not in Apache, that doesn't get all the Angular part (it gets the tag <whatever></whatever> but doesn't translate it into the content <whatever><h1>Hey</h1></whatever>)
with JavaScript it works "as always", without need of a server, as you were telling me
So I'll have to choose between using TypeScript (and all the official documentation!) and host it in some platform like Heroku or work with JavaScript without needing an specific server so I can still work with Apache.
I'm trying to run my ui5 pages on Node.js server. What I've done till now is created a UI5 project with a simple index.html file calling my other ui5 views showing a text message. When I run it without node js it runs fine and shows me the message.
What I'm trying to achieve now is run this on top of my node server. So I've configured a server.js file for my node and it starts up fine. In there I'm calling up my above index.html file. it calls it fine but it gives an error inside it saying sap is undefined meaning it is not able to find my ui5 resources like sap-ui-core.js and thus the error. I'm not sure why it is not able to find it.
I've created the ui5 project using eclipse which provides me the ui5 resources under the below directory but even if I try to put the resources directory under the web content directory it is not able to find it.
After manually putting resources directory:
Below is how my index.html looks like:
Has it got something to do with the resource root that I define or please if you can suggest how can I get it working.
Awaiting your responses eagerly.
Thanks,
AW
Adding to cschuff response:
Hello, thanks for taking time to help me out. Yes my apps namespace is different and definitely not something with sap.ui. Though I've got a way around of getting it to work but still would like to get this to work as well as it is much cleaner. The way I've got it working now is by creating a seperate node project altogether and then gradually adding my UI5 pieces to it and by gods grace it is running fine now. But I'm not sure why the same concept if I apply on a UI5 project created in eclipse, it gives me sap is undefined error.
My only suggestion that you misconfigured node.js server. Try start from scratch:
mkdir app
cd app
npm install -g express-generator
express -f
npm install
node .\bin\www
Than put all of your files of your project and resource in public directory. And try to open http://localhost:3000/index.html
The /resources are delivered by the com.sap.ui5.resource.ResourceServlet (see your web.xml; web.xml and Servlets are used in the Java World e.g. by Java Application Servers or Servlet Containers like Tomcat)
The ResourceServlet listens on the url-pattern /resources/* meaning every time a request is send to an url matching this pattern the ResourceServlet (a Java class) will step in, look up the right .jar file and return the required JavaScript file from it. This won't work with a plain web server like Apache.
I don't know much about express but I guess it is not able to run Java Servlets and thus is not able to deliver your SAPUI5 resources the same way Tomcat does.
To work around this you still have some options:
Use Express to serve your application sources and load UI5 from Tomcat while developing. This might lead to cross-origin problems (since localhost:8080 and localhost:3000 are considered different origins)
<script src="http://locahost:8080/resources/sap-ui-core.js" ...
Unpack all the UI5 .jars you need and place them in YourApplication/resources/.
BR
Chris
Firstly I must confess I am a noob at node. I've been using ASP.NET then PHP then Django before. Regardless, I've found node a breath of fresh air. This problem is also not strictly a node problem, but I need a node specific answer.
I have an express server and angular frontend. The server side templates are in swig and currently only serve for error pages and the index page. Mostly the angular templates will make up most of the front matter.
What I'm struggling with, if only only in deciding how to do it, is getting an efficient work flow for the asset pipeline. Server side templates must be able to inject the vanilla of assets during dev and testing. The same for client side templates during testing. Basically, running with express' static middleware should be an option without any configuration (maybe with some helper in server side assets). Thus git clone -> grunt -> viola.
However, during staging and production, I would like the server side files to stay vanilla. The template helpers may parse a manifest file indicating the cache busted links (CDN path maybe too). How to make the link from logical asset bundle name to production ready asset is a mystery for me, while keeping development transparent.
The client side templates may be minified, concatenated, injected or whatever, as it will be saved to some dist folder for uploading. It is important that the whole dependency tree (images, fonts, css, js) must be "exported" to the dist folder.
To deploy would then be: pushing the server side code to the server and running. And pushing client dist folder to some asset host (CDN, nginx, another node, maybe even connect static)
What my question(s) then actually is(are):
Is this workflow possible with tools such as broccoli/gulp/grunt alone?
I've tried connect-assets but I don't want to conform to some predetermined folder path. Also the cli tool didn't produce the other static assets. Perhaps I don't understand the tool.
Am I following the correct approach?
I've added to a discussion on broccoli concerning the manifest file consumption:
https://github.com/mjackson/broccoli-rev/issues/1#issuecomment-49076249
Edit: I forgot to mention that I use bower, so assets should be pulled from arbitrary (URLs too maybe) locations.
I think angular-fullstack is what you want. Even if you don't use it, it does almost all of what you're looking for.
The only thing that it might be missing for you is deployment. It has built in support for Heroku and OpenShift deployment. You could use something like grunt-ssh or grunt-deploy for other deployment scenarios.