Using MSAL package in Microsoft Teams Tab

Problem

Let's say you ran yo Teams to create a Tab for a Microsoft Teams app. The generated code will use HTML & TypeScript, and uses webpack to transpile to JavaScript as part of the building process.

Now, add the MSAL package using npm install msal.

Normally, you would import the MSAL library in your .ts file:

import * as Msal from 'msal';

Then, referencing the types in that module:

private app: Msal.UserAgentApplication;

Everything looks good in the editor, but running the build (webpack) process results in an error:

TS2307: Cannot find module 'msal'

Resolution

The Teams generator creates two tsconfig files. One for the "server," which is express on Node.js and one for the client JavaScript that runs in the browser. This client file, named tsconfig-client.json has the module resolution set to classic. So the TypeScript compiler does not look for the module in the node_modules folder.

The fix: in tsconfig-client.json, change the moduleResolution value to node

** NOTE **

Then generator has been updated, so this fix is only necessary in existing projects.