まえがき
Angular 4マテリアルを使用する必要に直面しました。 .ioサイトのHelloWorldプロジェクトからダウンロードされ、その後にガイドが続きます。 しかし、Angular 4マテリアルに関するレッスンはほとんどなく、すでに知識のある人向けに書かれているようです。 したがって、通常のAngularプロジェクトからAngular Materialプロジェクトを作成する方法、およびいくつかのコンポーネントとそのソリューションの使用に関する予期しない問題について説明する記事をいくつか書くことにしました。 数回、既存のコンポーネントに基づいて独自のコンポーネントを作成する必要がありましたが、これも強調表示されます。 しかし、まず最初に。
ステージ1. OSの準備
チュートリアルではUbuntu 16.04を使用します。
NodeJSをインストールする
まず、NodeJSをインストールする必要があります。 Ubuntuパッケージマネージャーを使用します。
sudo apt-get install nodejs
Ubuntuパッケージマネージャーに適していない人は、Node Version Managerを使用してください（NodeJSがUbuntuパッケージマネージャーの使用に成功した場合は、この手順をスキップしてください）。
Node Version Managerをインストールする
実行：
sudo apt-get install build-essential checkinstall sudo apt-get install libssl-dev curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
cURLを持っていない人は、次のコマンドを入力します。
sudo apt-get update sudo apt-get install curl
ターミナルを再起動して、NVMをインストールします。
nvm install stable
これで、NVMを使用したNodeJSのインストールが完了しました。
Npmインストール
ここで、npm-NodeJSのパッケージマネージャーをインストールする必要があります。これは理論上は標準であり、NodeJSと共に自動的にインストールする必要がありますが、これは私には起こりませんでした。
Npmインストール：
sudo apt-get install npm
そして最後に、私たちにとって最後の重要なことは、Angularアプリケーションの初期化、開発、サポートのためのツール、つまり、Angular CLIです。
sudo npm install -g @angular/cli
ステージ2.基本的なアプリケーション
先に進む前に、同じ言語を話せることを確認しましょう。
コンポーネントは、Webページ（表示）の要素または要素のセットです。
モジュール -Angularアプリケーション全体はモジュールで構成されています。 少なくとも1つのルートモジュールが必要です。
定期的に生成されるAngularプロジェクトに基づいて、Material Angularプロジェクトを作成します。 新しいプロジェクトを作成するには、次のコマンドを使用します。
ng new mySoul
mySoulは私の新しいプロジェクトの名前です。 これらのレッスンでは、映画、本、個々の引用などを収集するように設計されたプロジェクトを行います。 このようなリソースは既に存在しますが、それぞれに欠点があります。 しかし、ところで、便利なリソース、理想的なリソースを作成してみませんか？
プロジェクトを作成するときの最初の間違いは次のとおりです。
cannot find module 'abbrev'
それを修正するために、互換性のためにノードへのリンクを作成しました：
sudo ln -s /usr/bin/nodejs /usr/bin/node
これでプロジェクトが正常に作成されました。 プロジェクトフォルダに行きましょう
cd mySoul
そしてそれを実行する
ng serve --open
ブラウザのページが自動的に開き、表示されます
ページを閉じてもサーバーがまだ実行されている場合は、アドレスバーに次のように記述します。
ローカルホスト：4200 。
4200がデフォルトのポートです。 それを変更する方法は、次の部分で説明します。
余分なものを削除しましょう。 ファイル
mySoul / src / app / app.component.htmlを開くと、ファイルからすべてを削除できます。 ファイルを保存し、ページに移動して、ファイルが何もないことを確認します。 設備の1つ：プロジェクトを編集するとき、すぐに変更を確認できます。 なぜなら Angular Materialプロジェクトを行っているので、追加のコンポーネントをインストールする必要があります。
注意！ 追加パッケージのインストールは、プロジェクトのルートディレクトリ（この場合は
mySoulフォルダー）で行う
必要があります
角度材料をインストールします。
npm install --save @angular/material
角度CDK：
npm install --save @angular/cdk
そして、アニメーションを表示するために必要なパッケージ。 マテリアルの一部のコンポーネントはアニメーションを使用するため、このパッケージをインストールすることが望ましいです。
npm install --save @angular/animations
そしてもう1つの重要なステップは、公式Webサイトには記載されていません（または、公式Webサイトのすべてを何度も読み直しましたが、見ていませんでしたので、非常に盲目です）。 スタイルを接続する必要があります。 これを行うには、ファイル
mySoul / src / styles.cssを開き、スタイルを接続します。
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
公式ウェブサイトでより多くのスタイルを見つけることができます。
これで、Materialコンポーネントを追加できます。 すべてのマテリアルコンポーネントは、
Material Angular Webサイトで見つけることができます。
ほとんどすべてのWebページにボタンがあるため、ボタンを追加します。
Material Angular Webサイト→コンポーネントタブ→左側のメニューに移動し、ボタンを探してクリックします。 開いているページで、この要素の仕組みと、プロジェクトに要素を追加するために必要なすべてのコードを確認できます。
まず、「<>」（右上）を押してコードをコピーする必要があります
button md-button> Click me! </button（開始タグと終了タグを追加）
[HTML]タブから。 このコードを
mySoul / src / app / app.component.htmlファイルに貼り付け
ます 。 ファイルを保存すると、ページにボタンが表示されます。
ボタンは最も一般的です。 材料設計はどこですか？ 確認するには、次を実行する必要があります。このコンポーネントのモジュールをプロジェクトにインポートします。 [API]タブ（上部）をクリックします。
表示されます：
import {MdButtonModule} from '@angular/material';
ファイル
mySoul / src / app / app.modul.tsを開き 、必要なモジュールを接続します。 編集する前、
app.modul.tsファイルは次のようになりました。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
モジュールを接続すると、次のようになります。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {MdButtonModule} from '@angular/material'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MdButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
ファイルを保存します。 必要なモジュールがロードされ、ページに以下が表示されるまで待ちます。
ヒント：一部のコンポーネントを正しく表示するには、今すぐアニメーションを接続します。
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
プロジェクトに接続しすぎると反対になりますが、アニメーションを必要とするコンポーネントを追加して表示すると、問題の解決策を探すのに多くの時間を費やしました。 解決策は簡単です。アニメーションをインポートする必要があります。
これで、単一のMaterialコンポーネントを持つAngularプロジェクトができました。 次のパートでは、プロジェクトの構造、複数のコンポーネントを作成して正しく接続し、サービスを作成する方法について詳しく説明します。