Thank you for reading my blog posts, I am no longer publishing new content on this platform, you can find my latest content on my personal site - mainawycliffe.dev
One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular developers the ability to have more than one project in one workspace. This brings all your projects under the same workspace. This is not limited to applications but also angular libraries. This gives developers the freedom of breaking down large applications into smaller applications and modules. The modules such as authentication module can then be shared across the applications using those specific modules. This improves the workflow by reducing code repetition using shared libraries that are generated and managed by Angular CLI.
To use Angular CLI Workspaces, you must be running the latest version of Angular, Angular 6. If you are using an earlier version of Angular in your project, please upgrade by following the instructions here.
For a new project, there is nothing special about creating a new one:
ng new application-name
This will look like any other angular project, with all your source code being under
src directory. To add another angular project (application or library) to your application, you use the
ng generate command. This is the same command you use to generate new components, services, classes etc.
ng generate application *new-application-name*
ng generate library *library-name*
NB: You can learn more about ng generate command here. By default, all new applications and libraries are placed under the projects directory in the root of the angular workspace. You can change this by modifying the
angular.jsonfile in the root of your workspace, then modify the
newProjectRootto your preferred directory.
The initial application in your workspace is the default application. This means that when you run angular cli commands like ng generate component without specifying the project, then they are automatically generated in the default application. To generate components, services, classes etc. for the new projects you must provide the project option, as shown below:
ng g c my-new-component --project application-name ng g s my-new-service --project application-name
The same applies to libraries:
ng g c my-new-component --project library-name ng g s my-new-service --project library-name
This is the easy part. When building or serving your application, you only need to add your project name to your build command, as show below:
ng serve application-name --aot ng build application-name –prod ng build library-name --prod
You can skip the project name when building or serving the default project.
ng serve --aot ng build --prod ng build –prod
The build files can be located in a
project folder under
dist folder in the root of your workspace. For instance, if the project name is project1, then they will be located under
Angular CLI Workspaces is not a perfect tool but will improve with each release of Angular in the future. It would be nice if all projects could be placed under a single projects folder and not one for generated project and the src directory for the initial project. The other downside I came across is lack of or scattered documentation although this can be attributed to the fact that not many developers are using it for now. That being said, it’s a simple to use tool yet very effective that you should definitely give a try. In my case, I am already using it for most of my projects.
Building and deploying Angular app is very time consuming, especially with large application. You also must keep track of which branch you …Read More
Angular Flex Layout is a powerful layout tool available for Angular. It provides an API than can be easily used in both component templates …Read More
A few weeks ago, I demonstrated how to implement Sign in with Facebook with a REST API. Today, I will show you how to Sign-in with Google in …Read More
Today, I am going to show you how to create an Angular App with a REST API that uses Facebook Login to sign in/up users. For this …Read More