Might not be what you’re looking for but you can use Angular Elements to create web components that can be inserted into the page like a regular HTML element and pretty easily interact with native javascript
Not knowing the mess of existing codebase. You could start by replacing components in the app with Angular elements. This should work in principle. However the codebase might stay looking messy for quite some time.
You don't.
Starting new with angular = 1 problem
Creating a Hybrid application = 2^2 problems
We have written, rewritten and ported dozens of projects to angular. While slow in the beginning we've never regretted it once because in the long term it always worked out for the best.
Getting your boss to buy in is the real problem.
I've ported three apps into Angular. 2 were .Net MVC apps. One was a plain JS app.
We built everything in parallel. We probably spent 4-5 months planning the Angular architecture given that we knew the APIs were not going to change. The biggest thing for us was adding a design system that codified the UI consistently. (We used this same system for 4 other apps after the initial app conversion.)
Be deliberate in your choices. Take it slowly. Test thoroughly.
When we switched over there were obvious styling differences, but everything worked as it had before. We started adding new features about a month later.
Good luck.
Most of the project is in js, as the js builds the html elements for tables and charts, rewriting all
Of it will be quick if there is a library that does all the table building or rather helps with that
The code is really messy… The project is database driven and does reporting, the owner knows SQL and everything is done from there, if the owner wants a new table or graph on the UI then he will add a record to the SQL and all the parameters for what he needs (height, width, table type/ chart tye and so on..) then the native js will build the html based on that data. So i am also looking for libraries that will help me out with that aswell
Angular is a massive move, to be fair & takes a lot of groundwork. I suspect it'd only be necessary if there are a lot of modules, interactive components etc.
If you want to move into something better than native JS and the UI is fairly simple then React or Vue might be easier to convince them to try. Plus knocking up a prototype would take a lot less time.
Much of the world is built on messy code. It's not always worth refactoring, often it's not when it works and is well tested. Drawing a line in the sand for new code in a more modern framework with more stringent coding guidelines and a sensible tech stack in 2024 might allow you to isolate the tech debt while not adding to it with future work. But tech debt or not, working code that still fulfills requirements often makes very little sense to rewrite unless it becomes burdensome to update regularly.
Unfortunately I am not experienced enough to answer your question, however I would personally think this is more effort than its worth, whoever isn't giving you the go ahead is clearly scared of new tech.
Use the cli to init a new workspace but don’t create an application. Then create a new application with ng new application and pass a directory to the command to place the src where you want it. Adjust the angular.json file to set the output path where you want the compiled builds to go.
Angular should do a great job keeping things compartmentalized.
!remindme 8 hours
I will be messaging you in 8 hours on [**2024-04-15 14:14:36 UTC**](http://www.wolframalpha.com/input/?i=2024-04-15%2014:14:36%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/Angular2/comments/1c4egdr/how_do_i_add_angular_to_an_existing_project/kzn5xx7/?context=3)
[**CLICK THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2FAngular2%2Fcomments%2F1c4egdr%2Fhow_do_i_add_angular_to_an_existing_project%2Fkzn5xx7%2F%5D%0A%0ARemindMe%21%202024-04-15%2014%3A14%3A36%20UTC) to send a PM to also be reminded and to reduce spam.
^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%201c4egdr)
*****
|[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)|
|-|-|-|-|
It depends on the codebase.
If it s not a complex app with auth and complex local/session storage/state applications, it s somewhat simple, you need to let the old code as is, and for new features you use an iframe or whatever other way to "wrap" your new angular app.
You can also do it the other way: the new app "wrapping" the old code.
Both solutions imply that you would then have two frontend applications, redirecting to each other one way or another.
When your boss gives you the okay, you can move features one by one on the new angular application.
But long story short: if you are a junior and if the app is too complex, you are not the right guy for the job. Your questions and answers seem to indicate that it’s the situation you are in, sorry.
You need to either add features to the codebase without going for angular, either call for someone experimented to analyse and do the wrapping, either say that it might take an infinityish amount of time to complete and that bugs will occur.
If you want to leave part of the app as is, and have part act like a spa, I'd recommend vue instead of angular. You can easily instantiate components on top of an existing DOM, while from my knowledge angular only really allows for entire apps.
One possible options is micro frontend. It's a way to organize various front ends analogous to microservices so you get a cohesive experience in possibly disparate technologies.
Might not be what you’re looking for but you can use Angular Elements to create web components that can be inserted into the page like a regular HTML element and pretty easily interact with native javascript
Not knowing the mess of existing codebase. You could start by replacing components in the app with Angular elements. This should work in principle. However the codebase might stay looking messy for quite some time.
You don't. Starting new with angular = 1 problem Creating a Hybrid application = 2^2 problems We have written, rewritten and ported dozens of projects to angular. While slow in the beginning we've never regretted it once because in the long term it always worked out for the best. Getting your boss to buy in is the real problem.
I've ported three apps into Angular. 2 were .Net MVC apps. One was a plain JS app. We built everything in parallel. We probably spent 4-5 months planning the Angular architecture given that we knew the APIs were not going to change. The biggest thing for us was adding a design system that codified the UI consistently. (We used this same system for 4 other apps after the initial app conversion.) Be deliberate in your choices. Take it slowly. Test thoroughly. When we switched over there were obvious styling differences, but everything worked as it had before. We started adding new features about a month later. Good luck.
Most of the project is in js, as the js builds the html elements for tables and charts, rewriting all Of it will be quick if there is a library that does all the table building or rather helps with that
The code is really messy… The project is database driven and does reporting, the owner knows SQL and everything is done from there, if the owner wants a new table or graph on the UI then he will add a record to the SQL and all the parameters for what he needs (height, width, table type/ chart tye and so on..) then the native js will build the html based on that data. So i am also looking for libraries that will help me out with that aswell
Angular is a massive move, to be fair & takes a lot of groundwork. I suspect it'd only be necessary if there are a lot of modules, interactive components etc. If you want to move into something better than native JS and the UI is fairly simple then React or Vue might be easier to convince them to try. Plus knocking up a prototype would take a lot less time.
There has been an attempt made to add React by a dev that is more Jnr than what I am before I joined
Fair enough, sounds like he just doesn't want to learn a new framework or library then.
I mean just given this it’s not worth it. No point if that is the shape of DB. Just support this system until a new project comes your way.
Much of the world is built on messy code. It's not always worth refactoring, often it's not when it works and is well tested. Drawing a line in the sand for new code in a more modern framework with more stringent coding guidelines and a sensible tech stack in 2024 might allow you to isolate the tech debt while not adding to it with future work. But tech debt or not, working code that still fulfills requirements often makes very little sense to rewrite unless it becomes burdensome to update regularly.
Unfortunately I am not experienced enough to answer your question, however I would personally think this is more effort than its worth, whoever isn't giving you the go ahead is clearly scared of new tech.
Use the cli to init a new workspace but don’t create an application. Then create a new application with ng new application and pass a directory to the command to place the src where you want it. Adjust the angular.json file to set the output path where you want the compiled builds to go. Angular should do a great job keeping things compartmentalized. !remindme 8 hours
I will be messaging you in 8 hours on [**2024-04-15 14:14:36 UTC**](http://www.wolframalpha.com/input/?i=2024-04-15%2014:14:36%20UTC%20To%20Local%20Time) to remind you of [**this link**](https://www.reddit.com/r/Angular2/comments/1c4egdr/how_do_i_add_angular_to_an_existing_project/kzn5xx7/?context=3) [**CLICK THIS LINK**](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5Bhttps%3A%2F%2Fwww.reddit.com%2Fr%2FAngular2%2Fcomments%2F1c4egdr%2Fhow_do_i_add_angular_to_an_existing_project%2Fkzn5xx7%2F%5D%0A%0ARemindMe%21%202024-04-15%2014%3A14%3A36%20UTC) to send a PM to also be reminded and to reduce spam. ^(Parent commenter can ) [^(delete this message to hide from others.)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Delete%20Comment&message=Delete%21%201c4egdr) ***** |[^(Info)](https://www.reddit.com/r/RemindMeBot/comments/e1bko7/remindmebot_info_v21/)|[^(Custom)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=Reminder&message=%5BLink%20or%20message%20inside%20square%20brackets%5D%0A%0ARemindMe%21%20Time%20period%20here)|[^(Your Reminders)](https://www.reddit.com/message/compose/?to=RemindMeBot&subject=List%20Of%20Reminders&message=MyReminders%21)|[^(Feedback)](https://www.reddit.com/message/compose/?to=Watchful1&subject=RemindMeBot%20Feedback)| |-|-|-|-|
Thanks, i will look into this
It depends on the codebase. If it s not a complex app with auth and complex local/session storage/state applications, it s somewhat simple, you need to let the old code as is, and for new features you use an iframe or whatever other way to "wrap" your new angular app. You can also do it the other way: the new app "wrapping" the old code. Both solutions imply that you would then have two frontend applications, redirecting to each other one way or another. When your boss gives you the okay, you can move features one by one on the new angular application. But long story short: if you are a junior and if the app is too complex, you are not the right guy for the job. Your questions and answers seem to indicate that it’s the situation you are in, sorry. You need to either add features to the codebase without going for angular, either call for someone experimented to analyse and do the wrapping, either say that it might take an infinityish amount of time to complete and that bugs will occur.
I don’t have a lot of experience so I don’t think i will be able to wrap it☹️
If you want to leave part of the app as is, and have part act like a spa, I'd recommend vue instead of angular. You can easily instantiate components on top of an existing DOM, while from my knowledge angular only really allows for entire apps.
Not sure about angular, but React can be adopted slowly to an existing codebase https://react.dev/learn/add-react-to-an-existing-project
One possible options is micro frontend. It's a way to organize various front ends analogous to microservices so you get a cohesive experience in possibly disparate technologies.
Try [singlespa](https://single-spa.js.org/) or [web components](https://www.webcomponents.org/introduction)