Zenn
📦

SharePoint Framework で Angular を使用する

に公開
SharePoint
tech

はじめに

SharePoint Framework の公式テンプレートである @microsoft/generator-sharepoint では、JavaScript のフレームワークに制限があります。選択できるのは React、Knockout、または JavaScript フレームワークを使用しない です。そこで、@pnp/generator-spfx を使用すると、Angular を使って SharePoint Framework の環境を構築できます。@pnp/generator-spfx は SharePoint のユーザー コミュニティである PnP から提供されています。

実行手順

インストール

通常の SharePoint Framework と同様に Gulp および Yo をインストールします。

npm install -g yo gulp

Angular CLI をインストールします。@pnp/generator-spfx がサポートする Angular のバージョンは現時点では 6 から 8 なので、最新の 8.3.25 をインストールします。

npm install -g @angular/cli@8.3.25

@pnp/generator-spfx をインストールします。@microsoft/generator-sharepoint を別途インストールする必要はありません。

npm install -g @pnp/generator-spfx

プロジェクトの作成

Yo を使用してプロジェクトを作成します。

yo @pnp/spfx

ターゲットとなる SharePoint の種類を選択します。SharePoint Online only (latest) を選択します。

? Which baseline packages do you want to target for your component(s)? (Use arrow keys)
> SharePoint Online only (latest)
  SharePoint 2019 onwards, including SharePoint Online
  SharePoint 2016 onwards, including 2019 and SharePoint Online

使用する JavaScript フレームワークを選択します。Angular CLI がインストールされていれば、以下のように Angular CLI のバージョンが表示されます。うまくいかない場合は、%USERPROFILE%\AppData\Roaming の npm と npm-cache を削除して、最初からやり直してください。

? Choose your framework (Use arrow keys)
  Additional Frameworks
> - Handlebars
  - Vue.js
  - Angular Elements (uses @angular/cli 8.3.25)
  Enhanced SPFx
  - ReactJS
  - Knockout (deprecated)

追加で使用するライブラリを指定します。

? Which libraries to include ? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jQuery
 ( ) Microsoft Graph - Type Definitions
 ( ) pnpjs
 ( ) PnP Property Controls
 ( ) spfx-uifabric-themes - enhanced theming support
 ( ) lodash

TypeScript のバージョンを指定します。

? TypeScript:  Please choose a version: (Use arrow keys)
> TypeScript v3.3 - Default
  TypeScript v3.4
  TypeScript v3.5
  TypeScript v3.6
  TypeScript v3.7

検査のオプションを指定します。

? Vetting Options (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) WebPack Bundle Analyzer
 ( ) Style Linter
 ( ) CSS Comb

Azure DevOps の Azure Pipeline で使用するための YAML ファイルを作成するかどうかを指定します。

? Include pipeline configuration? (Use arrow keys)
> None
  Azure DevOps
  Azure DevOps Multi-Stage Pipeline with deployment (preview)

Angular のプロジェクト名を指定します。

? What is your solution name? (HelloWorld)

Angular CLI で ng new を実行する際のオプションを指定します。enable-ivy は無効化したほうが安定します。

Angular CLI options: (--style=scss --routing=false --skip-git --enable-ivy)

ここまで進むと、以下は SharePoint Framework の設定になります。SharePoint Framework の設定については省略しますが、すべての設定が終わるとプロジェクトが作成されます。作成後のフォルダーを見ると、Angular のプロジェクトと SharePoint Framework のプロジェクトの 2 つが作成されています。

2020/03/03  11:03               406 .yo-rc.json
2020/03/03  11:05    <DIR>          HelloWorld
2020/03/03  11:07    <DIR>          HelloWorld-spfx

2 つのプロジェクトは、SharePoint Framework プロジェクトの package.json で Angular プロジェクトを読み込む形で連携しています。

  "dependencies": {
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
    "@microsoft/sp-property-pane": "1.10.0",
    "@microsoft/sp-webpart-base": "1.10.0",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.13.1",
    "hello-world": "file:../HelloWorld"
  }

おわりに

SharePoint Framework 公式の React で作成した場合は 1 つのプロジェクトで構成されますが、今回の方法ではプロジェクト構成が異なります。特に React のように context などの SharePoint Framework の情報を渡すことはできないため、注意が必要です。

Discussion