ng generate doesn't work with multiple apps

[mbrezovsky]

I have defined two applications in angular-cli.json with names app (default) and spa. When I generate any part of app (component, class, etc.), it is always generated to default application folder /app.
I tried to use option --app spa, it's ignored and files are generated to /app folder.

Any way how to fix that?

angular-cli.json

{
  "project": {
    "version": "1.3.0",
    "name": "web"
  },
  "apps": [
    {
      "name": "spa",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "spa.html",
      "main": "main-spa.ts",
      "test": "test-spa.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "spa",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "app",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

Versions.

ng version                   
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 8.2.1
os: linux x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/compiler-cli: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/platform-server: 2.4.2
@angular/router: 3.4.0
@angular/cli: 1.3.0

node -v      
v8.2.1

[deebloo]

I think the value for --app is supposed to be the index of the app cofig not the name. So --app=1

[mbrezovsky]

Using index of app in --app option created a module with the right selector in case of component but all files are gerenerated to wrong directory.
I have two applications with names app and spa with separated directories. Is it supported by angular-cli?

[joshvito]

+1
I have multiple app definitions in my .angular-cli.json file. When I use the ng g module my-module the new module always gets created in the /src/app/ directory.

How can I use generate command to do the following?

//exec from new project directory
// I would expect the following modules to be created
ng g module my-module --app app1  =>  /src/app1/my-module/my-module.module.ts
ng g module my-other --app app2  => /src/app2/my-other/my-other.module.ts

I've tried exec from the directory where I want the module to be generated too, and it still creates the module in the wrong location. e,g, /src/app

// exec from /project/src/my-spp/
ng g module my-module --app app1  => creates /project/src/app/my-module/my-module.module.ts

Am I missing a config setting?

See my app definitions below.

 "apps": [
    {
      "root": "src",
      "outDir": "dist/outcomes-mgmt",
      "assets": [],
      "index": "index.html",
      "main": "outcomes-mgmt.ts",
      "name": "outcomes-mgmt",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "out",
      "styles": [],
      "scripts": [],
      "environmentSource": ...,
      "environments": ...
    },
    {
      "root": "src",
      "outDir": "dist/planning-mgmt",
      "assets": [],
      "index": "index.html",
      "main": "planning-mgmt.ts",
      "name": "planning-mgmt",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "pln",
      "styles": [],
      "scripts": [],
      "environmentSource": ...,
      "environments": ...
    }
  ]

[grizzm0]

The app folder is a hardcoded string and can not be changed. You need to change the root folder from "src" to "src/foobar". The path for the "application files" for that app will then be "src/foobar/app".

[colideum]

@grizzm0 so, if it is hardcoded, it means error? because as i understand --app is exactly made for the purpose of defining the place of the app

[grizzm0]

Each app in the apps array in .angular-cli.json has the structure you see inside "src" in a new project.

If you want to create a new app you need to move the entire content of ./src to ./src/app-name and change the apps.0.root key from "src" to "src/app-name".

The new structure would be

src/app-name/app/app.module.ts
src/app-name/app/...
src/app-name/index.html
src/app-name/main.ts
src/app-name/...

There's currently an issue with sharing code between different apps in AOT. See #7309 for more info.

[scurk1415]

I have the same problem. 2 applications (but both have different source directories - /src and /src-upp), but the CLI always generates in the first no matter if i use --app or not

[jehoshua02]

The reason for this is that hard coded 'app' is appended to the "root" from .angular-cli.json:

const appRoot = path.join(sourceDir, 'app');

See https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/utilities/dynamic-path-parser.ts#L16

What is the reason for forcing everything into 'app'? This is troublesome especially for fitting angular-cli into existing hybrid projects where the "app" folder is already named something else, for example "ng2-app", and it is silly to have "ng2-app/app".

#showstopper

[mur-tha]

If I understand this correctly, the CLI is using the app at index 0 to set the generate path and not adjusting when setting the --app flag. I got a workaround working by setting a dummy app as the first app in the array and only giving that app the root property.

"apps": [ { "root": "src" },

It seems that the "root" property is all it needs to work.

Then with this setup, I just enter the app folder I need as part of the module name in the generate command for the new item. This seems to put it in the right place.

ng g module spa/my-new-module
create src/app/spa/my-new-module/my-new-module.module.ts

[vecernik]

using 1.5.0-beta.3, setting "root": "src/extra-app" will disallow a compiler to use other (i.e. shared) sources, usually located in src/.
I tried to set "appRoot": "extra-app", but it's ignored:
ng g c extra-app/features/device/SideDevices --skip-import -d
create src/app/extra-app/features/device/side-devices/side-devices.component.styl (0 bytes)
create src/app/extra-app/features/device/side-devices/side-devices.component.html (31 bytes)
create src/app/extra-app/features/device/side-devices/side-devices.component.spec.ts (664 bytes)
create src/app/extra-app/features/device/side-devices/side-devices.component.ts (293 bytes)

also I can't manually select a module path+filename, it always produces error "Error: Could not find an NgModule"

[Brocco]

This should be handled via PR #7775.

[kasimkha]

I do not see a fix for this issue, how do i add components using cli in my multi-app project

[kmanaseryan]

In .angular-cli.json besides having "name" property for the app you need also have "appRoot" as well.
e.g. "appRoot": "app1"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}