Angular 2 Webpack Module Issues - Build Failures Due to Base Class

I am having a problem loading my Angular 2 app after I have moved multiple components from one module to another. I am guessing that I am doing something wrong in the code itself, but the error I am getting doesn’t help and I don’t know if the problem is with Angular or Webpack.

Error while loading the application:

Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf (<anonymous>)

      

        
        
        
      

    

This is the error I am getting when loading the application. I know the problem is somehow related to the services in the application, but I'm not sure what's going on. This app doesn't work:

What caused the problem?

There are four modules in my application:

• AppModule
• CoreModule
• SharedModule
• FeatureModule

My goal is to follow Angular's guidelines for modules. I installed the above modules a while ago and I noticed that I was using CoreModule incorrectly. Apart from providing the services to be used in the application, I have also added "common" / "reusable" components in this module.

After reading the FAQ about function modules , I decided to move these components to SharedModule. Most of these components now use services in the CoreModule. As soon as I moved these components to the SharedModule and updated the required code, I started to face this problem.

Currently, the modules I have installed are configured like this:

• AppModule imports the required modules along with CoreModule and FeatureModule
• CoreModule provides services to be used in the application
• SharedModule declares and exports shared components
• FeatureModule declares the components to be used in a specific function

I'm not sure if I'm importing the wrong module in the wrong place, but I can't figure out why I am getting this error simply because I moved a component from one module to another. I cannot figure out the error that makes it difficult for me to figure out what is wrong.

Installation settings:

• Angular: 4.0.1
• Webpack: 2.3.3
• TypeScript: 2.2.2

Further research

As mentioned above with the current setup, I have most of the services used throughout the application in one CoreModule (main folder). The components that use these services are located in the SharedModule (shared folder). When these components were in the same module and folder, everything worked as expected.

Now when I moved these components to the SharedModule, at first I was getting errors as described here , but I have run into this before and I just changed import

I have to reference the service directly, not the barrel. Once I changed these imports, I get the error shown above. Again, I lost the question of what the problem is, I don't understand the errors and the changes I made is that the components are moved to a different folder and module where the services are located. My suspicion is that circular dependency is being created somehow, but I'm not sure.