Angular 5和Lerna nullinjectorerror:无需提供注入的提供商

我的用例就是：

我有2个Angular5库。
两个库都从以下项目克隆：https：//github.com/robisim74/angular-library-starter
我有一个由Lerna管理的MonorePo
儿童库有一个非常简单的指令，父库需要使用该指令。

儿童库的代码

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
@NgModule({
    imports: [CommonModule],
    declarations: [
        SampleDirective
    ],
    exports: [
        SampleDirective
    ]
})
export class ChildModule { }

儿童库中的指令代码

import {Directive, PLATFORM_ID, Inject} from '@angular/core';
@Directive({
    selector: '.sample'
})
export class SampleDirective {
    constructor(@Inject(PLATFORM_ID) private _element: Object) {
    }
}

在父母中，我安装了子模块，我正在进行以下简单的单元测试

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component} from '@angular/core';
import {ChildModule} from "@nz/child-lib";
@Component({
    selector: 'nz-host',
    template: `
        <div class="sample"></div>
    `
})
export class TestWrapperComponent{}

describe('injection problem', () => {
    let testFixture: ComponentFixture<TestWrapperComponent>;
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [TestWrapperComponent],
            imports: [ChildModule]                
        });
    }));
    beforeEach(async(() => {
        testFixture = TestBed.createComponent(TestWrapperComponent);
        testFixture.detectChanges();
    }));
    it('test', () => {
        expect(true).toBe(true);
    });
});

运行测试时，我会收到以下错误：

staticinjectorerror [IndectionToken Platform ID]： NullinjectorError：没有注入式平台ID的提供商！错误：staticinjectorerror [InjectionToken Platform ID]： at _nullinjector.get(webpack：///node_modules/@angular/core/esm5/core.js：923：0＆lt; - spec.bundle.js：3517：19( 在resolvetken(webpack：//node_modules/@angular/core/esm5/core.js：1211：0＆lt; - spec.bundle.js：3805：24( 在TryResolvetken(webpack：//node_modules/@angular/core/esm5/core.js：1153：0＆lt; - spec.bundle.js：3747：16( 在staticinjector.get(webpack：//node_modules/@angular/core/esm5/core.js：1024：0＆lt; - spec.bundle.js：3618：20( 在resolvetken(webpack：//node_modules/@angular/core/esm5/core.js：1211：0＆lt; - spec.bundle.js：3805：24( 在TryResolvetken(webpack：//node_modules/@angular/core/esm5/core.js：1153：0＆lt; - spec.bundle.js：3747：16( 在staticinjector.get(webpack：//node_modules/@angular/core/esm5/core.js：1024：0＆lt; - spec.bundle.js：3618：20( 在resolvengmoduledep(webpack：//node_modules/@angular/core/esm5/core.js：10584：0＆lt; - spec.bundle.js：13178：25( 在ngmoduleref_.get(webpack：///node_modules/@angular/core/esm5/core.js：11805：0＆lt; - spec.bundle.js：14399：16( 在Resolvedep(webpack：//node_modules/@angular/core/esm5/core.js：12301：0＆lt; - spec.bundle.js：14895：45(

我的 package.json 是这样：

"dependencies": {
    "tslib": "^1.7.1"
},
"peerDependencies": {
    "@angular/common": ">= 5.0.0",
    "@angular/core": ">= 5.0.0"
},
"devDependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/platform-server": "5.0.0",
    "@compodoc/compodoc": "1.0.3",
    "@nz/child-lib": "^0.0.1",
    "@types/jasmine": "2.6.2",
    "@types/node": "8.0.47",
    "chalk": "2.3.0",
    "codelyzer": "4.0.2",
    "core-js": "2.5.1",
    "istanbul-instrumenter-loader": "3.0.0",
    "jasmine-core": "2.8.0",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "2.0.5",
    "reflect-metadata": "0.1.10",
    "rollup": "0.50.0",
    "rollup-plugin-license": "0.5.0",
    "rollup-plugin-node-resolve": "3.0.0",
    "rollup-plugin-sourcemaps": "0.4.2",
    "rxjs": "5.5.2",
    "shelljs": "0.7.8",
    "source-map-loader": "0.2.3",
    "ts-loader": "3.1.1",
    "tslint": "5.8.0",
    "tslint-angular": "1.0.0",
    "typescript": "2.4.2",
    "uglify-js": "3.1.6",
    "webpack": "3.8.1",
    "zone.js": "0.8.18"
}

即使使用以下代码嘲笑platform_id

{provide: PLATFORM_ID, useValue: 'browser'}

错误仍然存在。

symlinks

套件

我有一个新理论，为什么它发生在我的末端。我认为，由于我正在使用 lerna 来管理我的软件包和软件包依赖关系。而且由于我通过Lerna将子模块添加到主机模块中，因此Lerna在主机的节点模块中创建了子模块的符号链接。因此，我的理论是，当我们使用的图书馆与之相关时，DI无法确定他需要注入的内容。试图弄清楚如何使用-preserve-symlinks

运行测试

非常感谢

，所以问题确实是符号链接。在您的Node_Modules中使用符号链接或使用Lerna(将内部软件包与Symlink链接(等软件包管理工具时。比角度不知道如何正确注入项目。

我的解决方案是在运行测试之前删除Symlinks用硬拷贝安装软件包，然后运行测试。

我遇到了Angular 6多模型项目和Lerna的同一问题。

首先，有一个名为preserveSymLinks的选项将其设置为Angular Configuration File中的true(Angular 6中的angular.json(。

之后，我能够将模块与符号链接链接到我的项目，而不是将模块链接到Lerna链接。我还不知道为什么，但是我必须在Windows环境上使用MKLink命令来执行此操作。

相关内容

最新更新

热门标签：