Angular-cli: bug: not generate files to the defaultProject

Created on 5 Jun 2018  Â·  8Comments  Â·  Source: angular/angular-cli

Versions

➜ ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / â–³ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.7
Node: 10.3.0
OS: linux x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.7
@angular-devkit/build-angular      0.6.7
@angular-devkit/build-ng-packagr   0.6.7
@angular-devkit/build-optimizer    0.6.7
@angular-devkit/core               0.6.7
@angular-devkit/schematics         0.6.7
@angular/cdk                       6.2.1
@angular/cli                       6.0.7
@angular/flex-layout               6.0.0-beta.15
@angular/material                  6.2.1
@angular/pwa                       0.7.0-beta.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.7
@schematics/angular                0.6.7
@schematics/update                 0.6.7
ng-packagr                         3.0.1
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

Repro steps

ng new test-proj
ng g application test-app
// edit angular.json defaultProject -> test-app

ng g c test-comp         
CREATE src/app/test-comp/test-comp.component.css (0 bytes)
CREATE src/app/test-comp/test-comp.component.html (28 bytes)
CREATE src/app/test-comp/test-comp.component.spec.ts (643 bytes)
CREATE src/app/test-comp/test-comp.component.ts (280 bytes)
UPDATE src/app/app.module.ts (406 bytes)

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

ref: https://github.com/angular/angular-cli/issues/10352 , #10327
cli always generate schematics (pwa,component...) to the project under src/ folder

Desired behavior


please consider using the defaultProject for single project command like ng generate, ng add... I'm still experiencing the generated files go into the project under src/ folder instead of the project under projects/defaultProject/src/

Mention any other details that might be useful (optional)

I also see an regression that the generated component nolonger be added to the nearest NgModule, but always be added to the app.module.ts. Should I create another issue for that?

angulacli high jira-sync 1 (urgent) regression

Most helpful comment

A few of us are seeing this error after the fix for the CLI ignoring sourceRoot: https://github.com/angular/angular-cli/issues/10653#issuecomment-395228949

Thanks to @darinclark for finding a workaround. It appears to just grab the last project in your angular.json. So if you have a main project and then a e2e project, reorder them so the main project is last and your default generate commands will go to the main project instead of e2e. If you need to generate something to the e2e project then you can use the --path e2e override

All 8 comments

A few of us are seeing this error after the fix for the CLI ignoring sourceRoot: https://github.com/angular/angular-cli/issues/10653#issuecomment-395228949

Thanks to @darinclark for finding a workaround. It appears to just grab the last project in your angular.json. So if you have a main project and then a e2e project, reorder them so the main project is last and your default generate commands will go to the main project instead of e2e. If you need to generate something to the e2e project then you can use the --path e2e override

just pinging to say that I faced the issue with the same angular and angular-cli versions as @rfuhrer and @darinclark workaround works.

Just curious to know if the error may be in the generation of angular.json or on the cli itself

This problem seems to happen only when an angular app is updated using ng update.

There are a bit different configurations generated with ng new project and ng update see the listed files below.

The noticeable difference that I see and could cause this problem is that:

  • in the buggy configuration we have "projects.client-e2e.sourceRoot" = "e2e" and "projects.client-e2e.root" = ""
  • in the working configuration we have "projects.client-e2e.sourceRoot" = undefined and "projects.client-e2e.root" = "e2e/"

Here are the complete files for reference:

// ng update @angular/cli
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@ng-select/ng-select/themes/default.theme.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js",
              "node_modules/sweetalert/dist/sweetalert.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "src/karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js",
              "node_modules/sweetalert/dist/sweetalert.min.js"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@ng-select/ng-select/themes/default.theme.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "client-e2e": {
      "root": "",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "src/protractor.conf.js",
            "devServerTarget": "client:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "client",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  },
  "cli": {
    "packageManager": "npm"
  }
}

and

// ng new client
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "client-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "client:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "client:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "client"
}

This might have a similar root cause as https://github.com/angular/angular-cli/issues/11321

The reason they are created to the project you were not expecting, is because they are being run in the directory of the initial project. The logic to determine the project:

  1. The project based in the current directory
  2. The default project

In this case (and the default case) the root of the initial project is "" so when you run a generate command from the root directory of your workspace it finds that project.

What we'd like to do is:

  • default project is always based on the current working directory
  • deprecate the defaultProject key in angular.json in 7.0
  • remove the defaultProject key in 8.0
  • users can either have a project in the root, or cd to the directory where the project is they want to act on, or use command line options like ng serve my-project1
  • we should work to improve inconsistencies in command-line options that accept a project specifier

We have decided to standardize on the model where the default application goes in the root of the workspace, next to the angular.json file.
The reason is that we want to reduce the concepts needed to get started with Angular, so we don't want to explain "workspace" and "project" to new users. There is only "ng new" and you get an "application".

For novice/intermediate users, we suggest that users simply run "ng new" again to get a separate application in a separate workspace.

The "monorepo" use case, where you want multiple applications/libraries to live together in one workspace, will continue to be supported for advanced users. Note that the workflow
ng new --createApplication=false; cd new_wksp; ng generate application lets you create a workspace where all projects are under the projects directory with no app in the root.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

NCC1701M picture NCC1701M  Â·  3Comments

sysmat picture sysmat  Â·  3Comments

JanStureNielsen picture JanStureNielsen  Â·  3Comments

MateenKadwaikar picture MateenKadwaikar  Â·  3Comments

hartjo picture hartjo  Â·  3Comments