Angular-cli: ng generate doesn't work with multiple apps

Created on 17 Aug 2017 · 14Comments · Source: angular/angular-cli

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

2 (required) broken

Source

mbrezovsky

All 14 comments

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

deebloo on 18 Aug 2017

👍1

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?

mbrezovsky on 18 Aug 2017

+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": ...
    }
  ]

joshvito on 18 Aug 2017

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".

grizzm0 on 20 Aug 2017

@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

colideum on 21 Aug 2017

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.

grizzm0 on 21 Aug 2017

👍1

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

scurk1415 on 18 Sep 2017

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

jehoshua02 on 22 Sep 2017

👍1

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

mur-tha on 4 Oct 2017

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"