Generate component in specific folder with the Angular CLI

# Table of Contents

# Generate component in specific folder with the Angular CLI

To generate a component in a specific directory or a subdirectory:

Open your terminal in your project's root directory (where your package.json file is).
Run the npx ng generate component path/to/component command.

Here is an example.

shell

Copied!
npx ng generate component auth/users

generate component in specific folder

As shown in the screenshot, the component is generated at src/app/auth/users/users.component.ts.

The command created an auth/users/ directory in my app folder.

component generated in specific folder

After generating the component in a subfolder, open your app.module.ts file and make sure the component is imported correctly.

In my case, the relevant import statement looks as follows.

app.module.ts

Copied!
import { UsersComponent } from './auth/users/users.component';

@NgModule({
  // 👇️ Make sure the component is added to your declarations array
  declarations: [AppComponent, UsersComponent],
  // ...
})

make sure generated component is imported correctly

Notice that the path that was generated for the component is src/app/auth/users/users.component.ts.

If you don't want to create a users folder, issue the command with the --flat option.

# Generating a component in a specific directory with the `--flat` option

The --flat option creates the new files at the top level of the current project.

shell

Copied!
npx ng generate component auth/users --flat

generate component in specific directory flat

Notice that the users directory is not created when the --flat option is set.

Instead, the users component is generated in the auth directory.

The path is the following: src/app/auth/users.component.css.

create the new files at top level

After you generate a component in a specific directory, always make sure to check your app.module.ts file to verify the component is imported correctly and added to the declarations array.

import component and add to declarations array

When using this approach you can generate other components in the auth/ directory.

shell

Copied!
npx ng generate component auth/admins --flat

generate other component in specific directory

The admins.component.ts file is generated in the auth directory, right next to the users.component.ts file.

generated another component in the specified directory

# Opening your terminal in the specific directory

An alternative approach is to open your terminal in the specific directory in which you want to generate a component.

This is quite easy in Visual Studio Code:

Right-click on the directory in which you want to create a component in the left sidebar.
Select Open in Integrated Terminal.

right click open in integrated terminal

Run the npx ng generate component component-name command.

shell

Copied!
npx ng generate component authors

create component in specific folder by opening terminal in same folder

I issued the command from my src/app/auth directory, so it generated a component at src/app/auth/authors/authors.component.ts.

Notice that the command generated a separate folder for the component (authors/).

command generated folder for component

If you don't want to create a specific folder for the component, use the --flat option.

Right-click on the directory in which you want to create a component in the left sidebar.
Select Open in Integrated Terminal.

right click open in integrated terminal

Run the npx ng generate component component-name --flat command.

shell

Copied!
npx ng generate component authors --flat

separate folder not generated for component

The component is now generated at src/app/auth/authors.component.ts.

Notice that the authors/ directory wasn't created this time.

The authors component is now generated directly in the auth/ folder.

# Copying the Relative Path of the specific directory

An alternative way to generate a component in a specific folder is to:

Right-click on the folder in which you'd like to create the component in the left sidebar.
Select Copy Relative Path.

right click copy relative path

Run the cd command to change to the specific directory.

shell

Copied!
cd the/path/you/copied

Run the npx ng generate component-name command.

shell

Copied!
npx ng generate component component-name

cd into specific directory

If you want to generate the component at the top level, use the --flat option.

shell

Copied!
npx ng generate component component-name --flat

Note that the generated components must be in the app/ directory.

I've also written an article on how to open your terminal in the directory of the currently opened file in VS Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Generate component in specific folder with the Angular CLI

# Table of Contents