ng2-bootstrap-modal 在 webpack 编译后不起作用答案

【问题标题】：ng2-bootstrap-modal doesn't work after webpack compileng2-bootstrap-modal 在 webpack 编译后不起作用
【发布时间】：2018-05-11 08:28:59
【问题描述】：

我添加到我的 Angular 项目 ng2-bootstrap-modal 并按照此网址中推荐的步骤操作：https://www.npmjs.com/package/ng2-bootstrap-modal

Everiting 运行良好，直到我将它 [代码是使用 webpack '编译'] 发布到 FAT 环境中。据我了解，它无法创建对话框持有者。

我深入研究了模态代码，发现错误出现在 dialog.service.js 中的“DialogService.prototype.createDialogHolder”中

组件的原始代码如下所示：

DialogService.prototype.createDialogHolder = function () {
    var _this = this;
    var componentFactory = this.resolver.resolveComponentFactory(dialog_holder_component_1.DialogHolderComponent);
    var componentRef = componentFactory.create(this.injector);
    var componentRootNode = componentRef.hostView.rootNodes[0];
    if (!this.container) {
        var componentRootViewContainer = this.applicationRef['_rootComponents'][0];
        this.container = componentRootViewContainer.hostView.rootNodes[0];
    }
    this.applicationRef.attachView(componentRef.hostView);
    componentRef.onDestroy(function () {
        _this.applicationRef.detachView(componentRef.hostView);
    });
    this.container.appendChild(componentRootNode);
    return componentRef.instance;
};

webpack 编译后的代码如下：

t.prototype.createDialogHolder = function() {
        var t = this
          , e = this.resolver.resolveComponentFactory(u.DialogHolderComponent)
          , n = e.create(this.injector)
          , r = n.hostView.rootNodes[0];
        if (!this.container) {
            var o = this.applicationRef._rootComponents[0];
            this.container = o.hostView.rootNodes[0]
        }
        return this.applicationRef.attachView(n.hostView),
        n.onDestroy(function() {
            t.applicationRef.detachView(n.hostView)
        }),
        this.container.appendChild(r),
        n.instance
    }

而且错误在一行：

var o = this.applicationRef._rootComponents[0];

因为 _rootComponents 为空。

您知道如何解决它吗？注意：代码与上面链接中的代码 100% 相同。

更新：在 app.module.ts 我尝试使用默认容器和特定容器 BootstrapModalModule.forRoot({ container: document.body }) 导入 BootstrapModalModule

【问题讨论】：

看起来ng2 已被弃用并被ngx 取代。见他们的npm repo。我相信您应该在他们的github repo 中记录问题
您是否尝试过在src/styles.css 中导入引导程序？请查看this post。

标签： javascript angular webpack bootstrap-modal

【解决方案1】：

以下答案对普通bootstrap 有效。但是由于ngx-bootstrap（又名ng2-bootstrap）是建立在简单的引导程序上的，它仍然可能是相关的。

我注意到在.angular-cli.json 文件中导入bootstrap.css，正如ngx 所建议的那样，在dev 模式下工作，但在使用webpack 编译后就无法工作。

在src/styles.css 文件中导入引导程序，就像在this post 中一样对我有用。

【讨论】：

感谢您的帮助。我曾尝试过，但没有成功。可能我做错了什么。我将其更改为 ngx lib。感谢@avi.elkharrat 的建议！

【解决方案2】：

当您从 angular 4 移动到 5+ 时，我们只需要添加几行来解决整个项目的这个问题。如果有人仍在寻找解决方案，希望这会有所帮助。

请参考https://stackoverflow.com/a/58201485/9312338

【讨论】：