Angular Workspace: No Application for You!
In this article we will learn about Angular Workspace.
The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application
A nice addition to Angular CLI 7.0.0 was the
--create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries.
NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see
--create-application, you can also use
--createApplication. For more details see my article:
Angular CLI: camelCase or kebab-case
Before the flag:
By now you have created some or even many Angular applications using Angular CLI. Typically, we do something like this:
ng new foo
When we do this, Angular CLI creates the initial application that we all know and love in
src/app directory in our Angular Workspace.
Usually, this is exactly what we want. However, this initial application can cause problems when we want to generate an Angular Library.
You probably remember from my article Creating a Library with Angular CLI how I recommended creating a Workspace and then renaming it. We did this so the initial generated application wouldn’t conflict with our library’s name. Well, I have good news: we don’t need to use this convoluted strategy anymore.
--create-application flag is used with the
ng new command. Setting this to false tells
ng new not to create the initial Angular application in the Workspace. By default this flag is set to true to match the behavior of the previous versions of Angular CLI.
Here is how it is documented on angular.io:
Notice the documentation uses camelCase.
To create an Angular Workspace with no initial application we use:
ng new foo --create-application=false
Doing this creates an Angular Workspace that seems rather empty compared to what we have been used to in the past. Although, it does have some important things:
Includes all the usual dependencies we need for Angular
The Angular config file but with no projects
- As for README.md, tsconfig.json, tslint.json, and node_modules, it’s basically the same as it ever was.
You will notice that there is no src directory. Later, a projects directory will be added when we generate a library or application.
Since we set the
--create-application flag to false, there is no initial application. And hence, if we try to do something like
ng build or
ng serve, we get an error:
Could not determine a single project for the ‘build’ target.
When would I use this?
OK, that’s a valid question. After all, the initial application created by Angular CLI is a great starting point. I mean hey! It even has Unit Tests!
One great reason to set
--create-application=false is so we can use
ng generate to create an Angular Library.
For example, typically when creating an Angular Library you want the following:
- An Angular Library in your projects directory
- An Angular Workspace with the same name as your Angular Library
- A test application that provides example uses of our Angular Library
As I mentioned at the beginning of this article: previously creating a Workspace with the name of our library resulted in the initial application being created with the same name. This prevented us from using that name for our Angular Library, which was the main reason we created the Workspace in the first place.
Let’s create an example Angular Workspace that fits the criteria we outlined above. Assume that we want to create an Angular Library named foo-lib.
So first we will create an Angular Workspace with the same name as our intended library. Remember to use the
ng new foo-lib --create-application=false
When you get asked about the Router and CSS just choose the defaults.
The Library Project
Now that we have our Angular Workspace, we can add the library project to it. If you read my article about creating Angular Libraries, you know that I recommend always using a prefix:
cd foo-lib ng generate library foo-lib --prefix=foo
This adds a projects directory containing a foo-lib directory for our newly generated foo-lib Angular Library.
The Test Application
Finally, we want an application that we can use to call our Angular Library. We can use this application for testing and maybe even for documenting examples of using our Angular Library.
ng generate application foo-tester
This adds a foo-tester directory in the projects directory for our newly generated test application. Additionally, Angular CLI adds a foo-tester-e2e project for end to end testing.
Building, Serving, and Testing
Now that we have our projects in place, we can use Angular CLI to build, serve, and test.
You will want to always specify the project that is your target.
To build our foo-lib Angular Library we use:
ng build foo-lib
Note that, since version 6.1, Angular CLI always builds libraries in production mode so we don’t use the
To build our test application we use:
ng build foo-tester --prod
Unlike a library, when building an application we do use the
We don’t serve our library. But, we can serve our application like this:
ng serve foo-tester
We can run Unit Tests for both our Angular Library and our test application.
To run the library tests:
ng test foo-lib
And, to run the application tests:
ng test foo-tester