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.
Related
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!
looked for couple of hours, on how to solve that, but no luck.
I am using VS 2017 preview edition, and trying to open ASP.NET core 2.0 web application, that uses Angular template
when i open the site (f5 or ctrl-f5), the web-browser getting opened with the message
Cannot GET /
I don't know what causing that and how to fix that, tried to clean/rebuild/restart VS/change project port number/restart the computer, what else can I do to solve that?
Depending on what error you have in the client application, the server might not start at all. Local errors like undeclared locals are seldom a problem.
Usually, the web server does not start when a dependency of the module marked as bootstrap is missing, like, for example `entryComponents'.
Another thing that can cause the boostrap to fail, is a missing file: in this case you should have a look at templateUrl and styleUrls.
Manually compiling via ng build (or better ng build --prod) will point you to the offending code.
I have been following a tutorial from Cory House on Pluralsight about React, Redux, webpack, babel, and a bunch of other support libraries. I am using Visual Studio Code on a windows OS. I have completed the tutorial, which includes a build process that outputs a bundled js file to a dist folder. The build process also runs the app to verify the build is correct (which it is). I then tried to copy the contents up to an IIS server and run it there. However, when I try to access the web site, the index page comes up blank. I verified the bundled js file is called (returns 200 status). That left me wondering if there is an extra step I need to do to transfer an app created using Node to one that can run on IIS.
I should clarify I added a web.config file to the site.
Any help is appreciated
Edit: Here are two errors I am getting on when rendering the page. One of the errors (#2) appears to be a web pack module:
Error 1
Error 2
In error 2, "Attributes" is undefined
I figured it out partially. It had to do with react-router and my routing. When developing and running it locally, it was running at the root of local host:
http://localhost
When I moved it to the IIS server, I had to create an app under the default web site, which changed the apps url to:
http://localhost/ReactJS
That caused my routing to fail and loaded a blank page. However, even though the home page loads now since fixing the routing, it is still not working as I can't navigate to the other views, but at least I have narrowed it down.
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 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.