Error when bootstrapping multiple angular2 modules

We are beginning to convert our current application to angular2 as we update certain parts of the application. So what we are attempting is to replace certain parts of the app with angular2 modules/components. The first part is creating two different search components and placing them in different views in asp.net mvc. This is not a start from scratch and build an entire angular2 app problem. What I have been able to do is create two separate modules and place the components on different pages and they render and work properly, however, they generate the error below:

core.umd.js:3370 EXCEPTION: Error in http://localhost:25219/angular2/app/member-search/member-search.component.js class MemberSearchComponent_Host - inline template:0:0 caused by: The selector "member-search-component" did not match any elements

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MemberSearchModule } from './member-search/member-search.module';
import { ProviderSearchModule } from './provider-search/provider-search.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(MemberSearchModule);
platform.bootstrapModule(ProviderSearchModule);

When going to the page with the other component I get the exact same error only for the opposite component. Basically it is looking for both components on each page and since it can only find one it throws an error for the other. The components work and the errors do not make it to the front end, but the console gets spammed with 8 separate error each time you move to one of these pages. Any ideas on how this can be corrected? I've searched all over and haven't found anything relevant.

Thanks

EDIT: I think I have found a way to do this by making each module its own app. Is there a better option than this? We will be converting more sections in the coming months and creating a separate app for each one isn't something I want to do.