Mac OS运行MSAL v3 Angular16示例应用遇模块找不到错误

问题根源 #

你克隆的是MSAL JS的源码仓库，而非独立的示例应用仓库。示例应用依赖的@azure/msal-angular和@azure/msal-browser是仓库内的本地包，需要先编译构建源码，才能被示例应用识别。直接执行npm install只会安装示例的其他依赖，不会自动构建这两个核心包。

解决步骤 #

1. 在仓库根目录构建所有MSAL包
   回到克隆后的仓库根目录，执行构建命令编译所有模块：

   npm run build:all
   

   这个命令会编译lib/msal-browser和lib/msal-angular目录下的源码，生成可被引用的包文件。

2. 进入示例应用目录安装依赖
   构建完成后，切换到angular16-sample-app目录：

   cd angular16-sample-app
   

   重新执行安装命令，此时会自动关联本地构建好的MSAL包：

   npm install
   

3. （可选）手动链接本地包
   如果上述步骤后仍有问题，可手动将本地构建的包链接到示例应用：

   # 先从根目录链接msal-browser
   npm link ./lib/msal-browser
   # 再链接msal-angular
   npm link ./lib/msal-angular
   

4. 启动应用
   依赖安装完成后，重新执行启动命令：

   npm start
   

补充说明 #

MSAL v2的示例可能是独立仓库或已预构建依赖，所以你之前能直接运行。但v3的这个示例是源码仓库的一部分，必须先构建核心包才能正常运行。

内容的提问来源于stack exchange，提问作者Aiden Dipple