Zenn
💻

SharePoint Framework で Angular を使用する

2022/01/01に公開
SharePoint
tech

はじめに

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

実行方法

インストール

通常の 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 inatall -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 Framework を聞かれます。ここで、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