web-dev-qa-db-ja.com

使用方法Angular VS2017SPAテンプレートを使用したマテリアル

Microsoftが提供するSPAテンプレートとJavaScriptServicesを使用してAngular2アプリを構築しています（ https://blogs.msdn.Microsoft.com/webdev/2017/02/14/building-single-page-applications-on -asp-net-core-with-javascriptservices / ）。

スタイリング/テーマにAngularではなく、Bootstrap Materialを使用したいのですが、機能させることができません。

セットアップガイド（ https://material.angular.io/guide/getting-started ）に従うのは簡単ですが、テーマアセット（@ angular/material/prebuilt-themes）を含める場合は/ ...）wwwroot dist出力のnpmパッケージから、アプリで利用できるようにします。完全に途方に暮れています。

これは単にWebPackの構成を変更する場合だと思いますが、1、2時間いじくり回してグーグル検索した後、私は何をすべきかを理解することに近づきません。

誰かが私を正しい方向に向けることができますか？

注意。必要なファイルをwwwrootにコピーしたり、CDNにリンクしたりすることはお勧めしません。

angularwebpackasp.net-coresingle-page-application
11
James Law

私はおそらくこれを達成するためのより完全で包括的な方法を見つけたと思います...

  1. VisualStudioソリューションを閉じます
  2. プロジェクトフォルダを開き、node_modulesディレクトリを削除します
  3. プロジェクトディレクトリのコマンドプロンプトを開きます
  4. コマンドプロンプトでnpm install --save @angular/material @angular/cdkを実行します
  5. コマンドプロンプトでnpm install --save @angular/animationsを実行します
  6. @angularおよびrxjsパッケージをpackage.jsonの最新/互換性のあるバージョンにアップグレードします。これは頭​​痛の種です。どちらが正しいバージョンでどれが間違っているのかわかりません！
  7. コマンドプロンプトでnpm installを実行します

  8. webpack.config.vendor.jsを更新し、次の2つの値を追加します

    const nonTreeShakableModules = [
    ...
    '@angular/material',
    '@angular/material/prebuilt-themes/deeppurple-amber.css'
];

  9. コマンドプロンプトでwebpack --config webpack.config.vendor.jsを実行します

  10. VisualStudioでソリューションを開きます
  11. ソリューションをビルドします。その後、 https://material.angular.io/guide/getting-started の「GettingStarted」ガイドに従って、ソリューションを使用できるようになります。

漠然と機能しているバージョンをGitHubにチェックインしました https://github.com/alterius/AngularMaterial2DotNetCoreSPA にあります

5
James Law

webpack.config.vendor.js次の2つのエントリを追加します。

const nonTreeShakableModules = [
    ...
    "@angular/material",
    "@angular/material/prebuilt-themes/deeppurple-amber.css"
];

次の方法でwebpackを再実行します。

webpack --config webpack.config.vendor.js

ソース：Angular ASP.NETコアのマテリアルAngular = Fiyaz HasanによるSPAテンプレート

6
spottedmahn

現在利用可能な新しいテンプレートがあり、古いテンプレートよりもはるかに優れています。また、VisualStudioで提供されている古いバージョンのテンプレートで多くの問題が発生しました。新しいテンプレートは、デフォルトでASP.Net Core 2.1で使用できます。それ以外の場合は、以下のリンクの手順に従う必要があります。

https://docs.Microsoft.com/en-us/aspnet/core/spa/angular?view=aspnetcore-2.1&tabs=visual-studio

EF Core 2の実用的な例をお探しの場合は、Angular MaterialおよびASP.NetCore WebAPIを参照してください。

http://Hive.rinoy.in/building-a-web-app-using-asp-net-core-2-and-angular5-frameworks/

0
rinoy