No module files found error when trying to generate components

Hi Friends,

In this post, I thought of addressing one of the errors which many of friends have been asking since few days. Actually, angular template under dotnet stack has been changed. For more info around the same, please refer my earlier post http://myview.rahulnivi.net/dotnet-angular-aurelia-knockout-react-redux-vue/. It means developers when used to execute angular template either via dotnet cli command or via yeoman generator, there used to be app.module.ts file. At this moment, when I try creating new component say ng g c movies, this will give below error.

Error locating module for declaration – SilentError: No module files found – While trying to create a new component or service using the angular CLI. This occurs because the angular CLI is expecting to have a file with name app.module.ts and with the new convention; this file splitted into 3 files as

app.module.client.ts,
app.module.server.ts,
app.module.shared.ts

And this doesn’t follow the angular CLI convention. The template which we are using in this project is part of JavaScript-Services and its the same template which is part of yeoman as well, and they do not want to be Angular CLI dependant. This template is for .NET Core. Therefore, it can be used in Visual Studio as well, and developers behind this project decided to split the app.module.ts, to separate dependencies used only on the client, or only on the server, and the shared ones in another file.

One solution to this problem is either rename app.module.shared.ts to app.module.ts and then create the component, it will work. But the problem with this approach is while creating new component, it won’t automatically gets registered with module file which means every time you add any module or service, you will have to manually register the same in the module file.

The other solution which I usually prefer renaming client file as in app.module.client.ts to app.module.ts. Now, open the renamed file

Here, I have applied …(three dots) for declarations section inside bracket, so that it can refer the appropriate files. Now, we need to fix the reference for this file in boot-client.ts. Below is the updated file.

With the above change in place, let’s say when I create new component via ng g c movies. It will automatically register the same app.module.ts file.