mvc appサブフォルダのangle quickstartが動作しません

Question

私は既存のmvcアプリケーションを使用していますが、私はangle（2）アプリケーションを1ページに追加したいと思います。

angle quickstart gitバージョンの最終バージョンの角度アプリケーションベース。 （https://github.com/angular/quickstart）

ページのURLは、アプリの内容は、私はMVC CSHTMLに追加し、他の場所にwww.mySite.com/Content/myApp

あるwww.mySite.com/folder/subfolder のようなものです必要なすべてのスクリプトをコピーします（index.htmlからコピーします）。

ですが、404エラーが発生しました。

もちろん、私はベースhrefとWebで見つけた他の多くの変更を変更しますが、アプリケーションは動作しません。私は、既存のMVCのプロジェクトにクイックスタート角度アプリを接続することができますどのように node_modulesフォルダなどのファイルを見つけるapp.moduleを見つけるかどうかではない」

：

エラーの一部？

ここで私は3枚のスクリーンショットを追加：期待どおりに動作し、その結果をsrcフォルダにベースのhrefながらMVCプロジェクトで

OKです

1. （NPM開始で）スタンドアロン実行中のアプリケーションを メイン角度プロジェクトフォルダにMVCプロジェクトとベースHREFで

おかげ

Answer 1

は、この場合、私の答えは、これは、それがどのように行われるかではない、と言うことであろう。 Razor ViewEngineを使用するか、Angular 2アプリを使用してレンダリングするかを決定する必要があります。 Angular 2アプリでレンダリングする必要がある場合は、WebApiコントローラを作成し、角型アプリからこのコントローラにリクエストを送信し、応答としてjsonデータを画面に表示する必要があります。 例 これは、コントローラ

[HttpGet] 
    public IEnumerable<string> Get() 
    { 
     return new string[] { "Laptop", "Smart TV", "Smart Phone", "Tablet" }; 
    } 

これは、あなたがapp.module.tsファイル内のプロバイダでサービスを追加する必要が

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

import 'rxjs/add/operator/map'; 
@Injectable() 
export class AppService{ 
    constructor(private http: Http) 
    { 

    } 
    getItems(){ 
     let apiUrl = 'api/Items'; 
     return this.http.get(apiUrl) 
        .map((res: Response) => {return res.json() 
     }); 
    } 
} 

APIを呼び出しますあなたの角度サービス意志です。その後、任意のコンポーネントに注入することができます。だから我々は、アプリケーションコンポーネントでこのサービスを使ってデータを取得し、表示します。 app.component.tsは次のようになります。

import { Component } from '@angular/core'; 
import { AppService } from './app.service' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    items: string[]; 
    constructor(private appService: AppService) 
    { 
    this.items = []; 
    this.populateItems(); 
    } 

    populateItems() 
    { 
     this.appService.getItems().subscribe(res =>{ 
     this.items = res; 
     }) 
    } 
} 

htmlページは現在角度アプリがAPIからもらったリストが表示されます。

<li *ngFor="let item of items"> 
    {{item}} 
</li> 

希望すると、正しい方法でお手伝いします。