ANGULAR
Complete Angular Tutorial For Beginners Introduction to Angular | What is Angular? Architecture Overview & Concepts of Angular How to Install Angular How to Create a new project in Angular Bootstrapping in Angular: How It Works Internally Angular Components Overview & Examples Data Binding in Angular Interpolation in Angular Property Binding in Angular Event Binding in Angular ngModel & Two way Data binding in Angular NgModelChange & Change Event in Angular Child/Nested Components in Angular angular directives angular ngFor directive ngSwitch, ngSwitchcase, ngSwitchDefa ult Angular Example How to use ngIf, else, then in Angular By example NgClass Example Conditionally apply class Angular ngStyle Directive Angular Trackby to improve ngFor Performance How to Create & Use Custom Directive In Angular Working with Angular Pipes How to Create Custom Pipe in Angular Formatting Dates with Angular Date Pipe Using Angular Async Pipe with ngIf & ngFor angular keyValue pipe Using Angular Pipes in Components or Services Angular Component Communication & Sharing Data Angular Pass data to child component Angular Pass data from Child to parent component Component Life Cycle Hooks in Angular Angular ngOnInit And ngOnDestroy Life Cycle hook Angular ngOnChanges life Cycle Hook Angular ngDoCheck Life Cycle Hook Angular Forms Tutorial: Fundamentals & Concep t s Angular Template-driven forms example How to set value in template-driven forms in Angular Angular Reactive Forms Example Using Angular FormBuilder to build Forms SetValue & PatchValue in Angular StatusChanges in Angular Forms ValueChanges in Angular Forms FormControl in Angular FormGroup in Angular Angular FormArray Example Nested FormArray Example Add Form Fields Dynamically SetValue & PatchValue in FormArray Angular Select Options Example in Angular Introduction to Angular Services Introduction to Angular Dependency Injection Angular Injector, @Injectable & @Inject Angular Providers: useClass, useValue, useFactory & useExisting Injection Token in Angular How Dependency Injection & Resolution Works in Angular Angular Singleton Service ProvidedIn root, any & platform in Angular @Self, @SkipSelf & @Optional Decorators Angular '@Host Decorator in Angular ViewProviders in Angular Angular Reactive Forms Validation Custom Validator in Angular Reactive Form Custom Validator with Parameters in Angular Inject Service Into Validator in Angular template_driven_form_validation_in_angular Custom Validator in Template Driven Forms in Angular Angular Async Validator Example Cross Field or Multi Field Validation Angular How to add Validators Dynamically using SetValidators in Angular Angular HttpClient Tutorial & Example Angular HTTP GET Example using httpclient Angular HTTP POST Example URL Parameters, Query Parameters, httpparams in Angular HttpClient Angular HTTPHeaders Example Understanding HTTP Interceptors in Angular Angular Routing Tutorial with Example Location Strategy in Angular Angular Route Params Angular : Child Routes / Nested Route Query Parameters in Angular Angular Pass Data to Route: Dynamic/Static RouterLink, Navigate & NavigateByUrl to Navigate Routes RouterLinkActive in Angular Angular Router Events ActivatedRoute in Angular Angular Guards Tutorial Angular CanActivate Guard Example Angular CanActivateChild Example Angular CanDeactivate Guard Angular Resolve Guard Introduction to Angular Modules or ngModule Angular Routing between modules Angular Folder Structure Best Practices Guide to Lazy loading in Angular Angular Preloading Strategy Angular CanLoad Guard Example Ng-Content & Content Projection in Angular Angular @input, @output & EventEmitter Template Reference Variable in Angular ng-container in Angular How to use ng-template & TemplateRef in Angular How to Use ngTemplateOutlet in Angular '@Hostbinding and @Hostlistener_in_Angular Understanding ViewChild, ViewChildren &erylist in Angular ElementRef in Angular Renderer2 Example: Manipulating DOM in Angular ContentChild and ContentChildren in Angular AfterViewInit, AfterViewChecked, AfterContentInit & AfterContentChecked in Angular Angular Decorators Observable in Angular using RxJs Create observable from a string, array & object in angular Create Observable from Event using FromEvent in Angular Using Angular observable pipe with example Angular Map Operator: Usage and Examples Filter Operator in Angular Observable Tap operator in Angular observable Using SwitchMap in Angular Using MergeMap in Angular Using concatMap in Angular Using ExhaustMap in Angular Take, TakeUntil, TakeWhile & TakeLast in Angular Observable First, Last & Single Operator in Angular Observable Skip, SkipUntil, SkipWhile & SkipLast Operators in Angular The Scan & Reduce operators in Angular DebounceTime & Debounce in Angular Delay & DelayWhen in Angular Using ThrowError in Angular Observable Using Catcherror Operator in Angular Observable ReTryWhen inReTry, ReTryWhen in Angular Observable Unsubscribing from an Observable in Angular Subjects in Angular ReplaySubject, BehaviorSubject & AsyncSubject in Angular Angular Observable Subject Example Sharing Data Between Components Angular Global CSS styles View Encapsulation in Angular Style binding in Angular Class Binding in Angular Angular Component Styles How to Install & Use Angular FontAwesome How to Add Bootstrap to Angular Angular Location Service: go/back/forward Angular How to use APP_INITIALIZER Angular Runtime Configuration Angular Environment Variables Error Handling in Angular Applications Angular HTTP Error Handling Angular CLI tutorial ng new in Angular CLI How to update Angular to latest version Migrate to Standalone Components in Angular Create Multiple Angular Apps in One Project Set Page Title Using Title Service Angular Example Dynamic Page Title based on Route in Angular Meta service in Angular. Add/Update Meta Tags Example Dynamic Meta Tags in Angular Angular Canonical URL Lazy Load Images in Angular Server Side Rendering Using Angular Universal The requested URL was not found on this server error in Angular Angular Examples & Sample Projects Best Resources to Learn Angular Best Angular Books in 2020

Create Multiple Angular Apps in One Project

In this guide, we will show you how to create and organize multiple apps in one Project or Workspace. The Angular CLI since version 6 allows us to create a multi-project workspace to manage multiple Angular apps. We do that first by creating an empty workspace. A Workspace is a collection of Angular apps, projects, or libraries. Later we can add multiple projects to the workspace.

❮ Migrate to Standalone Title Service Example ❯
Table of Contents

Advantages

There are several advantages of having Multiple Angular Apps in One Project.

  1. One is you do not have to run the time consuming npm install for every app.
  2. The node_modules folder is shared with all the other apps saving disk space.
  3. All the apps can be updated to the next version easily.
  4. A single source-control repository (such as git).

Create the Empty Workspace

We create a new app using the ng new <new> Angular CLI command. It creates and workspace with an initial Angular app with the name <new> in the src folder. The createApplication="false" option introduced in Angular 7 now stops the creation of the initial app. It only creates the workspace

Example

Try this code » 
                              

ng new MultipleApps --create-application="false"
cd MultipleApps

The above command creates a folder with the name MultipleApps and configures the workspace. It does not create any apps.

image
Creating Multiple Apps under a Single Project Workspace

Add a new Project to the Workspace

Now, to create a new app under the workspace, we need to use the ng generate application command The first app created is marked as the default app.

Example

Try this code » 
                              

ng generate application gettingStarted
image
Creating the App under a workspace

If you use the ng new inside the workspace, it will throw the following error.

Run the App

There are three ways in which you can run the app.

  1. Use the ng serve gettingStarted
  2. Use the --project flag ng serve --project="gettingStarted"
  3. Open the angular.json and locate the defaultProject and change the name of the project to gettingStarted and run ng serve
image
ng serve

Add Another Project to the workspace

To create another app, run the ng generate application again.

Example

Try this code » 
                              

ng generate application exampleApp

Run the App

And use the ng serve to run it

Example

Try this code » 
                              

ng serve exampleApp
OR
ng serve --project="exampleApp"

Building the App for Production

Use ng build to build the app with --project option.

Example

Try this code » 
                              

ng build --prod --project="gettingStarted"
ng build --prod --project="exampleApp"

Folder Structure

The folder structure is similar to the Single App workspace, except for the following

projects folder

The src folder is gone. Instead, we have a projects folder. Each app we create gets its folder under the projects folder.

dist folder

The dist folder now has a folder for each of the new apps.

Angular.json

The angular.json, contains the configuration settings for the workspace. Here is the shortened version of Angular.json for the above code.

Example

Try this code » 
                              
 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",     <== location of the apps
  "projects": {
    "gettingStarted": {
         //This section contains the setting for the gettingStarted project      
    },
    "exampleApp": {
        //This section contains the setting for the exampleApp project
    }},
  "defaultProject": "gettingStarted"    <== name of the default project
}

newProjectRoot: node points to the location of the projects folder.

projects: contain a section for each app in the workspace. Each section contains configuration for the compiler.

defaultProject: The default project used, when you run the ng serve, ng build etc.

Summary

In this guide, we learned how to organize multiple apps in one single workspace/Project in Angular.

❮ Migrate to Standalone Title Service Example ❯

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.

About Us

Our Story Terms of Use Privacy Policy

Contact

Contact Us Report Error Advertise

Interactive Tools

Font Awesome Icon Search Utility HTML Formatter Title & Meta Length Calculator HTML Color Picker
Copyright © 2022 Tutorial Hub Tutorial. All Rights Reserved.