Ionic v4集成ionic-tooltips遇*ngIf绑定错误求助

这个问题的核心原因很明确：ionic-tooltips模块自身没有导入CommonModule。Angular的内置结构指令（比如*ngIf、*ngFor）都属于CommonModule，任何使用这些指令的NgModule都必须显式导入它——哪怕你在主模块或页面模块里导入了，第三方模块自己没导入的话，内部组件还是识别不了这些指令。

解决方案：修复第三方模块的依赖（两种方式） #

方法1：直接修改node_modules中的模块文件

1. 找到项目里node_modules/ionic-tooltips目录下的tooltips.module.ts文件（通常路径是src/tooltips.module.ts，可根据模块实际结构调整）
2. 在该文件中导入CommonModule并添加到imports数组：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 新增导入
import { TooltipDirective } from './tooltip.directive';
import { TooltipBox } from './tooltip-box.component';

@NgModule({
  imports: [
    CommonModule // 加入CommonModule到依赖
  ],
  declarations: [TooltipDirective, TooltipBox],
  exports: [TooltipDirective],
  entryComponents: [TooltipBox]
})
export class TooltipsModule {
  static forRoot() {
    return {
      ngModule: TooltipsModule
    };
  }
}

3. 保存文件后重启Ionic开发服务，模板解析错误应该就能消失。

方法2：用patch-package持久化补丁（避免npm install覆盖修改）

直接修改node_modules的文件会在下次执行npm install时被覆盖，推荐用patch-package来保存你的修改：

1. 安装依赖工具：

npm install patch-package --save-dev

2. 修改完上述tooltips.module.ts文件后，运行命令生成补丁文件：

npx patch-package ionic-tooltips

3. 在package.json的scripts中添加postinstall脚本，确保每次安装依赖后自动应用补丁：

"scripts": {
  // 保留原有脚本
  "postinstall": "patch-package"
}

为什么你之前导入CommonModule没用？ #

Angular的模块是封装且独立的，模块间的依赖不会自动继承。你在home.module.ts或app.module.ts中导入CommonModule，只会让当前模块及其声明的组件能使用这些指令，但ionic-tooltips的内部组件属于它自己的模块，必须自己导入CommonModule才能识别*ngIf这类指令。

你的home.module.ts和app.module.ts的配置是正确的，不需要额外调整。

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