アンギュラアプリケーションにDevExtremeを追加

このチュートリアルを開始するには、角度5+アプリケーションは角CLIを使用して作成する必要があります。このようなアプリケーションを作成する方法については、角度CLIのマニュアルを参照してください。あなたはすでにそれに追加DevExtremeとアンギュラアプリケーションを作成することができます。

キーのインストール

あなたは依存NPX DevExtreme CLIコマンドNPXに関連したDevExtremeをインストールして設定することができますの一部です：

npx -p devextreme-cli devextreme add devextreme-angular

注意を払います

NPX NPMバージョン5.2に以降有効。以前のバージョンを使用している場合は、アップグレードまたはNPMグローバルDevExtreme CLIをインストールして、コマンドを実行します。

npm i -g devextreme-cli
devextreme add devextreme-angular

このコマンドを実行した後、あなたはDevExtremeモジュールに直接次の記事をスキップすることができます。

コマンドが何らかの理由で利用できない場合は、次の手順を手動で設定するために使用することができます。

インストールDevExtreme

インストールdevextremeのdevextreme-角度NPMパッケージと：

npm install [email protected] [email protected] --save --save-exact

注意を払います

DevExtremeはセマンティックバージョン管理を使用していないので、我々はDevExtremeの指定されたバージョンを使用することをお勧めし、不必要なアップグレードを防ぎます。私たちのバージョン管理システムは、第一および中間の数は、行動の変化などのメジャーバージョンを表します。

スタイルシートを設定

事前に定義されたテーマとスタイルシート（dx.light.css）dx.common.css導入オープンangular.json、。

angular.json

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

以前のバージョン6角CLIの場合は、角度-cli.jsonを変更することは、次のとおりです。

アンギュラcli.json

{
  "apps": [{
    "styles": [
      ...
      "../node_modules/devextreme/dist/css/dx.common.css",
      "../node_modules/devextreme/dist/css/dx.light.css",
      "styles.css"
    ],
    ...
  }],
  ...
}

注意を払います

テーマスタイルは、SVGベースのウィジェットを必要としません。あなたはこれらのスタイルを参照している場合、ウィジェットのアプリケーションは、外観にマッチします。

角度のCLIは6+登録、サードパーティに依存しています

JSZip登録

あなたがデータグリッドウィジェットを使用したい場合は、JSZipライブラリtsconfig.json年登録。このウィジェットは、Excelにエクスポートクライアントのライブラリを使用しています。

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

グローバル登録

あなたが言語をローカライズしたい場合は、このパッケージとdevextreme-CLDRデータ拡張機能をインストールする必要があります。

npm install --save-dev devextreme-cldr-data globalize

その後にtsconfig.jsonに言語パックとCLDRスクリプトスクリプトをサイン......

tsconfig.json
{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "globalize": [
        "node_modules/globalize/dist/globalize"
      ],
      "globalize/*": [
        "node_modules/globalize/dist/globalize/*"
      ],
      "cldr": [
        "node_modules/cldrjs/dist/cldr"
      ],
      "cldr/*": [
        "node_modules/cldrjs/dist/cldr/*"
      ],
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

......そして、グローバル化DevExtremeローカルニュース、およびdevextreme-CLDRデータ、SRCでtypings.d.tsファイルを作成します。

typings.d.ts

declare module 'globalize' {
    const value: any;
    export default value;
}
 
declare module 'devextreme/localization/messages/*' {
    const value: any;
    export default value;
}
 
declare module 'devextreme-cldr-data/*' {
    const value: any;
    export default value;
}

次のように使用角度CLI 5またはプロジェクトの以前のバージョンでは、config.jsの構成は次のとおりです。

config.jsを

System.config({
    // ...
    paths: {
        "npm:": "node_modules/"
    },
    map: {
        // ...
        "globalize": "npm:globalize/dist/globalize",
        "cldr": "npm:cldrjs/dist/cldr",
        "cldr-data": "npm:cldr-data",
        "json": "npm:systemjs-plugin-json/json.js",
    },
    packages: {
        app: {
            // ...
            "globalize": {
                main: "../globalize.js",
                defaultExtension: "js"
            },
            "cldr": {
                main: "../cldr.js",
                defaultExtension: "js"
            }
        }
    }
});

参考記事は、グローバル化の例を使用しています。

また、このような軽いインターナショナルローカリゼーションプログラムの使用。

インポートモジュールDevExtreme

NgModuleはDevExtremeコンポーネントを使用します検索し、インポートはDevExtremeモジュールを必要とします。アプリケーションがツリーを振るように構成されている場合、モジュールはdevextreme-角度導入されてもよいことに留意されたいです。そうしないと、あなたはそれらをインポートするために特定のファイルをしたいです。

app.module.ts

// ...
import { DxButtonModule } from 'devextreme-angular';
// or if tree shaking is not configured
// import { DxButtonModule } from 'devextreme-angular/ui/button';
 
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})


export class AppModule { }

今、あなたのアプリケーションにDevExtremeコンポーネントを使用することができます。

app.component.htmlapp.component.ts

<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>

アプリケーションを実行します。

次のようにアプリケーションを実行するためのコマンド：

ng serve
Open http://localhost:4200/ to browse the application