Adding Angular application to an existing project

Question

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:

node_modules
src
- client
- server
- shared
.angular-cli.json
package.json

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.

magikMaker · Accepted Answer · 2020-01-30 18:29:06Z

9

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

answered Jan 30, 2020 at 18:29

magikMaker

5,6271 gold badge36 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2021-01-31 13:55:03Z

8

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

Create an angular project using ng new.
Move everything in the src folder to src/client
Adjust the root property in angular-cli.json (or angular.json) to src/client, also if you care about linting, adjust the linting property.
Set the extends property in tsconfig.app.json and tsconfig.spec.json to "extends": "../../tsconfig.json"
Test serving, building, testing and linting commands. They should work fine.
Copy the content from the server folder and add of its dependencies to package.json

edited Jan 31, 2021 at 13:55

CommunityBot

11 silver badge

answered Apr 6, 2018 at 13:45

Simon Kazakov

6016 silver badges10 bronze badges

Comments

Daniel Hernández Alcojor · Accepted Answer · 2019-09-30 14:28:52Z

2

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>

answered Sep 30, 2019 at 14:28

Daniel Hernández Alcojor

6041 gold badge6 silver badges19 bronze badges

Comments

Austin752 · Accepted Answer · 2019-09-22 14:25:19Z

0

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

answered Sep 22, 2019 at 14:25

Austin752

298 bronze badges

Collectives™ on Stack Overflow

Adding Angular application to an existing project

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related