Error locating module for declaration in ASP.NET Core angular

Question

Getting error when tries to generate new angular components using command

ng g component login-form

Error locating module for declaration. No module files found.

I think angular CLI its throwing error since out of the box angular template in ASP.NET Core is has different file names, Please suggest alternative way to generate angular components in ASP.NET Core projects.

Answer 1

Please suggest alternative way to generate angular components.

Just create a new file, and start typing.

---

The CLI's g (generate) methods are simple scaffolders for components, which generate some files for you in a folder which you specify, and edit some other files. This is not a requirement for a project using CLI: you can create files yourself.

For example, generating a component will

• create a folder in the path you specify with the component's name
• create a file in the folder named {{component-name}}.component.ts with a class skeleton which has pre-filled metadata inside the @Component decorator, a constructor and implementation of the OnInit lifecycle hook,
• create an empty file in the folder named {{component-name}}.component.css, or a different extension based on your settings in the .angular-cli.json file,
• create a very simple {{component-name}}.component.html file which just states that your component is working,
• create a scaffolded test file {{component-name}}.component.spec.ts which tests for creation of a component, and -- add the component in the declarations array of the corresponding Angular module.

All of this is something you can do yourself, if you want to. For example, I do not use the CLI's g command when I'm creating very simple component, because I do not use separate files for the templates and the styles.

---

By the way, the fact that you're using ASP as your back-end should not interfere with how you manage your front-end application. Angular is a framework for building single-page applications which means that your backend be an API separate from the Angular application which will only serve as a client.

As for why you're getting the error -- are you trying to do an ng g command in a project which was not ng newd?

The other possible source of the error is that you're trying to create it in the folder which is not an Angular module. To get there, just navigate through your structure.

ng g component a/path/to/login-module/login-form

Answer 2

you can rename you app.module.shared.ts to app.module.ts and it will work correctly.

Answer 3

First of all after installing angular cli globally:

npm install @angular/cli@latest -g

You have to first create an angular project outside your main project with this command:

ng new hello-world

Now, go to project directory and copy .angular-cli.json file into the root of your main dot net core project. Then you have to edit this part of the file:

"root" : "src" change to "root" : "ClientApp"

Next, you have to install angularCli dev in your root of your project:

cd DotNetCoreProject

npm install @angular/cli@latest --save-dev

Everythings was done!

Now, go to your component directory of your project:

cd ClientApp/app/components

and make your component in component directory in terminal:

ng g c MyComponent --module='app.module.browser.ts' hope that was usefull...