Angular 5 dynamic module loading

Question

I am trying to create an application in which I want to load feature modules in as separate webpack chunks which will be compiled in a separate project. The Webpack part I have taken care of and it is working fine. The HTML order of the script is:-

• common.js --> moduleregistration class
• polyfils.js --> common polyfils all the chunks
• angular vendor bundles.js --> common vendor bundles which is used by all the feature bundles and application bundle.
• feature modules1.js --> Contains one feature module and components.
• feature module2.js --> Contains one feature module and components.
• mainapplication.js --> Main application.js has application bootstrapping logic. common.js has a javascript class to register module and get the list of registered modules.

So from feature module's main.ts file I am doing this:-

import {FeatureModule} from './FeatureModule';
common.Modules.register(FeatureModule). 

Now in mainapplication.js my app.module is doing this:

let featureModules = common.Modules.getRegisteredModules();

let importModules = [
    BrowserModule,
    FormsModule,
    UpgradeModule,
    HttpClientModule,
    UIRouterUpgradeModule
];
importModules = importModules.concat(featureModules);

@NgModule({
    imports: importModules,
    declarations: [AppComponent],
    providers: [],
    bootstrap: [
    AppComponent
    ],
entryComponents: [],
exports: []

})
export class AppModule { }

I am getting an error while bootstrapping appModule:

Unexpected value 'MyProfileModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

I debugged and found that complier is unable to find property decorators or annotations for this module. However if I copy the feature module to the main project and import it in normal ways, it works.

Can somebody please help.