#Ionic angular versions how to

The collection of micro-frontend remotes is housed inside another website, the host of the web application. You might be able to further categorize these features into domains, each of which could be a separate micro frontend, also known as a remote. You might have a shopping cart, account information for registered users, past orders, payment options, etc. So what does the micro-frontend architecture look like? Let’s say you have an e-commerce site that looks as stunning as this one: Since each micro frontend can be developed and deployed independently, you have a powerful way of scaling out frontend applications. You can combine micro-sized frontends to form a fully-featured web app. Micro frontends are modeled after the same concept as microservices, as a way to decompose monolithic frontends.

#Ionic angular versions how to

As developers, we worry about how to provide quality features and performance while keeping good development practices and architecture in mind.Įnter micro-frontend architecture. As consumers, we expect our web applications to be feature-rich and highly performant. There’s not a lot of information on the topic of Ionic multi app projects, but they can be really powerful if you can make them work for your white label solution or perhaps simply for having the Ionic app and website in one project.The demands placed on front-end web applications continue to grow. Now you would have an Angular application right next to your Ionic apps, living happy and friendly in the same project! Conclusion We are anyways in an Angular environment, so you could now go ahead with the Angular CLI and generate a new application and then serve it like this: ng generate application academyWeb -routing -style scss If you don’t enjoy how Ionic looks as a website, perhaps you want a standard Angular website? No problemo! Now you can make changes to the lib while running watch and Ionic serve, and you get a sense of why this approach can be really powerful! Feeling Fancy? To finally see it in action, simply use the default component of the lib in the projects/appOne/src/app/home/: If you added the TS config before correctly, this works now! Note that you should use the name academy-lib without any path, which your IDE might want to tell you. To prepare the workspace for our Ionic apps, go ahead and create a file at the root of the project called (which is normally automatically in Ionic projects) and simply fill it with: The result for now looks like the image below. Ng new devdacticMulti -createApplication=falseīecause Angular creates new projects and libraries in the projects/ folder we will follow that structure for our endeavour as well. This will create just a re barebones project with some files, so start with that: # Create a workspace We could start with an Ionic app and remove some of the files, but it’s actually easier to create a workspace with the Angular CLI for which we can also add a flag to not create any application. Make sure you have the Angular CLI installed as we need some of those commands as well. Today is your lucky day as we will do exactly that: Combine the Angular CLI with the Ionic setup for a multi app project and additionally create a shared library that can be used from all of the apps - and everything in one repository! There is not a lot of documentation around the topic of Ionic Multi app projects, but it can be a powerful way to create a white label solution for your clients when you have all the projects in one workspace.