Today, I get the privilege of starting a brand new Angular project from scratch. I decided to give the Angular project template built into Visual Studio 2019 a try. While, I appreciate the effort put in to provide this option within Visual Studio, I felt that creating the Angular project using the Angular CLI provides more control over the setup of the project and its directory structure. I plan on leveraging monorepos to structure the Angular project and github repositories for its pieces. Read this (https://www.softwarearchitekt.at/aktuelles/tactical-domain-driven-design-with-monorepos/) and watch this super awesome video about “Architectures for Huge Angular Based Enterprise Applications by Manfred Steyer (https://www.youtube.com/watch?v=tvI8JxJ38K8) to find out more about monorepos in the enterprise. I also did not like the fact that (at least at the time of this writing), Visual Studio did not provide out-of-the-box the necessary switches to load and configure the Angular Router in a separate top-level module which is a best practice.
However, I do like the option of having my Angular app integrated into my visual studio build pipeline without the need to create any special build tasks or powershell scripts at least during development. Knowing that visual studio is leveraging Angular CLI under the cover, accomplishing the above was reasonably easy.
Basically, what I am ending up doing is
1-Go ahead the delete all content under ClientApp folder
2-Use command line to generate a new and improved template with my preferred switches. Personally, I am more comfortable working with the command line vs. clicking buttons. My favorite windows console emulator is ConEmu. Check it out at https://conemu.github.io/
ng new –directory .
ng generate module app-routing –module=app
Voila. All done!
We are now back to our angular starter workspace, except that it is now customized to my liking.
PS. We don’t need to keep the same folder name or folder structure, we can easily change to our liking but we need to edit the .csproj “spaRoot” property accordingly.
