错误：无法在 --prod 中确定类 OverlayPortal 的模块

Posted 2023-03-07

【中文标题】错误：无法在 --prod 中确定类 OverlayPortal 的模块

【英文标题】：Error: Cannot determine the module for class OverlayPortal in --prod

【发布时间】：2018-03-17 20:43:15

【问题描述】：

我不确定我是否只遇到ionic cordova run android --prod 的问题，而我的ionic cordova run android 工作正常。

错误：

Error: Cannot determine the module for class OverlayPortal in /Users/gopi/Documents/bos/hybrid-app/node_modules/ionic-angular/es2015/components/app/overlay-portal.d.ts! Add OverlayPortal to the NgModule to fix it.
Cannot determine the module for class IonicApp in /Users/gopi/Documents/bos/hybrid-app/node_modules/ionic-angular/es2015/components/app/app-root.d.ts! Add IonicApp to the NgModule to fix it.
Cannot determine the module for class ClickBlock in /Users/gopi/Documents/bos/hybrid-app/node_modules/ionic-angular/es2015/components/app/click-block.d.ts! Add ClickBlock to the NgModule to fix it.
Cannot determine the module for class Slides in /Users/gopi/Documents/bos/hybrid-app/node_modules/ionic-angular/es2015/components/slides/slides.d.ts! Add Slides to the NgModule to fix it.

谁能给我解释清楚：

这是我的ionic info

cli 包：(/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

全局包：

Cordova CLI : 7.0.1

本地包：

@ionic/app-scripts : 1.3.8
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.4.2

系统：

Android SDK Tools : 25.2.5
Node              : v6.11.1
npm               : 3.10.10
OS                : macOS Sierra
Xcode             : Xcode 8.3.2 Build version 8E2002

【问题讨论】：

照常尝试，删除node_modules和package-lock.json，运行npm install，再次尝试构建。如果它仍然不起作用，请尝试将 npm 升级到更新版本（5.1.0 对我有用）并再次执行相同的步骤。如果仍然没有成功，请尝试升级 ionic-cli、ionic-angular 和 @ionic/app-scripts。在某些情况下，重新安装节点可能会有所帮助。

运行 npm 5.5.1 时出现同样的问题。上述步骤无济于事。有什么建议吗？

运气好能解决这个问题吗？我看到了同样的事情。

【参考方案1】：

上面的解决方案都不适合我，但我终于解决了。

只需将OverlayPortal 导入app.module.ts 作为打字稿告诉我做和修改网址。

import  OverlayPortal  from "../../node_modules/ionic-angular/components/app/overlay-portal.d";

然后将其添加到 NgModule 中的“声明”中

@NgModule(
  declarations: [
     OverlayPortal

然后再次运行ionic capacitor build android --prod，错误就消失了。

【参考方案2】：

这是一个对我有用的修复。

在 app.module.ts 中，添加：

import  OverlayPortal  from 'ionic-angular/components/app/overlay-portal';
import  ClickBlock  from 'ionic-angular/components/app/click-block';
import IonicApp as IonicAppRoot from 'ionic-angular/components/app/app-root';

...


declarations: [
    ...

    OverlayPortal,
    IonicAppRoot,
    ClickBlock,
  ],

【参考方案3】：

在我的例子中，它是我创建的一个管道（让我们将其命名为“CustomPipe”）并且我没有使用它，所以我没有在我的 PipesModule 中声明它。 我有 4 个管道，其中 3 个在 PipesModule 中使用、声明和导出。但是“CustomPipe”没有在任何地方声明，所以当我运行ionic cordova build android --prod 时出现以下错误：

ERROR in : Cannot determine the module for class CustomPipe in .../app/pipes/custom.pipe.ts! Add CustomPipe to the NgModule to fix it.

因为没用过，所以直接删了，效果还不错。

【参考方案4】：

1) 在您的项目中搜索“页面”事件并将其删除。

使用 Ubuntu 或 Mac 终端通过点击快速搜索：

> grep -r ": Page" src/*
//then
> grep -r ":Page" src/*

像这样删除它：

//let page:Page;
//becomes 
let page;
//and remove the import in the top of the file

2) 在您的项目中搜索“ionic-angular/xxxxxx”并删除它。

grep -r "from \'ionic-angular\/" src/*

如果您使用“ionic-angular/xxxxxx”，则必须将其更改为“ionic-angular”，只需进入 Ionic 文档并检查您的组件：

https://ionicframework.com/docs/v3/components/#overview

【讨论】：

我的问题是 ionic-angular/xxxxxx 导入，搜索帮助我快速找到并修复它们。

【参考方案5】：

这将帮助您解决此问题。

https://***.com/a/55832874/849870

我解决了我的问题。在我的项目中，我使用了一个过时的模块，ion-datepicker 如果你也在使用同样的问题，这里有一些步骤，你可以按照并找到你被感染或过时的模块。

1.第一步：

在您的项目中查找所有文件 from 'ionic-angular/ 一句话，

2。第二步：

如果你发现这个词像 import xyz from 'ionic-angular/xyz/abc'

更新或删除该模块。

【讨论】：

这应该是公认的答案...工作得很好

【参考方案6】：

--prod 使用 aot 编译。但是，如果您只想为发布而编译使用 --release 标志，但您失去了 aot 的功能

【参考方案7】：

在安装 Diagnostic 后出现此错误

npm install --save @ionic-native/diagnostic@4

我恢复我的 package.json 然后删除并添加更新的 android 平台

ionic cordova platform rm android && ionic cordova platform add android@latest

它已经解决了。

【参考方案8】：

这个解决方案对我有用。使用 npm i 安装所有组件后，单独安装 typescript 2.8.1 版

npm install typescript@2.8.1

再次运行构建

【讨论】：

在我的情况下，这会产生另一个错误：Angular Compiler requires TypeScript >=3.1.1 and

【参考方案9】：

按照here的建议，删除Page接口引用。改变

let page: Page;

到

let page;

【讨论】：

我将其更改为“let page:any”并修复了它！

【参考方案10】：

我遇到了同样的问题，然后我更改了我的一个离子角度导入地址。 以前是

import AlertController from "ionic-angular\umd\components\alert"

我把它改成了

import  AlertController  from "ionic-angular"

现在它为我工作。

【参考方案11】：

在我的情况下，这是因为我有一个模块的备份，我有

MyModule
|- MyModule.ts -> class MyModule 
MyModuleOld
|- MyModule.ts -> class MyModule 

【参考方案12】：

我终于找到了解决这个问题的方法。我从ionic-angular 导入了一些直接导入嵌套组件的导入，而不是从***包导出导入。我猜 prod AOT 编译器不喜欢从顶层导入一些，有些直接导入到嵌套项。下面是我的一个例子。我的猜测是您可以选择其中任何一种方法，但是当混合使用它们时，AOT 编译器会不高兴。

好

import LoadingController from 'ionic-angular';

不好

import LoadingController from 'ionic-angular/components/loading/loading-controller';

【讨论】：

感谢它帮助了我，即使是出于不同的原因:)

问题在于您导入组件的方式，如本回复中所述。确保从完整包中导入组件，而不仅仅是文件。干得好！

我喜欢 ionic，但它充满了这种东西......上帝保佑互联网