Angular Multi Application Project Creation

Angular Multi Application Project Creation

  1. If your installed Angular global version is different and you want to create different version Angular application. Here my angular global version is 6. I am creating application with version 10.
npx -p @angular/[email protected] ng new multiple-application --create-application=false

If you have latest angular global version. Just write the syntax

ng new multiple-application --create-application=false

The --create-application=false parameter avoids the creation of an initial application (default value is true). Otherwise, the Angular CLI creates an application in the src folder of the new workspace.

Now you will get the files and folders the Angular Workspace :

  • angular-apps/README.md for introductory documentation,
  • angular-apps/angular.json for the CLI configuration for build, serve, and test tools of all projects in the workspace,
  • angular-apps/package.json for npm configuration. Check out npm documentation for more details,
  • angular-apps/tsconfig.json for TypeScript configuration,
  • angular-apps/tslint.json for TSLint configuration,
  • angular-apps/.editorconfig for the configuration of code editors. See EditorConfig,
  • angular-apps/.gitignore for specifying files that should be ignored by Git.

2. Now i am creating two applications in an existing workspace :

ng g application frontend
ng g application admin

No alt text provided for this image

You can see two projects (admin, frontend) in projects folder and in angular.json.

in defaultProject of angular.json, you can see the "frontend". By default "localhost:4200" will run frontend application.



Dheeraj Sharma

Sr. Frontend Developer - Angular, React.js and Next.js

4 年

Really useful...

要查看或添加评论,请登录

Piyali Das的更多文章

  • Accessible Bootstrap Dropdown Navigation

    Accessible Bootstrap Dropdown Navigation

    The Focus Focus refers to what element in your application (such as a field, checkbox, button, or link) currently…

  • Front-end development using Gulp

    Front-end development using Gulp

    Gulp is a JavaScript toolkit which helps you in implementing multiple front end tasks during web development, it can be…

  • Angular Dynamic Context Menu

    Angular Dynamic Context Menu

    "contextmenu" is an event like click, mouseup, mousemove, mousedown. This "contextmenu" event is typically triggered by…

    2 条评论
  • Right-click Context Menu In JavaScript

    Right-click Context Menu In JavaScript

    "contextmenu" is an event like click, mouseup, mousemove, mousedown. This "contextmenu" event is typically triggered by…

  • Dynamic Height in Angular Application

    Dynamic Height in Angular Application

    In this tutorial, i have explained how you an dynamically set height of a div of component depending on other div of…

  • Code Optimization Advantage with Example

    Code Optimization Advantage with Example

    Dynamic Font Change non-optimize code HTML code…

  • Advantages of Angular Library in Architectural Design

    Advantages of Angular Library in Architectural Design

    Application Strategic Design Decompose the big application into smaller libraries Smaller libraries are easily…

  • Tree shaking vs. Non tree shaking providers in Angular

    Tree shaking vs. Non tree shaking providers in Angular

    In our example we are importing and referencing our Service in the AppModule causing an explicit dependency that cannot…

  • Angular Port Change

    Angular Port Change

    3 steps to change port in Angular Change in Angular.json Change in script of package.

    2 条评论

社区洞察

其他会员也浏览了