Skip to content

The "ng generate" command does not work with custom "sourceRoot" property in "angular.json" #10702

Closed
@mwilkosinski

Description

@mwilkosinski

Versions

Angular CLI: 6.0.0
Node: 10.0.0
OS: linux x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

  1. Create a new app: ng new xyz
  2. Rename the src directory to foo
  3. In angular.json change all occurrences of src to foo:
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xyz": {
      "root": "",
      "sourceRoot": "foo",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/xyz",
            "index": "foo/index.html",
            "main": "foo/main.ts",
            "polyfills": "foo/polyfills.ts",
            "tsConfig": "foo/tsconfig.app.json",
            "assets": [
              "foo/favicon.ico",
              "foo/assets"
            ],
            "styles": [
              "foo/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "foo/environments/environment.ts",
                  "with": "foo/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": "xyz:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "xyz:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "xyz:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "foo/test.ts",
            "polyfills": "foo/polyfills.ts",
            "tsConfig": "foo/tsconfig.spec.json",
            "karmaConfig": "foo/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "foo/favicon.ico",
              "foo/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "foo/tsconfig.app.json",
              "foo/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "xyz-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "xyz:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "xyz"
}
  1. Generate new component: ng g c bar
  2. When it fails, run: ng g c bar --skip-import

Observed behavior

  1. Command ng g c bar fails with an error: Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
  2. Command ng g c bar --skip-import creates the component in a wrong directory:
CREATE src/app/bar/bar.component.css (0 bytes)
CREATE src/app/bar/bar.component.html (22 bytes)
CREATE src/app/bar/bar.component.spec.ts (607 bytes)
CREATE src/app/bar/bar.component.ts (257 bytes)

Desired behavior

ng g c bar generates component bar in foo/app/bar

CREATE foo/app/bar/bar.component.css (0 bytes)
CREATE foo/app/bar/bar.component.html (22 bytes)
CREATE foo/app/bar/bar.component.spec.ts (607 bytes)
CREATE foo/app/bar/bar.component.ts (257 bytes)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions