Reputation: 7309

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module

When I try to create a component in the angular cli, it's showing me this error. How do I get rid of it ?

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

I'm using angular cli version: 1.4.1

Upvotes: 577

Answers (25)

Roberto C. Rodriguez-Hidalgo

Reputation: 632

There is a way to create a standalone component since Angular 16. so, you would not need to create the component into a given module.

ng generate component component-name --standalone

Standalone components, directives, and pipes are new features in Angular v16. So you can easily use components that are not tied to modules, like in other frameworks like React or Vue.

Upvotes: 2

mstgnz

Reputation: 3898

When you add it to your angular.json file, you will not encounter this warning again.

"@schematics/angular:component": {
    "skipImport": true
},

Upvotes: 0

Vignesh Ravichandran

Reputation: 189

you have to mention only the module starting name before the .module extension

for example if your module name is user-account.module.ts then in the command provide like

ng g c newComponent --module=user-account

Upvotes: 4

Naeem Bashir

Reputation: 2017

for me this command working:

ng g c new-component --module app

Upvotes: 34

Scott Moniz

Reputation: 660

In my case, it seems ng is not registered into my environment path. I have been using npm run command to run the ng commands. Be aware in order to pass arguments you need an extra -- as per the npm run specification.

Example:

npm run ng g c components/scheduling **--** --module=app

Or:

npm run ng g c components/scheduling **--** --skip-import

Upvotes: 7

Ms.KV

Reputation: 261

You have to give the specify module name like

ng g c your-component --module module-name

Where module-name should be that you want to update with newly created component.

Upvotes: 5

sfaust

Reputation: 2373

Just to add another piece of info to this for anyone like me who happens along that just has a single application.

I had my application set up with the main app.module.ts and I had routing with the routing module in it's own folder under the main application. I went through and did some 'cleaning up' since I had a few other things that needed to be organized better. One thing I did was move the routing.module.ts to the root folder; since it was the only file in the folder I figured it didn't need it's own folder.

This worked fine at first but next time I tried to generate a new component (some time later, through the WebStorm IDE) it failed with this message. After reading through this I tried putting the routing module back into a separate folder and it worked again.

So note of warning to others, don't move the routing module into your root folder! I'm sure there are other ways to deal with this too but I'm happy with it in it's own folder for now and using the IDE generator like I was previously.

Upvotes: 3

Valera Tumash

Reputation: 641

I had this warning when had this in angular.json config:

"prefix": "app_ng"

When changed to "app" all worked perfectly fine.

Upvotes: 1

rohithd

Reputation: 147

if you are creating in specific module go to that path and run ng g c componentname

else create module first ng g module modulename

cd arc/app/modulename go to modulename path and create the component

Upvotes: 2

UniCoder

Reputation: 3233

There are two ways to solve this issue.

1) Skip (using --skip-import in command) default import and create component and once component is created import it manually wherever you want to use it.

ng generate component my-component --skip-import

2) Provide module name explicitly where you want it to be imported

ng generate  component  my-component --module=my-module.module

Upvotes: 17

Shurvir Mori

Reputation: 2417

Try This: It is working for me

ng generate component componentName --module=app.module

Upvotes: 154

Homa

Reputation: 132

Angular CLI: 8.3.4 Node : 10.16.3 Angualr : 4.2.5

I used "dotnet new angular" command to generate the project, and it has generated 3 different modules in app folder (Although a simple test with ng new project-name just generates a single module.

see the modules in your project and decide wich module you want - then specify the name

ng g c componentName --module=[name-of-your-module]

You can read more about modules here: https://angular.io/guide/architecture-modules

Upvotes: 2

Zuber

Reputation: 3473

Angular CLI: 8.3.1

when you have multiple module.ts files inside a module, you need to specify for which module file you are generating component.

ng g c modulefolder/componentname --module=modulename.module

for e.g. i have shared module folder inside which i have shared.module.ts and material.module.ts like this

shared
  > shared.module.ts
  > material.module.ts

and i want to generate sidebar component for shared.module.ts then i will run following command

ng g c shared/sidebar --module=shared.module

if you want to export the component then run following command

ng g c shared/sidebar --module=shared.module --export

Upvotes: 3

SoEzPz

Reputation: 15922

When app or lib have multiple nested modules

myApp
  > src
    > app
      app.module.ts
      > routes
        > login
          > auth
          login.module.ts

Angular CLI

ng g component routes/login/auth/my-auth --module=routes/login/login.module.ts

NRWL NX Angular CLI

ng g component routes/login/auth/my-auth --project=myApp --module=routes/login/login.module.ts

Result

myApp
  > src
    > app
      app.module.ts
      > routes
        > login
          > auth
            > my-auth
              my-auth.component.ts etc...
          login.module.ts

Upvotes: 9

priya_21

Reputation: 159

when you have more than one module, you need to specify module name

 ng g c componentName --module=modulename.module

Upvotes: 2

Shakeer Hussain

Reputation: 2546

I was getting below error when trying to create a new component under a folder.

error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

I have used below command and new component got created successfully under a folder.

 ng g c folderName/my_newComponent ---module ../app

Upvotes: 5

bresleveloper

Reputation: 6066

This is caused since the generation tried to add your component to a module, i.e. to add this line

import { MyComponent } from './Components/my-component/my-component.component';

but it found 2 modules.

As stated here, they fixed it to a situation where as long as in the root src/app folder you have only 1 module, you're fine, so just move the secondaries modules to a sub-folder.

Otherwise you have to use --module

Upvotes: 75

zisha

Reputation: 11582

Specify the module using the --module parameter. For example, if the main module is app.module.ts, run this:

ng g c new-component --module app

Or if you are in an other directory then

ng g c component-name --module ../

Upvotes: 1146

Palash Roy

Reputation: 1765

When there is more than one module under app folder, generating a component with below command will fail:

ng generate component New-Component-Name

The reason is angular CLI detects multiple module, and does't know in which module to add the component. So, you need to explicitly mention which module component will be added:

ng generate component New-Component-Name --module=ModuleName

Upvotes: 4

pchemeque

Reputation: 341

Angular CLI: 6.0.8
Node: 10.4.0
OS: linux x64
Angular: 6.0.4

In case there is a feature module (e.g. manager.module.ts inside the e.g. "/manager" sub-folder) with the routing module externalized into the separate NgModule (e.g. manager-routing.module.ts) the error message:

More than one module matches. Use skip-import option to skip importing the component into the closest module.

does not appear and the component is properly generated and added to the manager.module.ts module.

BUT BE CAREFUL the naming convention! the name of the routing module must terminate with "-routing"!

If the routing module is given a name like e.g. manager-router.module.ts, CLI will complain with the error message and expect you to provide --module option to automatically add the component import:

ng generate component some-name --module=manager.module.ts

ng generate component some-name --skip-import

if you prefer to add the import of the component manually

Upvotes: 10

Anoop Mayampilly Muraleedharan

Reputation: 417

As a hack, below steps, worked for me.

1) Move *.module.ts files from src/app to a location out of the project.

2) Execute command to create component [ng g c component-name]

3) Move back the *.module.ts files to src/app/

Upvotes: 0

Valera Khomchenko

Reputation: 669

It is working for me

ng g component component-name --skip-import

Upvotes: 56

Istvan Dembrovszky

Reputation: 99

try ng g component header --module app it is work for me

Upvotes: 1

Matheus Maximo

Reputation: 149

My project was created using Visual Studio Community 2017 and it creates 3 separated modules: app.browser.module, app.server.module and app.shared.module

In order to create my components I checked above answers and found my module to be app.shared.module.

So, I run:

ng g c componentName --module=app.shared.module

Upvotes: 4

Saleem Khan

Reputation: 2275

Just a small update to Zisha's answer.

In my project all the modules were placed in a folder called "modules" and all the components are placed in "components" folder under "src/app"

so to create a component under a specific path, I used the following syntax :

ng g c components_path/component_name --module modules_path/module_name

example :

ng g c components/login --module modules/app

Upvotes: 12

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module

Answers (25)

Related Questions