Angular 5- BsModalRef 抛出 NullInjector 错误

Question

当我尝试打开模式时，BsModalRef$$1 出现 NullInjector 错误。

我的 app.module.ts 如下

    import { ModalModule } from 'ngx-bootstrap';

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

我的 system.config.js 如下所示

     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': 'js',

    // 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',
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
    '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
    'tslib': 'npm:tslib/tslib.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    'ngx-cookie-service':        'npm:ngx-cookie-service/cookie-service/cookie.service.js',
    'ts':                        'npm:plugin-typescript/lib',
    'typescript':                'npm:typescript/lib/typescript.js',
    'angular-scholarship-seed':     'npm:angular-scholarship-seed/bundles/angular-scholarship-seed.umd.js',
    'angular-dpa-seed':     'npm:angular-dpa-seed/bundles/angular-dpa-seed.umd.js',

    'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',

我在使用 ng-packagr 打包的不同 Web 应用程序中有一个组件。

我调用 BsModalRef 的组件大致如下

   import {ActivatedRoute, RouterModule, Router} from '@angular/router';
   import { BsModalService } from 'ngx-bootstrap';
    import { BsModalRef } from 'ngx-bootstrap';
   import { ModalContentComponent } from './athleticmodal/athletic.modal';
    import { TemplateRef} from '@angular/core';

    @Component({
selector: 'dummy-list',
    })
 export class DummyListComponent {

 modalRef: BsModalRef;

getAcademicTermsByDate(){
    this.modalRef = this.modalService.show(ModalContentComponent);
}
    constructor(private modalService: BsModalService) { }
}

我正在使用 ng-packagr 打包这个和其他几个组件并将它们发布到 npm 并从我的 app.module.ts 所在的主 Web 应用程序中引用。

我在 ng-package.json 中添加了下面的外部语句

    {
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
    "entryFile": "public_api.ts",
     "externals": {
        "ngx-bootstrap": "ngx-bootstrap"
    }
}
 }

我尝试了很多方法来完成这项工作，例如更改外部名称、从“ngx-bootstrap/modal”导入 BsModalRef 以及类似
从 'ngx-bootstrap/modal/bs-modal-ref.service' 导入 { BsModalRef };

但是没有任何效果。有人可以帮我吗。

Answer 1

首先，您确定 systemjs 不加载代码吗？我看到ModalModule.forRoot()，如果 ModalModule 未定义或为 null，那么您将收到错误 Cannot read property 'forRoot' of null，而不是 NullInjector 错误。

要使 systemjs 工作，它需要了解它是如何工作的。有时，我遇到了这样的麻烦，并查看了 jspm_packages 文件夹的内容。我发现了什么。例如，我做

import * as alina from "derivable-alina";

在 systemjs 配置中有地图：

 map: {
    "derivable-alina": "npm:derivable-alina@0.0.1",

好的，转到jspm_packages 文件夹，转到npm 子文件夹，然后查看名为derivable-alina@0.0.1.js 的文件。打开这个文件，看看下面的代码：

 module.exports = require("npm:derivable-alina@0.0.1/dist/derivable-alina.js");

好的，在npm文件夹中，还有一个文件夹，命名为derivable-alina@0.0.1，里面有主库js-file。所以，当我导入“derivable-alina”时，systemjs

1. 查看配置映射，并将其解析为npm:derivable-alina@0.0.1
2. 加载jspm_packages/npm/derivable-alina@0.0.1.js，导入npm:derivable-alina@0.0.1/dist/derivable-alina.js
3. 加载jspm_packages/npm/derivable-alina@0.0.1/dist/derivable-alina.js

所有这些信息都是通过手工调查获得的，我不能说systemjs每次都是这样工作的。但是，您可以尝试像这样进行自己的调查，看看错误发生在哪里。