标签: angular-library

我创建了一个自定义属性指令库包并将其安装到 myProject 中，当我尝试使用此自定义指令时会引发错误。

错误错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“appHasAccess”，因为它不是“输入”的已知属性。

我使用的代码如下：

所有可能的尝试我都做了。任何人都知道我如何解决这个问题。

1.指令：HasAccessDirective.ts

@Directive({
  selector: '[appHasAccess]',
})

export class HasAccessDirective {

accessDetail = { 'a': 1 }
 @Input('appHasAccess') set appHasAccess(accessDetail: any) {
    // Based on right control enable/disable
    this.eleRef.nativeElement.disabled = this.appRights.hasRights(accessDetail);
}
constructor(private eleRef: ElementRef,
    private appRights: MyService) { }
}

2.模块：DigiUserRightsModule.ts

   @NgModule({
        declarations: [
            HasAccessDirective
        ],
        imports: [
            CommonModule,
            HttpClientModule,
        ],
        exports: [
            HasAccessDirective
        ],
        providers: [UserRightsService]
    })

export class DigiUserRightsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DigiUserRightsModule,
            providers: [UserRightsService]
        };
    }
}

如何在 Angular 6 库中添加自定义管道以使其在我的主应用程序中可用？目前我正在这样做：lib.module.ts：

@NgModule({
  declarations: [
    SomePipe
  ],
  exports: [
   SomePipe
]})

在 public_api.ts 中：

export * from './lib/pipes/some.pipe';

在 app.module.ts 中：

import { LibModule } from 'lib';
@NgModule({
  ...
  imports: [
    LibModule
  ]
 ...
})

我想使用管道{{ 'something' | some}}，但transform方法SomePipe不叫。

我有一个用三个项目创建的 Angular 工作区。以及我刚刚创建了一个库，我希望在其中包含可重用的模块。

通常对于项目（应用程序和库），我运行以下命令来生成模块或组件：

ng g c component componentName --project=UserPortal

ng g c component componentName --project=myLibrary

但是现在我需要向其中的模块添加组件：

例如库： projects myLibrary src lib navigation-module Add Component here

对于应用项目模块： projects UserPortal src app userModule Add Component Here

我能够通过运行在工作区的库项目中创建一个模块：

ng generate module navigation-module --project=myLibrary

目前我必须通过命令行进入该目录才能创建一个组件。但我有一种感觉，我可以像所有其他命令一样从工作区执行此操作。这将是最有益的，而不必在目录之间进行命令行排列或来回切换。

快速概览：

1. 在 Angular 工作区中创建一个库
2. 在 Angular 工作区的库中创建了一个模块
3. 想要从工作区的库中的模块内创建一个组件

我创建了一个 Angular 库。在我的库中，我希望通过在其中包含功能模块来使其变得干净：

例子：

Library
  NavigationModule
    NavigationSideBarComponent
    NavigationTopComponent
    Navigation Service
    etc

  GraphModule
    BarGraphComponent
    PieGraphComponent

我的导航模块目前如下所示：

@NgModule({
  declarations: [
    NavigationSidebarComponent
  ],
  imports: [
    CommonModule,
    MatSidenavModule
  ],
  exports: [
    NavigationSidebarComponent
  ]
})
export class NavigationModule { }

我的图书馆模块目前如下所示：

@NgModule({
  declarations: [LibraryComponent],
    imports: [
      NavigationModule
    ],
    exports: [
      LibraryComponent
      //NavigationSidebarComponent  <-- Did not work
    ]
 })
 export class LibraryModule { }

我发现的大多数教程都使用一个仅包含组件的库，而没有其他内容，例如模块。我发现使用库中的模块的教程没有显示如何导出片段。

本质上，我想将此库导入到任何应用程序中，并能够NavigationSidebarComponent从库或服务中的模块调用或任何其他组件。

我将继续调查此事。

我需要有关我无法解决的问题的帮助。我正在研究 angular 7 库，以便为我的应用程序添加模块化，但是在应用程序中安装它时，库中定义的模块路由似乎不起作用。

我已经创建项目到 github 来重现问题：
Library test foo-lib
External Application foo-tester

在每个自述文件中，我都描述了如何重现此问题。

我创建了一个示例库 (foo-lib)，其路由模块定义了子路由，然后我在同一工作区中的一个简单应用程序中构建并测试了它。一切正常，并且库路由已正确添加到测试应用程序中。在下一步中，我导出了构建的库，并通过 npm link 命令将其包含在另一个工作区中的另一个应用程序示例中，并在此应用程序上运行了 ng serve 命令。使用此配置，如果尝试实现库路由路径，我会收到一个错误，就好像它们没有添加到主路由模块中一样。

Foo-lib-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MainComponent } from './components/main/main.component';
import { NewFooCmpComponent } from './components/new-foo-cmp/new-foo-cmp.component';

const UP_ROUTES: Routes = [
  { path: 'main_path',  component: MainComponent,
    children: [
      { path: 'child', component: NewFooCmpComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(UP_ROUTES)],
  exports: [RouterModule]
})

export class FooLibRoutingModule { } …

我正在使用 AGM（Angular Google Maps）和 OpenLayers。

我需要以编程方式设置我的 AGM 的缩放，但一直无法弄清楚它是如何工作的。

HTML 地图...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

组件代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM …

我在空设置上遇到了一些纱线问题（当我在 npm 上没有任何版本的库时）。

我有一个多模块项目，结构如下：

root                        # Yarn workspace
 * packages
 |  * lib1-ws               # Angular workspace
 |  |  * projects
 |  |  |  * lib1
 |  |  |     * package.json
 |  |  * package.json
 |  |
 |  * lib2-ws               # Angular workspace
 |  |  * projects
 |  |  |  * lib2
 |  |  |     * package.json # peer depends on lib1
 |  |  * package.json       # depends on lib1
 |  |
 |  * lib3-ws               # Angular workspace
 |     * projects …

我们已经构建了小型 angular 7/ionic 4 库，我们希望通过 git url 安装在内部多个项目中使用。服务项目工作正常，所有从库中导入的工作正常。但是在运行时ng build --prod出现以下错误

ERROR in ./node_modules/edetail-core/edetail-core.ngfactory.js 
Module not found: Error: Can't resolve '../@ionic/angular/dist/core.ngfactory' in '/Users/user.name/Documents/ionic/edetails/node_modules/edetail-core'

我尝试了不同的设置 - 将所有内容移动到 devDependencies（主 package.json），从 peerDependencies（库 package.json）中添加和删除包。添加

"lib": {
    "entryFile": "src/public_api.ts",
    "externals": "@ionic/angular"
  }

(lib ng-package.json) 但没有任何帮助。IonicModule 从导入'@ionic/angular'主库模块文件 (edetail-core.module.ts) 中导入。

这是 ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/edetail-core",
  "lib": {
    "entryFile": "src/public_api.ts"
  }
}

库 package.json

{
  "name": "edetail-core",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@ionic-native/core": "^5.0.0-beta",
    "rxjs": "^6.3.3",
    "@ionic/angular": "^4.0.0"
  }
} …

我有两个角度库 NPM 包：

• A有基本组件
• A-BC具有组件时的组件构建一个与附加功能与整合BC库

一些组件A-BC从A类似导入import { MyThing } from 'A';

A-BC的 package.json 是：

"peerDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
},
"devDependencies": {
   "A": 1.0.0,
   "BC": 4.0.0
}

我尝试的开发步骤是：

1. npm link --only=production 在（内置版本） A
2. npm link --only=production 在（内置版本） A-BC
3. 在my-app，运行npm link A
4. 在my-app，运行npm link A-BC
5. 跑 my-app

找不到安装在任何地方my-app时编译失败。它们都作为符号链接文件夹正确地排列在彼此的旁边。我已经在启用和尝试过这个，但这没有帮助。A-BCAnode_modulespreserveSymlinkstsconfig.jsonangular.json

A可能是 的直接依赖A-BC，但是：

• 双方 …

随着 Angular 10 的发布，我将用于构建库 + 演示应用程序的 Angular 版本更新到版本 10。

一般来说，这一切进展顺利，并且该库仍然与 Angular 的早期版本兼容，但此版本似乎并非如此（针对 Angular 9 的先前版本构建与 Angular 8 运行良好）。

输出打字稿定义文件包括：

import * as \xc9\xb5ngcc0 from \'@angular/core\';\n\n...\n\nstatic \xc9\xb5fac: \xc9\xb5ngcc0.\xc9\xb5\xc9\xb5FactoryDef<QrCodeComponent, never>;\nstatic \xc9\xb5cmp: \xc9\xb5ngcc0.\xc9\xb5\xc9\xb5ComponentDefWithMeta<QrCodeComponent, "qr-code", never, { "value": "value"; "size": "size"; "errorCorrectionLevel": "errorCorrectionLevel"; }, {}, never, never>;\n

在 Angular 8 项目中使用时会导致这样的错误：

 ERROR in node_modules/ng-qrcode/lib/qr-code.component.d.ts(7,25): error TS2694: Namespace \'"/ngqrcode-ng8-test/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5FactoryDef\'.\n    node_modules/ng-qrcode/lib/qr-code.component.d.ts(8,18): error TS2314: Generic type \'\xc9\xb5\xc9\xb5ComponentDefWithMeta\' requires 6 type argument(s).\n    node_modules/ng-qrcode/lib/qr-code.directive.d.ts(13,25): error TS2694: Namespace \'"/ngqrcode-ng8-test/node_modules/@angular/core/core"\' has …