Angular6项目使用ng-block-ui报错：'block-ui'不是已知元素

我当前正在开发一个Angular6项目，已正确配置ng-block-ui（此前曾在Angular5项目中使用过该工具），但在组件模板中绑定使用时遇到如下报错：

block-ui' is not a known element: 1. If 'block-ui' is an Angular component, then verify that it is part of this module. 2. If 'block-ui' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///HtmlLayoutModule/AdminComponent.html@0:0 Error: Template parse errors:

使用的版本信息如下：

"ng-block-ui": "^1.0.4", 
"primeng": "^6.0.0-alpha.1", 
"rxjs": "^6.2.0", 
"rxjs-compat": "^6.2.0"

我之前在Angular6项目里也碰到过完全相同的问题，结合你的场景，给你几个可行的排查和解决步骤：

1. 确保组件所属模块导入了BlockUIModule #

是ng-block-ui提供的Angular组件，必须在你使用它的组件所在模块（也就是报错里的HtmlLayoutModule）中显式导入BlockUIModule，而不能只在根模块导入。

打开HtmlLayoutModule的代码文件，修改如下：

import { BlockUIModule } from 'ng-block-ui';

@NgModule({
  imports: [
    // 保留你已有的其他模块
    BlockUIModule.forRoot() // 根模块用forRoot，子模块也可以用forRoot，或者用forChild()
  ],
  declarations: [AdminComponent],
  // 注意：不要添加CUSTOM_ELEMENTS_SCHEMA，因为这不是Web组件
})
export class HtmlLayoutModule { }

2. 升级ng-block-ui到适配Angular6的稳定版本 #

你当前使用的ng-block-ui@1.0.4是较早的版本，虽然官方宣称支持Angular6，但部分版本兼容性问题可能导致模块识别失败。建议升级到经过验证的稳定版本：

npm install ng-block-ui@1.1.3 --save

3. 清理项目缓存并重启服务 #

Angular6的缓存机制有时候会导致模块导入不生效，执行以下命令彻底清理后重启项目：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng serve --open

完成以上步骤后，组件应该就能被正常识别并使用了。

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