How do I resolve Webpack/Angular moduleId error?

I built an app that borrows heavily from Dan Wahlin’s Angular-Jumpstart app, It works when I run it using his ‘npm start’, which looks like this:

"start": "tsc && concurrently \"tsc -w\" \"node server.js\"

I then used Visaul Studio 2017 to build the ‘ASP.NET Core + Angular 2 template for Visual Studio’ app referenced by Scott Sanderson in his blog post by the same name. This ASP.NET Core/Angular 2 sample app of his uses Webpack, Server-side rendering, and HMR. It too works fine.

However, I want to add some of the code I created for the Dan Wahlin app into the Scott Sanderson app, and I am running into a moduleId-related error. The following is an example of the error message I receive:

An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Error: moduleId should be a string in "FilterTextboxComponent". ...If you're using Webpack you should inline the template and the styles...

To resolve this I have tried:

• Removing the moduleId variable from the component(s) in question

• Setting the moduleId varaible in this manner:

  moduleId: module.id + ''
  
  

I have looked here and elsewhere and have not been able to determine what I need to do to resolve this. Is it a Webpack bug? Am I overlooking something I need to do?

I am happy to provide more information if you think that would help you help me!

via Charles Phelps