<选择器>不是Angular 9自定义库的已知元素 [英] <selector> is not a known element Angular 9 custom library

问题描述

我正在尝试创建一个同时包含服务和组件的自定义库.但是，当我这样做时，会出现常见的不是已知元素"错误.

I'm trying to create a custom library that will have both a service and component. When I do this however, I get the common " is not a known element" error.

即使我做一个很小的例子，也会发生这种情况.重现步骤:

This happens even when I do a very minimal example. Steps to reproduce:

1. ng new example --create-application=false
2. cd example && ng g library example-lib
3. ng g application example-app
4. ng build example-lib
5. 将模块从example-lib项目导入到example-app:

1. ng new example --create-application=false
2. cd example && ng g library example-lib
3. ng g application example-app
4. ng build example-lib
5. Import the module from example-lib project into example-app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ExampleLibModule } from 'example-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ExampleLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 将组件添加到example-app中的app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<lib-example-lib></lib-example-lib>`,
  // templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example-app';
}

如果我按照上述步骤操作，则会收到所描述的错误.这似乎仅是组件的问题，因为如果我在example-lib中向服务添加虚拟方法:

If I follow the above steps, I get the error described. This seems to be a problem only with the components because if I add a dummy method to the service in example-lib:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExampleLibService {

  constructor() { }

  hello() {
    return 'hello';
  }
}

，然后将该服务导入到我的example-app组件中:

and then import that service into my example-app component:

import { Component } from '@angular/core';
import { ExampleLibService } from 'example-lib';

@Component({
  selector: 'app-root',
  // template: `<lib-example-lib></lib-example-lib>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'example-app';
  constructor(private exampleService: ExampleLibService) {
    this.title = this.exampleService.hello();
  }
}

这样做，一切正常，我可以正常访问我的服务.因此，这似乎只是该组件的问题，但是从cli角度来看，所有组件都具有开箱即用的配置.任何指导将不胜感激！

Doing this, everything works fine and I can access my service just fine. So, it only seems to be a problem with the component, but everything has out-of-the-box configuration from the angular cli. Any guidance would be very appreciated!

我的系统:

Angular CLI: 9.1.8
Node: 12.15.0
OS: darwin x64

推荐答案

事实证明，我的node_modules中的某些问题引起了问题.我删除了它们(rm -rf node_modules)，然后重新安装了npm install，这似乎很奇怪.

It turns out something in my node_modules was causing the problem. I removed them (rm -rf node_modules) and reinstalled npm install and that (weirdly) seemed to solve it.

这篇关于<选择器>不是Angular 9自定义库的已知元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！