Angular6:使用本地库时没有注入器的提供者 [英] Angular6: No Provider for Injector when using local library

问题描述

我对 AngularJS 发布后的 Angular 版本有点陌生，并决定尝试一下.我想要做的是构建一个 UI 组件库，以及一个将使用所述库的应用程序.在我的库中，我决定将组件创建为 WebComponents，所以按照我目前找到的教程，我有类似的东西

I'm somewhat new to Angular versions post AngularJS and decided to give them a try. What I want to do is to build a library of UI components, and an application that will consume the said library. In my library, I decided to create the components as WebComponents, so following the tutorials I've found so far, I have something like

import { Injector, NgModule } from '@angular/core'
import { createCustomElement } from '@angular/elements';
import { MyButtonComponent} from './my-button.component'

@NgModule({
    declarations: [MyButtonComponent],
    entryComponents: [MyButtonComponent]
})
export class MyButtonModule {
    constructor(injector: Injector) {
        const myButton = createCustomElement(MyButtonComponent, { injector });
        customElements.define('my-button', myButton);
    }
}

对于我的自定义组件.如果我将组件的所有文件(模块、组件、模板和 SCSS 文件)直接添加到我的应用程序中，它会按预期工作，所以我知道我的组件声明是正确的.但是，如果在我的应用程序中包含库中的组件，则在使用 ng serve 运行我的应用程序时，我会看到错误:

For my custom component. If I add all the files (the module, the component, template and SCSS files) for my component directly to my application it works as expected, so I know my component declaration is right. However, if in my application I include the component from my library, when running my app with ng serve, I see the error:

Error: StaticInjectorError(AppModule)[MyButtonModule -> Injector]: 
  StaticInjectorError(Platform: core)[MyButtonModule -> Injector]: 
    NullInjectorError: No provider for Injector!

我使用的是 Angular 6，我的两个项目都在本地运行，我正在使用 ng-packagr 来捆绑我的库.我在我的库中添加了 @angular/core 和 @angular/elements 作为 peerDependencies，在我的主应用程序中我不得不添加

I'm using Angular 6 and I have both projects running locally and I'm using ng-packagr to bundle my library. I added @angular/core and @angular/elements as peerDependencies in my library, and in my main app I had to add

"resolutions": {
    "@angular/core": "6.1.4"
}

解决错误cannot redeclare block-scoped variable 'ngDevMode'(不确定这是否相关).最初我认为注入错误可能是由 this 引起的，但是我已将 preserveSymlinks 添加到我的 angular.json 文件中，但仍然出现错误.

To solve the error cannot redeclare block-scoped variable 'ngDevMode' (not sure if this is related or not). Initially I thought the injection error could be caused by this but I've added the preserveSymlinks to my angular.json file and I still have the error.

对可能导致这种情况的原因有任何想法吗?

Any thoughts on what might be causing this?

更新:如果我从我的库文件夹手动复制文件并将它们粘贴到我的主应用程序的 node_modules 文件夹中，它会起作用，这让我认为它涉及符号链接.

UPDATE: If I copy the files manually from my library folder and paste them inside the node_modules folder of my main app it works, which leads me to think it's something involve symbolic links.

推荐答案

使用 npm link'ed 库运行 karma 需要在 preserveLinks: true 中添加 >test (builder-angular:karma 部分) angular.json:

to run karma with npm link'ed library its required to add preserveLinks: true in test (builder-angular:karma section) angular.json:

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "preserveSymlinks": true,
        // ...

这篇关于Angular6:使用本地库时没有注入器的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！