Create an Angular blank workspace

Prepare your application for a monorepo structure

Angular workspace was introduced at Angular 6, where you could create libraries and applications. This practice is gaining more power since monorepo is becoming a big thing.

Create new workspace

Assuming you are using Angular 7, run the following command.

$ ng new my-project-name --create-application false

If you want to run the previous command just to test, I recommend adding the--skip-install flag for speed.

This will create an Angular workspace without the src and e2e directories. It will also generate an angular.json file without a defaultProject and any content on projects. And will not add @angular-devkit/build-angular as a devDependency on package.json.

Update existing workspace

If you generated an Angular 6 workspace ( ng new with Angular 6), you can follow one of these two scenarios.

Delete the default project

Delete the src and e2e directories, remove all references of this project from angular.json (projects and defaultProject)and that's it. You can remove @angular-devkit/build-angular from package.json, but I wouldn't bother. It will be added again when you create an application to test your libraries.

Keep the default project

If you want to keep the default project, I’d recommend creating a sample application as a guide to migrate your project: ng generate application sample. You will see the following folder structure:

Sample Angular application folder structure

When an application is generated, it creates a folder for the application and another for it's e2e tests. The difference is that src is no longer the root folder, and browserslist, karma.conf.js, tsconfig.app.json, tsconfig.spec.json and tslint.json continue on the root, which again, is not src.

After moving your files into the new folder structure, you need to change angular.json to reflect this change. Everyplace that has src in the previous configuration, will be replaced by projects/your-application/src. Pay attention to the files that are now outside the src file. Their path will be projects/your-application/file-name. And don't forget that the root of the projects has changed to projects/your-application and projects/your-application-e2e.

This article is part of a collection of tips for managing Angular workspaces.

Thanks for reading the article! If you liked it, don’t forget to 👏 . It means so much to me and it helps others see this story.

If I forgot anything, there is something to fix, or you have a question, don’t be afraid to post here ✋