I'm building a website using styled components. It works fine in my local environment but as soon as I run npm run build it no longer works on the hosted site. I have the latest version of styled components installed as a dependancy. The styled components names work but none of the styles are coming through.
This is how the Website looks in my local dev environment
This is how it looks after build
heres a link to the website after being posted
https://benmcloughlin.github.io/savvy-plan-lite/
here's a link to the github repository
https://github.com/BenMcLoughlin/savvy-plan-lite
I spent three hours rebuilding the app and deploying it after each change to determine where the issue was. It had to do with GlobayStyles, one of the styled-components features. If I was using global styles then nothing worked. If I removed global styles then it worked. I have no idea why but I just removed it and will no longer use it. Just wanted to answer my own question in case someone came across the same issue.
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 have cloned a git repo regarding the swagger framework for API documentations. It is an already built project, ready to run.
However, I would like to effect some styling changes, hide certain elements and tweak with the default links and examples it provides. Indeed the changes have been easy, but by saving them and re-running the project as a web app they were not visible. It is my understanding that one has to rebuild a project in order for changes to come live. It is a React app, running on node.js, so I proceeded by following the script commands within package.json and rebuilt the project.
Still, although the changes have been saved within the dev files, they are not visible within the web app. Inspecting the DOM elements of interest confirms that no changes are in effect. My question is whether I can rebuild this project so that the changes will eventually become available, or if there is another way to achieve this.
I have a old Node.js application that I need to rebuild it to run it using my current Node installed. I have the node_modules folder. However, I cannot figures it was created using what version of Node. I searched for the term 'engine', but I had not success. Any ideas would be greatly appreciated.
The engines property can be used to define which versions of Node your application can run on, but it is optional. Without it, there is no way of knowing what version on Node the app was developed on. You could have switched Node versions during development and if there were no breaking changes, the application would have no idea.
Something you could try to do is look at the dependencies in your node_modules/ folder - if the dependencies are the same versions that you installed when originally developing, they might have engines properties in their package.json files that you could look at and piece together a picture of what Node version the application was developed for.
If you are trying to update the app to use a modern Node version, an easy way forward is to simply run the app, see what breaks, look up documentation to see what has changed between versions, and update your code until it works as expected.
TL;DR - There is no definitive way of knowing what the Node version was when the app was developed, unless it was documented by the developer.
I've built a custom style "skin" on top of bootstrap that I intend to use in multiple UI projects.
Rather than copying/pasting the UI styles/components (built using sass and typescript in my current Angular 5 project), I want to build an NPM package that I can install these styles and components I've built in new projects, thus allowing updates to be done to the NPM package (maybe extending the controls within for example) without breaking the UI's using them or needing to update files within.
I've never setup an NPM project before. I've found a number of examples of how to build NPM packages, for example https://codeforgeek.com/2014/08/how-to-create-nodejs-npm-package/ but it seems to be for vanilla JS in this example. I need an example which:
Builds on a dependency, in this case bootstrap
Is to be used in Angular (I'm using version 5)
Is installable and updatable via NPM or maybe Yarn
Has anyone any top tips on achieving the above? Or any really clear guides where someone has done this before?
I realise this question is relatively broad but really I just need some pointers to get started and I will document the process further when I have a better understanding.
Thanks in advance!
So you should move your theme into a separate project. Then all you have to do is run npm init in that directory and you have a npm.
As for sharing it between projects, I would create a repo on Github for this theme npm. Push all of your changes there. Then you can reference it in the package.json of all your projects by linking to the Github repo. Here is a good Stack question about how to do that.
Finally, if you want to develop your theme locally inside one of your projects, you can use npm link. Here are he docs on that.
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.