【问题标题】:Import third-party libraries to Angular Library gives error将第三方库导入 Angular 库会出错
【发布时间】:2018-08-14 13:45:36
【问题描述】:

尝试使用 ng-packagr 创建库。

我运行的项目内部:

ng g library nt-select --prefix nt

在 nt-select.component.ts 中

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

@Component({
  selector: 'nt-nt-select',
  template: `
    <mat-form-field>
      <mat-select [placeholder]="placeholder" [disabled]="disabled" [multiple]="multiple" [(ngModel)]="value"
                  [required]="required">

        <ngx-mat-select-search *ngIf="searchable"
                               [formControl]="optionFilterCtrl"
                               [placeholderLabel]="'Axtar'"
                               [noEntriesFoundLabel]="'Tapılmadı'"
                               [clearSearchInput]="false"
        ></ngx-mat-select-search>
        <mat-option *ngFor="let opt of filteredOptions$ | async" [value]="opt.value">
          {{opt.label}}
        </mat-option>
      </mat-select>

      <mat-error>{{getErrors('hobbies')}}</mat-error>
    </mat-form-field>

  `,
  styles: []
})
export class NtSelectComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

和nt.select.module:

import { NgModule } from '@angular/core';
import { NtSelectComponent } from './nt-select.component';
import {CommonModule} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatSelectModule} from '@angular/material';
import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatSelectModule,
    NgxMatSelectSearchModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [NtSelectComponent],
  exports: [NtSelectComponent]
})
export class NtSelectModule { }

问题是 nt-select 发出错误 cannot find name of ma​​t-form-field, mat-select, ngx-mat-select-search 即使我导入了所有模块。
以下教程:https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5
可能是什么问题?
提前致谢

【问题讨论】:

  • 您是否必须在您的库的 package.json 中添加任何内容?想知道,因为我有同样的问题

标签: angular typescript angular-library


【解决方案1】:

在您的ng-package.json 文件中包含角材料和其他外部包

{
  "lib": {
    "entryFile": "public_api.ts",
    "externals": {
      "@angular/material/input": "ng.material.input",
      "@angular/material/select": "ng.material.select"
      .....
    }
  }
}

【讨论】:

  • 非常感谢!它解决了这个问题。你能告诉我我从哪里得到这方面的信息吗?它有效,但我不知道为什么以这种方式导入第三方库,尤其是角度材料。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多