how to use angular2 in mvc5 areas?

Question

i have a sample mvc5 project and i used my first angular 2 modules successfully on this project. now i want to create new module inside my mvc areas. so i created new area with a .tsfile named app.components in my area solution! like what you see below:

 import { Component } from '@angular/core';
@Component({
    selector: 'area-app',
    template:`<p>imanArea</p>`
}) 
export class areacomponent {<<bring below error!!!!!!!!!!!
    name = 'dd';
} 

experimental support for decorators is a feature that is subject to change in a future release. set the 'experimentaldecorators' option to remove this warning

and second is from my root project rootproj/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

import { AppComponent } from './app.component';
 ***below error for this line***
import { AreaAppComponent } from './Areas/SampleArea/app/app.areacomponent'

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Cannot find module'./Areas/SampleArea/app/app.areacomponent'

i checked my path and file names!! every thing is right but it doesn't find my path!

for more information i have to say all my essential angular files are in my root project and my app.module is inside a folder named app

means: rootProj/app/app.module and rootProj/app/app.component.spec

is it possible to use angular2 and mvc-Area together in one project?? i didnt find any source about that.

Answer 1

I actually use WebAPI to use Angular 2.

Back and Front-End are going to be in different project folders. And you will work with restful services.