angular 2 with mvc 5 bootstrap a component - asp.net-mvc

Question

Our site is an existing MVC site and we are working on adding and replacing some parts with angular 2 components. We do not have a full angular 2 app to launch, so we are just using bootstrap to launch our components on the pages we want them.
I updated my package.json dependencies from "2.0.0-rc.1" to "~2.2.0" and now have the latest angular 2 files. I can no longer use import { bootstrap } from '#angular/platform-browser-dynamic' and launch my component with: bootstrap(MyCountComponent, [HTTP_PROVIDERS, MyService]);.
Searching it seems to have been updated to import { platformBrowserDynamic } from '#angular/platform-browser-dynamic'; and now I should launch with: platformBrowserDynamic().bootstrapModule(MyCountComponent, [HTTP_PROVIDERS, MyService]);
When I do this I'm getting the browser Console error:
Unhandled Promise rejection: (SystemJS) No NgModule metadata found for 'MyCountComponent'.
Error: No NgModule metadata found for 'MyCountComponent'...
Do I need to convert my components to modules now or is there a new way to bootstrap launch the components without a module?
Here is a code sample.
//mycount.ts
import { MyService } from '../../services/my.service';
import { HTTP_PROVIDERS } from '#angular/http';
import { bootstrap } from '#angular/platform-browser-dynamic'
import { MyCountComponent } from './mycount.component';
bootstrap(MyCountComponent, [HTTP_PROVIDERS, MyService]);
//mycount.component.ts
import { Component } from '#angular/core';
import { NgControl } from '#angular/forms';
import { MyService } from '../../services/my.service';
#Component({
selector: 'mycount',
templateUrl: './app/components/mycount/mycount.component.html'
})
export class MyCountComponent {
constructor(private _myService: MyService) {
}
get mycount() {
return this._myService.mycount;
}
}
//systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
'#angular/upgrade/static': 'npm:#angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
EDIT
If I have:
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule
],
bootstrap: [MyCountComponent, MyListComponent, MyDetailsComponent],
declarations: [MyCountComponent, MyListComponent, MyDetailsComponent],
exports: [MyCountComponent, MyListComponent, MyDetailsComponent],
providers: [MyService]
})
Is it possible for my page to only load 1 or 2 of the components?
I tried calling it with:
platformBrowserDynamic().bootstrapModule(MyModule, [HttpModule, MyListComponent]);
but I get an error message for any component tags missing from the page.

Answer 1

you need to create main #NgModule where you can import all Services, Components, Directives etc. using #NgModule you can tell your app that which component should bootstrap.
here is official links to understand that #ngModule please go through this: https://angular.io/docs/ts/latest/guide/ngmodule.html
Tips: please use Angular-cli which will create a basic structure of app just in few minutes. using Angular-cli you no need to create structued app or basic setup it will do it for you.