我正在为 angular 构建一个组件库，我们将在项目之间共享它。但是当我构建包时，html 文件不会被复制到 dist 文件夹中。我收到错误angular Failed to load text-input.component.html。

这是我的 tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

这是编译后的组件：

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) …

我有一个 Angular 6 项目，它导入一个角度库。

我成功从库中导入组件，现在我想在库中拥有 AuthGuard 服务，以便在所有项目中共享，但我做不到。

我在lib的public_api中导出了AuthGuard并在模块中提供，但我不知道如何在项目中访问。

当我尝试导入时：

import { AuthGuard} from 'my-lib/lib/security/auth.guard';

我有错误：

找不到模块：错误：无法解析“c:\workspace\my-project\src\app\portal”中的“my-lib/lib/security/auth.guard”

我正在尝试创建一个角度库，该库拦截来自导入它的应用程序的http请求。问题是，如果从库导入拦截器，则拦截器将不起作用，但如果我将其移动到我的应用程序中，它就会工作。

我的库中的拦截器代码如下所示：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, throwError} from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class SimpleInterceptor implements HttpInterceptor {
    constructor () {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            return throwError(err);
        }))
    }
}

我在我的应用程序中导入拦截器，如下所示（app.module.ts）：

import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateCompiler, TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from …

我正在使用带有辅助入口点的角度库我的库文件夹结构是

• 我的图书馆
  • 次要切入点1
    • 服务1
  • 次要入口点 2
    • 服务2
  • 源代码

我用了这个命令ng test my-library --code-coverage

辅助入口点的服务测试不执行。

然后我尝试将 src 文件夹下的“test.ts”上下文路径（“./”）更改为“../”。测试已执行，但代码覆盖率未创建。

如何对辅助入口点执行测试？

不久前，我创建了两个简单的文件来扩展某些类型的功能。我global.d.ts用这种方式创建了一个：

export { }

declare global {
    interface Date {
        isLeapYear() : boolean;
    }

    interface Array<T> {
        contains(item: T, compareFunc?: (value: T) => boolean): boolean;
        sum(callbackfn: (value: T) => number) : number;
    }

    interface Element {
        closest(selector: string) : Element;
    }

    interface String {
        contains(text: string) : boolean;
    }
}

然后我extensions.ts在原型上创建了文件和实现。我将其导入到我的polyfills.ts：

import "zone.js/dist/zone";
import "./extensions";

通过这种方式，我可以在代码中的任何地方使用这些方法。现在我需要在 Angular 11 库中做同样的事情。我创建了global.d.ts和extensions.ts，但是现在呢？没有polyfills.ts文件，如果我尝试进行简单的导入，而我需要其中一种方法 ( import "../../extensions";)，则不起作用。在控制台中我收到此错误：

projects/test_library/src/components/test.component/test.component.ts:428:48 - error TS2339: Property …

我有两个库：核心库和客户端库。

核心是私有的，而客户端是要发布的。我想将核心包含在客户端捆绑包中（客户端使用核心功能），因此最终用户不需要管理核心依赖项。

\xc2\xbf我该怎么做？任何帮助，将不胜感激。

包

packages\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @lib\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core -> ../../../core\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82       \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client.ts\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 core.ts\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 public-api.ts\n

packages/client/node_modules/@lib-core正如你所看到的，从指向到核心有一个象征意义。这使得当我在本地环境中运行应用程序时，它会找到对 core 的引用。问题是生成构建后，没有链接。

核心/package.json

packages\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ng-package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @lib\n\xe2\x94\x82   \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 core -> ../../../core\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 …

我有一个名为 Themex 的库。

//envInjector.ts
    import {InjectionToken} from "@angular/core";
    export const ENVIRONMENT = new InjectionToken<{[key: string]: any}>('ENVIRONMENT');

//themex.module.ts

import {ENVIRONMENT} from "./envInjector";
 
    
    @NgModule({
      declarations: [
    ThemexComponent,
    ModalComponent,
    UploadComponent,
    AlertComponent,

  ],
  imports: [
    CommonModule
  ],
  exports: [
    ThemexComponent,
    ModalComponent,
    UploadComponent,
    AlertComponent,
  ],
  providers: []
})

export class ThemexModule {
  static forRoot(config: {[key: string]: any}): ModuleWithProviders<any> {
    return {
      ngModule: ThemexModule,
      providers: [
        {
          provide: ENVIRONMENT,
          useValue: config
        }
      ]
    };
  }

}

该库被导入到同一角度工作空间内的角度项目中。

import {ThemexModule} from "themex";

如果我按照上面给出的方式导入它，我会收到错误。

“‘forRoot’的值无法静态确定，因为它是外部声明。”

但是，如果我按照下面给出的方式导入它，一切似乎都有效。

import {ThemexModule} …

我一直在将共享代码块移动到一个库中，我们可以将其引入到其他项目中，其中一部分包括一些核心样式。

最终，我让库本身运行起来（对所有这些的文档感到不满是一个完全不同的主题），并带有几个基本组件。仅供参考，主要是以此为指导进行设置。

然而，我刚刚引入了一些更复杂的文件，以及一些我们想要跨项目以及库组件本身使用的 scss 文件（例如品牌着色等）。

我tsconfig.json按照上述指南进行了设置，以便我的所有组件都可以使用import { x } from '@my-lib/core/src/lib/y';.

我最终还找到了所有信息，以便将我的样式作为资产添加到输出中，以便我们的消费项目可以访问这些信息；ng-package.json：

...
"assets: [
    "./assets"
]
...

（注：样式/字体分别在assets/styles和中找到assets/fonts）。

解决问题。

我应该如何参考这些？通常，在我们的基本 Angular 项目中，这是一件简单@import 'src/styles/x';的事情。

使用我非常喜欢的组件路径别名是行不通的，例如import '@my-lib/core/assets/styles/x';。

使用相对路径确实......有点。例如import '../../../assets/styles/x';

注意：共享样式之一用于排版，它具有src: url(../fonts/xyz.eot);` 类型用法（相对路径）。

此时，它在编译过程中比@my-lib导入更进一步，但会抛出警告：

WARNING: postcss-url: C:\.....\projects\core\src\lib\my-module\components\my-component\my-component.component.scss:36:3: Can't read file 'C:\.....\projects\core\src\lib\my-module\components\fonts\xyz', ignoring

该路径表明它正在按字面意义运行排版文件，该..\fontsurl 是相对于导入点（组件）的，而不是其在资产中的基本文件位置。

我如何正确连接所有这些以及为什么没有人设法为这些东西编写基本指南？

我必须创建自己的“白痴指南”博客，只是为了简化对像我这样的人的说明......

我一直在构建Angular 6库。新过程非常好。

我将使用以前版本中编写的一些模块及其组件进行转换。这些组件已经过修饰，因此它们的视图和样式分别是外部文件，html和scss。

我正在使用的库还包含scss-bundler在构建过程中使用的全局样式，这些样式会输出到库文件夹中。这些样式不包括任何组件样式。

我已经使用“基本” Angular应用程序作为组件的演示站点。同样，非常高兴我可以使用一个存储库来构建我的库并部署它的演示。

在应用程序中，我将从库的dist目录中导入全局样式：

/* VARIABLES */
@import "../dist/vdl-lib/variables";

/* BOOTSTRAP */
@import "../node_modules/bootstrap/scss/bootstrap";

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

/* VDL-LIB */
@import "../dist/vdl-lib/styles";

/* DEMO APPLICATION STYLES */
$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";

html, body {
  height: 100%;
}

这很好用，此时我的组件已正确设置样式并应用了全局布局样式。

现在，这是我遇到问题的地方。SCSS的原因是能够自定义，对吗？在标头组件（位于库中）中，我具有徽标图像的某些样式：

.header-logo {
  display: flex;
  align-items: center;
  .name-brand {
    padding-right: $padding-base;
    img {
      height: $logo-height;
    }
  }
}

在styles.scss（上面显示的）中，假设我$logo-height: 68px紧接在之前进行了变量重新分配@import "../dist/vdl-lib/styles";。当应用程序运行时，组件的徽标大小不会更改。我可以看到高度设置为我的内部“变量” scss文件中的原始值。

这是SCSS还是Angular中的替代问题？看来不是这样！据我所知，何时构建库，输出组件样式已编译为CSS！

在查看fesm5输出js后，我得出了这个结论。我可以找到该组件的装饰器，并确认它是CSS。

我试过使用styles而不是styleUrls在组件装饰器上。我删除了“变量” scss文件的导入。这使输出JavaScript看起来具有SCSS，但是运行演示应用程序显示未应用任何组件样式。我不确定是否存在某些排序问题，以防止在演示应用程序中导入的变量 …

我在Angular中遇到一个库问题。我已经完成了一个库，在其中我用HttpClient询问API，但是当我尝试从该库GameService继续上一个类时，出现了一个问题，我收到：“错误静态注入器：StaticInjectorError（AppModule）[GameService-> HttpClient]” 。当我看到该消息时，我尝试将HttpModule导入我的应用程序中并添加提供程序HttpClient，但未进行任何更改。这是我的类库的代码：

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Game } from './model/game';
import { Observable } from 'rxjs';
import { EndPointGetterService } from '../utilities/end-point-getter.service';

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

  private gameUrl = localStorage.getItem('endpoint') + '/Games';
  private headers: HttpHeaders;

  constructor(private http: HttpClient, private EPGetter: EndPointGetterService) {
    this.headers = new HttpHeaders({
      'Access-Control-Allow-Origin': 'http://localhost:4200',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
      'Access-Control-Allow-Headers': '*',
    });
  }
  getStateGame(groupName: string): Observable<number> {
    return this.http.get<number>(this.EPGetter.getEndPointUrl() + '/Games/' + groupName …