Lightning Design SystemをAngularで使う（ng-lightningのセットアップ）

SPAのフレームワークであるAngularでLightning Design Systemを使うためのメモ。

ng-lightningというモジュールが展開されており、それを使うことで簡単に利用できるようになります。

プロジェクト作成

作業フォルダ

npm install -g @angular/cli
ng new PROJECT名

作業フォルダ/プロジェクト名

ng serve

ここまでで、Angularのプロジェクトが立ち上がります。

ng-lightningフレームワークをインストール

作業フォルダ/プロジェクトフォルダ

npm i @salesforce-ux/design-system --save
npm i ng-lightning --save

Lightning Design Systemを利用するための設定

読み込むcssファイルを.angular-json.cssファイルに追記。

作業フォルダ/プロジェクトフォルダ

vi .angular-cli.json

 21       "styles": [
 22         "styles.css",
 23         "node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css"
 24       ],

モジュールの読み込み

import { NglModule} from 'ng-lightning/ng-lightning';

作業フォルダ/プロジェクトフォルダ/src/app/app.module.ts

  1 import { BrowserModule } from '@angular/platform-browser';
  2 import { NgModule } from '@angular/core';
  3 import { NglModule} from 'ng-lightning/ng-lightning';
  4
  5 import { AppComponent } from './app.component';
  6
  7
  8 @NgModule({
  9   declarations: [
 10     AppComponent
 11   ],
 12   imports: [
 13     BrowserModule,
 14     NglModule,
 15     NglModule.forRoot()
 16   ],
 17   providers: [],
 18   bootstrap: [AppComponent]
 19 })
 20 export class AppModule { }