ng generate doesn't work with multiple apps

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

I think the value for --app is supposed to be the index of the app cofig not the name. So --app=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?

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

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

@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

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.

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

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

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

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"

This should be handled via PR #7775.

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

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

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

Navigation Menu

Repository navigation

ng generate doesn't work with multiple apps #7418

Versions.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ng generate doesn't work with multiple apps #7418

Description

Versions.

Activity

deebloo commented on Aug 17, 2017

mbrezovsky commented on Aug 18, 2017

joshvito commented on Aug 18, 2017

grizzm0 commented on Aug 20, 2017

colideum commented on Aug 21, 2017

grizzm0 commented on Aug 21, 2017

scurk1415 commented on Sep 18, 2017

jehoshua02 commented on Sep 21, 2017

mur-tha commented on Oct 4, 2017

vecernik commented on Oct 5, 2017

Brocco commented on Oct 5, 2017

kasimkha commented on May 29, 2018

kmanaseryan commented on Jun 4, 2018

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions