执行npm install安装Amplify Angular依赖后遇编译错误及空白页问题

编译错误（TS2344: Type 'BaseType' does not satisfy constraint）的修复方案 #

执行npm install --save aws-amplify @aws-amplify/ui-angular后出现该TypeScript错误，可通过锁定type-fest版本解决：

• 在package.json的dependencies或devDependencies中添加"type-fest": "~2.19.0"
• 执行npm install重新安装依赖

编译成功后页面空白的排查与修复 #

编译通过但页面空白，多为Amplify初始化或UI组件配置问题，按以下步骤排查：

1. 确认Amplify初始化顺序
   在main.ts中确保Amplify配置在Angular应用启动前执行，示例代码：

   import { Amplify } from 'aws-amplify';
   import amplifyconfig from './amplifyconfiguration.json';
   
   Amplify.configure(amplifyconfig);
   

2. 检查UI组件的模块导入
   在使用Amplify UI组件的NgModule中，导入AmplifyUIAngularModule并添加到imports数组中，确保组件能被正确识别。

3. 验证组件模板语法
   确认模板中Amplify组件的使用语法正确，比如身份验证组件的示例：

   <amplify-authenticator>
     <ng-template amplifySlot="authenticated" let-user="user">
       <div>登录成功，欢迎{{user.username}}</div>
     </ng-template>
   </amplify-authenticator>
   

4. 查看浏览器控制台报错
   打开浏览器开发者工具的Console面板，检查是否存在Amplify运行时错误（如配置文件缺失、权限异常等），根据报错信息针对性修复。

5. 清理缓存重新构建

   • 执行npm run clean清理Angular构建缓存
   • 删除node_modules和package-lock.json，重新执行npm install后再构建运行

内容的提问来源于stack exchange，提问作者Elia Weiss