Angular-cli: Component not generated in specified directory.

[Phatsuo]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 10

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.11-webpack.2
node: 5.10.1
os: win32 x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

change to a directory, for example, /app/components, then run
ng g component new-component

1. The log given by the failure. Normally this include a stack trace and some
   more information.

installing component
create src\app\new-component\new-component.component.css
create src\app\new-component\new-component.component.html
create src\app\new-component\new-component.component.spec.ts
create src\app\new-component\new-component.component.ts
create src\app\new-component\index.ts
create src\app\new-component\shared\index.ts

1. Mention any other details that might be useful.

The documentation states:

"# if in the directory src/app/feature/ and you run"
ng g component new-cmp
"# your component will be generated in src/app/feature/new-cmp"

so the results should have been this:

installing component
create src\app\components\new-component\new-component.component.css
create src\app\components\new-component\new-component.component.html
create src\app\components\new-component\new-component.component.spec.ts
create src\app\components\new-component\new-component.component.ts
create src\app\components\new-component\index.ts
create src\app\components\new-component\shared\index.ts

---

Thanks! We'll be in touch soon.

[filipesilva]

@Brocco can you have a look?

[Brocco]

I believe this is a product of the move of the sourceDir property within angular-cli.json from under defaults into the apps property and renamed to root.

@Phatsuo can you please verify your app's angular-cli.json configuration?

[Phatsuo]

AFAIK, I am just using the default configuration.

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "test-website"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

I tried changing is as you seem to suggest:

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "upway2late-website"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "root": "src"
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

That resulted in an error.

$ ng g component news
installing component
Path must be a string. Received undefined
TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.join (path.js:466:7)
at dynamicPathParser... etc...

[Phatsuo]

I see - related to #1633.

[Phatsuo]

OK, #1633 is closed, and as of Beta 15, this is still an issue, even with a brand new project.

My angular-cli.json:

{
  "project": {
    "version": "1.0.0-beta.15",
    "name": "cli-test-beta15"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "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
  }
}

I have discovered a workaround. The following commands do allow the creation of new entities in the directory of choice. Perhaps just the documentation is incorrect at this point.

$ ng g component components//my-new-component-9
installing component
create src\app\components\my-new-component-9\my-new-component-9.component.css
create src\app\components\my-new-component-9\my-new-component-9.component.html
create src\app\components\my-new-component-9\my-new-component-9.component.spec.ts
create src\app\components\my-new-component-9\my-new-component-9.component.ts

$ ng g service services//my-new-service-3
installing service
create src\app\services\my-new-service-3.service.spec.ts
create src\app\services\my-new-service-3.service.ts
WARNING Service is generated but not provided, it must be provided to be used

The only slight problem being in app.module.ts the path ends up as (note the backslash after 'components'):

import { MyNewComponent9Component } from './components\my-new-component-9/my-new-component-9.component';

and it has to be changed to:

import { MyNewComponent9Component } from './components/my-new-component-9/my-new-component-9.component';

[Brocco]

You should be defining the path to your components with the appropriate path separator:

\ on Windows
/ on POSIX

so in your case @Phatsuo instead of:
ng g component components//my-new-component-9
you will want to do:
ng g component components\my-new-component-9

Closing this issue as I believe all is working, if not comment here and we can re-open and investigate further.

[Phatsuo]

I am on Windows, but using GitBash. This appears to be part of the problem. Sorry I did not specify that before. As of Beta 17, I have retested - everything works as documented from a DOS prompt.

From GitBash, specifying the path with a forward slash now works properly.

User@Machine MINGW64 /c/dev/junk/cli-001/my-test-project (master)
$ ng g component components/my-new-component-3
installing component
  create src\app\components\my-new-component-3\my-new-component-3.component.css
  create src\app\components\my-new-component-3\my-new-component-3.component.html
  create src\app\components\my-new-component-3\my-new-component-3.component.spec  .ts
  create src\app\components\my-new-component-3\my-new-component-3.component.ts

But the original problem I reported in this issue is still present - when generating from a subdirectory, the subdirectory is ignored. (again works fine from DOS, just not from GitBash).

User@Machine MINGW64 /c/dev/junk/cli-001/my-test-project/src/app/components (master)
$ ng g component my-new-component-4
installing component
  create src\app\my-new-component-4\my-new-component-4.component.css
  create src\app\my-new-component-4\my-new-component-4.component.html
  create src\app\my-new-component-4\my-new-component-4.component.spec.ts
  create src\app\my-new-component-4\my-new-component-4.component.ts

[whiskeysauer]

I am working through some tutorials and have discovered this as well when using GitBash. From a sub-folder of the "app" folder, I tried to create a component but it simply ended up in the "app" folder. The fact that I created the component from the sub-folder was ignored.

[MarkWilsoncom]

Same with cygwin - annoying...

[angular-automatic-lock-bot[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._}