Angular 4 - Bootstrap Modal 抛出异常

Question

我得到“未捕获（承诺）：错误：没有 ComponentLoaderFactory 的提供者！”尝试访问导入 Bootstrap ModalModule 的组件时出错。

app.module.ts：

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
    imports: [BrowserModule, RouterModule, ModalModule.forRoot()],
...

template.component.ts（发生错误的地方）：

import {  TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
    selector: 'templateController',
    templateUrl: './templateController.component.html',
    providers: [BsModalService]
})

export class TemplateControllerComponent implements OnInit {

    modalRef: BsModalRef;

    constructor(private modalService: BsModalService) {

这里我提供了 ngx-bootstrap/modal 的路径，没有它，找不到需要的 js 文件并抛出 404。 systemjs.config.js：

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': '/src/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'tslib': 'npm:tslib/tslib.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'moment': 'node_modules/moment/moment.js',
            'ngx-bootstrap': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
            'ngx-bootstrap/modal': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js'

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: 'src/systemjs-angular-loader.js'
                    }
                }
            },
            rxjs: {
                defaultExtension: 'js'
            }
            //,
            //"ngx-bootstrap/modal": {
            //    "defaultExtension": "js"
            //}

        }
    });
})(this);

Answer 1

尝试在模块导入（来自ngx-bootstrap的模块）中添加forRoot()。

如果不起作用，则需要提供入口组件。

在你的 app.module 中：

您需要在模块文件的 @NgModule() 中添加一个 entryComponent 字段，因为您正在动态加载 Bootstrap 组件。在 entryComponents 数组中添加您的引导组件，如下所示：

@NgModule({
declaration: [],
imports: [],
  entryComponents: [ModalComponent,..]
})