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.

Answer 1

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

Answer 2

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