如何在 Angular 9 项目中使用 amplify-authenticator 修复生产构建？答案

【问题标题】：How to fix production build with amplify-authenticator in Angular 9 project?如何在 Angular 9 项目中使用 amplify-authenticator 修复生产构建？
【发布时间】：2020-07-12 06:25:04
【问题描述】：

我有一个使用 Angular 9 的项目，它有一个 <amplify-authenticator> 元素，并在项目的单个模块中从 @aws-amplify/ui-angular 导入了 AmplifyUIAngularModule。它在开发构建中运行良好，但是当我尝试进行生产构建时，它失败了：

ERROR in src/app/signin/signin.page.html:13:5 - error NG8001: 'amplify-authenticator' is not a known element:
1. If 'amplify-authenticator' is an Angular component, then verify that it is part of this module.
2. If 'amplify-authenticator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

13     <amplify-authenticator [handleAuthStateChange]="handleAuthStateChange">
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/signin/signin.page.ts:7:18
    7     templateUrl: 'signin.page.html',
                       ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component SigninPage.

我正在使用新的Amplify UI Components for Angular，所以据我所知，没有其他东西可以导入。有什么想法可能会出错吗？

【问题讨论】：

标签： angular aws-amplify

【解决方案1】：

请在声明SignPageComponent 的同一NgModule 中导入AmplifyUIAngularModule。

AOT（提前）编译器按顺序解析 NgModules。

【讨论】：

【解决方案2】：

原来我忘记将SigninPage 本身放入模块中。将其添加到 declarations 解决了这个问题。不知道应用程序是如何使用 JIT 编译器运行的......?‍♂️

【讨论】：

【解决方案3】：

我正在按如下方式构建我的版本：

ionic cordova build android --prod --release

仅在删除 --prod 参数后，我假设配置文件才开始工作。

【讨论】：