CODEWITHSUNDEEP
angularangular-cli
kentor
kentor

Reputation: 18544

Adding Angular application to an existing project

I've got an existing project where I'd like to add an Angular application using the Angular CLI.

The project structure looks like this right now:

The client and shared folders are still empty and I'd like to install my angular app inside the client folder but still I want to maintain just one package.json for the whole project. That's why I tried to add the angular-cli.json with the following content:

{
  "project": {
    "name": "projectname"
  },
  "apps": [
    {
      "root": "./src/client",
      "outDir": "./dist/browser"
    }
  ]
}

The question:

What's the best way to add the Angular application (into /src/client) to my project now? I wasn't able to simply run ng new because of the existing package.json and probably it wouldn't generate the app inside the /src/client folder then either.

Upvotes: 12

Views: 33346

Answers (4)

Simon Kazakov
Simon Kazakov

Reputation: 491

Using ng new is still the easiest way to achieve this.

  1. Create an angular project using ng new.

  2. Move everything in the src folder to src/client

  3. Adjust the root property in angular-cli.json (or angular.json) to src/client, also if you care about linting, adjust the linting property.

  4. Set the extends property in tsconfig.app.json and tsconfig.spec.json to "extends": "../../tsconfig.json"

  5. Test serving, building, testing and linting commands. They should work fine.

  6. Copy the content from the server folder and add of its dependencies to package.json

Upvotes: 8

magikMaker
magikMaker

Reputation: 5607

The answer of @Austin752 seems to be outdated. According to the documentation the command to add an angular application to an existing project is (Angular CLI version 8.3.23):

$ ng generate application <name> [options]

Or

$ ng g application <name> [options]

see: https://angular.io/cli/generate#application-command

This will add the new app in the projects folder in the root of your workspace

Upvotes: 9

Daniel Hern&#225;ndez Alcojor
Daniel Hern&#225;ndez Alcojor

Reputation: 604

There's a parameter --directory, at least in the latest version of Angular.

So now you just run

ng new <app-name> --directory <dir-name>

Upvotes: 2

Austin752
Austin752

Reputation: 29

I have recently worked on a project that required this type of setup. As of Angular 7.2 simply type

ng g a yourNewApp

That will create your new application in a projects folder

To create components in a newly created application 

ng g c view1 --project=yourNewApp

Upvotes: 0

Related Questions