22

Angular 2 ベータ版は、デフォルトで html5 ルーティングを使用します。ただし、コンポーネントに移動してルートが変更された場合 (例: http://localhost:5000/aboutus ) 、ページを再読み込み/更新しても、何も読み込まれません。

この問題は、この投稿でも取り上げられています。回答のほとんどは、angular 2 で HTML5 ルーティングを追求する場合、このルーティングの問題はサーバー側で処理する必要があると述べています。詳細についてはこちらをご覧ください。

asp.net サーバー環境を使用してこの問題を処理する方法がわかりません。

asp.netも使用していて、この問題に遭遇したangular 2開発者はいますか?

PS。ASP.NET 5 を使用しています。私の Angular 2 ルートは MVC ルートを使用しています。

4

11 に答える 11

19

あなたが見ている問題は、クライアントの Angular ルーティングと MVC サーバー側のルーティングの違いに関係しています。404 Page Not Foundサーバーにはそのルートのコントローラーとアクションがないため、実際にはエラーが発生しています。エラーを処理していないと思われるため、何も起こらないように見えます。

リロードするときhttp://localhost:5000/aboutus、またはショートカットから直接その URL にリンクしようとしたり、アドレス バーに入力して (ディープ リンク)、その URL にリンクしようとすると、サーバーに要求が送信されます。ASP.NET MVC はそのルートを解決しようとし、あなたの場合aboutusControllerはアクションをロードして実行しようとしますIndex。もちろん、aboutusルートは Angular コンポーネントであるため、これは望ましくありません。

すべきことは、ASP.NET MVC ルーターが Angular によって解決されるべき URL をクライアントに戻す方法を作成することです。

Startup.csファイルのConfigure()メソッドで、「spa-fallback」ルートを既存のルートに追加します。

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    // when the user types in a link handled by client side routing to the address bar 
    // or refreshes the page, that triggers the server routing. The server should pass 
    // that onto the client, so Angular can handle the route
    routes.MapRoute(
        name: "spa-fallback",
        template: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
});

最終的に Angular アプリをロードする Controller と View を指すキャッチオール ルートを作成することで、サーバーが処理しない URL を適切なルーティングのためにクライアントに渡すことができます。

于 2016-03-16T19:16:25.340 に答える
5

ASP.NET MVC でこのルーティングを使用する必要があります

app.UseMvc(routes =>
{
     routes.MapRoute("Default", "{*url}",  new { @controller = "App", @action = "Index" });
});

次に、basePath オプションを使用して SystemJS をセットアップする必要があります。

于 2016-03-11T15:07:36.707 に答える
2

あなたが探している機能は、URL の書き換えです。それを処理するには、2 つの方法が考えられます。ここで説明するように、古典的な方法は、IIS に作業を任せることです。

https://stackoverflow.com/a/25955654/3207433

IIS に依存したくない場合は、代わりに ASP.NET 5 ミドルウェアでこれを処理できます。私の回答は次のとおりです。

https://stackoverflow.com/a/34882405/3207433

于 2016-01-19T16:58:00.283 に答える
0

Angular ルーティングから Home/Index を呼び出す場合は、両方のルーティングを使用できます。

書きます

Home/Index.cshtml
<my-app></my-app>

app.routing.ts
    const routes: Routes = [
        { path: '', redirectTo: '/Home/Index', pathMatch: 'full' },
        { path: 'Home/Index', component: DashboardComponent }
    ]

したがって、URL が Home/Index になると、アクティブな URL のコンポーネントが読み込まれるため、ダッシュボード コンポーネントが読み込まれます。

于 2016-10-25T06:53:30.853 に答える
0

使用しましたか:

ディレクティブ: [RouterOutlet, RouterLink] コンポーネント内。

于 2016-01-06T21:39:39.873 に答える
0

@ZOXEXIVO のソリューションを適用し、_Layout.cshtml にこれを追加します。

<head>
    <base href="/"/>
    .....
</had>
于 2016-04-18T14:43:21.287 に答える