Angular Workspace: No Application for You!

Post Editor

In this article we will learn about Angular Workspace.

4 min read
post

Angular Workspace: No Application for You!

In this article we will learn about Angular Workspace.

post
post
4 min read

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: --create-application

By now you have created some or even many Angular applications using Angular CLI. Typically, we do something like this:

<>Copy
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.

Content imageContent image

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.

Using --create-application

The --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:

Content imageContent image

Notice the documentation uses camelCase.

To create an Angular Workspace with no initial application we use:

<>Copy
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:

  • package.json
    Includes all the usual dependencies we need for Angular
  • angular.json
    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.
Content imageContent image

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?
Link to this section

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.

An example
Link to this section

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.

The Workspace
Link to this section

So first we will create an Angular Workspace with the same name as our intended library. Remember to use the --create-application=false flag:

<>Copy
ng new foo-lib --create-application=false

When you get asked about the Router and CSS just choose the defaults.

The Library Project
Link to this section

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:

<>Copy
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
Link to this section

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.

<>Copy
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
Link to this section

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.

Build
Link to this section

To build our foo-lib Angular Library we use:

<>Copy
ng build foo-lib

Note that, since version 6.1, Angular CLI always builds libraries in production mode so we don’t use the --prod flag.

To build our test application we use:

<>Copy
ng build foo-tester --prod

Unlike a library, when building an application we do use the --prod flag.

Serve
Link to this section

We don’t serve our library. But, we can serve our application like this:

<>Copy
ng serve foo-tester

Test
Link to this section

We can run Unit Tests for both our Angular Library and our test application.

To run the library tests:

<>Copy
ng test foo-lib

And, to run the application tests:

<>Copy
ng test foo-tester
Content imageContent image

Share

About the author

author_image

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

author_image

About the author

Todd Palmer

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

About the author

author_image

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

Looking for a JS job?
Job logo
AngularJS Developer

techgenies

Worldwide
Remote
$89k - $113k
Job logo
Senior Angular Developer

alethiasoftwaresolutions

Worldwide
Remote
$110k - $150k
Job logo
Angular Developer

Business Integra Inc

Worldwide
Remote
$88k - $111k
Job logo
Senior Front End Developer (Angular)

EX2 Outcoding

Worldwide
Remote
$97k - $124k
More jobs
NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

blockchainpost
19 July 202212 min read
An Introduction to Blockchain

Learn the fundamentals of a blockchain starting from first principles. We'll cover hashing, mining, consensus and more. After reading this article, you'll have a solid foundation upon which to explore platforms like Ethereum and Solana.

blockchainpost
19 July 202212 min read
An Introduction to Blockchain

Learn the fundamentals of a blockchain starting from first principles. We'll cover hashing, mining, consensus and more. After reading this article, you'll have a solid foundation upon which to explore platforms like Ethereum and Solana.

Read more
blockchainpostAn Introduction to Blockchain

19 July 2022

12 min read

Learn the fundamentals of a blockchain starting from first principles. We'll cover hashing, mining, consensus and more. After reading this article, you'll have a solid foundation upon which to explore platforms like Ethereum and Solana.

Read more