How can I change the path of component generation to current path in angular-cli?

Question

I'm following an angular 2 course where the instructor navigates into the specific path where he wants to generate a component and then runs the following command:

ng generate component component-name

After he runs it, the tool generates the files inside the current directory, but when I try the same, the tool ends up generating the files at the app root folder.

In other words, if I do this:

app\my-component> ng generate component component-name

I expect the command to generate files here:

app\my-component\component-name\
  component-name.component.html
  component-name.component.ts
  ...

But instead is doing it here:

app\component-name\
  component-name.component.html
  component-name.component.ts
  ...

How can I tell ng-cli to use current path?

score 47 · Accepted Answer · answered Feb 09 '17 at 19:12

47

ng g c 'path/to/component/componentName'

You should never have to leave your root directory when working with angular cli. If you wanted all your components to go into a subdirectory called my-component you would just do ng g c my-component/componentName

Note that g and c are valid shortforms for generate and component respectively.

answered Feb 09 '17 at 19:12

Jesse Carter

20,062
7
64
101

Thanks for the response. But I'm asking this precisely because the course instructor works with it like that. I have a coworker that also uses it like that... just navigating to the path where you want to generate your components. – jacoviza Feb 09 '17 at 19:17
1

The angular cli is under constant development. This may be a feature that has been deprecated. The current recommendation as per the documentation on their GItHub is to pass in the path name as I've demonstrated. – Jesse Carter Feb 09 '17 at 19:20
Yes, I understand that this is in active development right now, so I expect to see some inconsistencies like these along the way... It might have been deprecated... but what is funny is that my coworker has a slight bigger angular-cli version. He is using 1.0.0-beta.26. I'm using 1.0.0-beta.25.5 – jacoviza Feb 09 '17 at 19:36

score 3 · Answer 2 · answered Feb 26 '18 at 22:14

Suppose you have structure src/app and you wanna create a component header living at src/app/components/ you can run ng g c components/header, which will generate files at src/app/components/header folder, like src/app/components/header/header.component.ts src/app/components/header/header.component.html etc.

score 3 · Answer 3 · answered Dec 17 '19 at 14:48

Well, after some googling and reading the other answers, it will be helpful to have some explanations here. To generate a component in your project:

cd  path/your-project

In the console (node-prompt or your IDE console) type:

ng generate component components/your-new-component-name

If you want to abbreviate:

ng g c components/your-new-component-name

You can create other angular components like: ng g directive ng g module ...

Source and more info: Angular Official Documentation

You should avoid: 'route-to-your-project': this will concatenate routes when you execute: ng g c 'route-to-your-project' and the console will show you an error because could not find the correct place to generate.

Example:

 ng g c components/alerts/test3

CREATE src/app/components/alerts/test3/test3.component.html (20 bytes)
CREATE src/app/components/alerts/test3/test3.component.spec.ts (621 bytes)
CREATE src/app/components/alerts/test3/test3.component.ts (266 bytes)
CREATE src/app/components/alerts/test3/test3.component.scss (0 bytes)
UPDATE src/app/components/alerts/alerts.module.ts (5046 bytes)

I hope it will be helpful for you

score 0 · Answer 4 · answered Feb 11 '17 at 02:35

I ran into something similar to this when following Max Schwartzmuller's Udemy course. I was trying to generate components in a subfolder parallel to app. The cli will create anything called that way directly under app.

c:\ng2\aufbs\src\mycomponents>ng g c my-test
installing component
  create src\app\my-test\my-test.component.css
  create src\app\my-test\my-test.component.html
  create src\app\my-test\my-test.component.spec.ts
  create src\app\my-test\my-test.component.ts

moving /mycomponents under app everything worked as expected.

score 0 · Answer 5 · answered Jul 10 '17 at 16:39

0

set the path from app folder, so you dont need use ng g c 'C:\someFolder\your-project\src\app\some-folder\other-folder\your-component'. just use ng g c '.\pages\shered\reset-password'

answered Jul 10 '17 at 16:39

Italo José

1,558
1
17
50

How can I change the path of component generation to current path in angular-cli?

5 Answers5