标签: angular-library

我正在尝试开发一个新的库，打算将其放入三个新的 Angular 应用程序中，以及几个扩展来自该库的组件的组件，然后由这三个应用程序使用。在我看来，自然结构是每个应用程序、库和每个组件都有一个单独的存储库。

my-lib.git
app1.git
app2.git
component1.git
component2.git

然而，到目前为止我看到的每一篇文章都是从创建工作区并在其中构建库开始的。由于每个组件都将在自己的时间线上开发和分发（通过私有 Gitlab，而不是 npm），应用程序开发人员会选择要包含哪些组件的版本，因此我觉得将它们全部放入一个存储库中是不对的。

为此我应该使用什么存储库结构以及如何开发 Angular 库而不将它们全部放入工作区？

如果我创建一个像这样的角度库：

ng new libraries-workspace --create-application=false
cd libraries-workspace
ng generate library test-library

现在我建立了图书馆

ng build test-library --watch

现在，如果我在完全不同的文件夹（远离工作区）中创建一个新的角度应用程序

ng new test-project

cd test-project

如何在不发布到 NPM 的情况下引用或安装我的库。所以基本上我想从文件夹安装库

像这样的东西：

ng add test-library c:\libraries-workspace\dist\test-library...

我不想将我的项目添加到工作区文件夹中。

谢谢

我的 Angular 12 应用程序中有一些通用组件，我计划将其创建为 Angular 库，以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 Angular（例如 Angular 8 / Angular 10）上运行，它们也将使用这个通用库。

我已经在 Angular 12 中创建了库，它在 Angular 12 应用程序中运行良好。但是，它在使用 Angular 8 和 Angular 10 的其他应用程序中不起作用。

出现如下错误：

fesm2015/common-lib.js 12:145-163 "export '\xc9\xb5\xc9\xb5FactoryTarget' (imported as 'i0') was not found in '@angular/core'\n

所以，主要的困惑是我是否需要为 v8、v8 和 v12 应用程序创建 3 个不同的角度库。或者有什么方法可以创建一个可供所有 3 个角度应用程序使用的库（版本 8/10/12）。

请建议正确的继续方式。

与“完整”编译模式相比，为什么在“部分”编译模式下编译的库在消费者应用程序内部构建得如此缓慢？

我正在尝试创建一个 Angular v14 应用程序，该应用程序导入包含路由的 Angular 库。我的设置看起来像这样：

app.module.ts：（主应用程序）

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '' , loadChildren: () => import('@mytest/core').then(m => m.TestModule)}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.module.ts（库）

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: '', pathMatch: 'full', component: TestComponentComponent}
    ]),
  ],
  declarations: [TestComponentComponent],
  exports: [TestComponentComponent],
})
export class TestModule { }

当我运行ng serve所有内容时，编译时没有任何问题，但是打开时localhost:4200我发现一个空白页面，并在控制台中出现此错误：

Error: NG0203: inject() must be called from an injection context such …

我正在尝试将具有多个模块的 Angular 应用程序拆分为多个（单独的）Angular 库（使用本指南），因此我可以在多个 Angular 应用程序中使用这些库。
目前该项目有几个模块，例如：

• 一个用于认证/授权；
• 一个包含所有类型的表格组件
• 一个包含所有类型的过滤器组件
• 一个包含所有类型的图表组件
• ......（我想你明白了）......

我开始致力于将身份验证/授权模块“转换”为库，因为我预计这将是最难和最复杂的模块。
现在我面临一些问题，我将在下面解释。

该模块（目前存在）结合使用 NgRx 和 ngrx-actions 来减少样板。就像（在指南中）提到的那样，创建了一个库和一个用于测试库的应用程序。我将现有模块的所有内容复制到库文件夹中。

必须进行一些调整，因为现有模块从 environment.ts 和 global.ts 读取一些常量，当它用作库时（可能）不存在。

现在我的文件夹结构如下所示，以提供更多上下文（删除了 node_modules）：

.
??? README.md
??? angular.json
??? e2e
?   ??? protractor.conf.js
?   ??? src
?   ?   ??? app.e2e-spec.ts
?   ?   ??? app.po.ts
?   ??? tsconfig.e2e.json
??? package-lock.json
??? package.json
??? projects
?   ??? auth-lib
?   ?   ??? karma.conf.js
?   ?   ??? ng-package.json
?   ?   ??? ng-package.prod.json
?   ?   ??? package-lock.json
? …

在角应用程序，是安全的设置tsconfig.json compilerOptions.target到"es6"（或等值"es2015"），如果你不关心旧的浏览器？

关于此事，在Angular官方文档中写道：

默认情况下，目标是es5，如果仅要将应用程序部署到es6兼容的浏览器，则可以将目标配置为es6。但是，如果您在IE等旧版浏览器中将目标配置为es6，则将引发语法错误。

所以，假设我想我的应用程序部署只ES6兼容的浏览器ONLY，我应该只设置编译目标ES6

我还有其他需要注意的问题吗？

例如，一些Angular第三方库开始无法运行并引发臭名昭著的错误：

TypeError：如果没有“ new”，则无法调用类构造函数

假设在这些情况下此类第三方库中存在错误，是否正确？

我有一个 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”

问候，我已经创建了一个 angular 库，并且已经将它构建并推送到 gitlab 的私有仓库中，现在我需要在另一个项目中使用它

所以我尝试使用 package.json 中的以下行导入它

"my-core-lib": "git+ssh://git@gitlab.com:<username>/my-core-lib.git"

但那是下载了整个 repo 并将其放在 node_modules 中，包括“dist”文件夹

我需要导入“dist”文件夹的内容，而不是整个 repo，例如：

"my-core-lib": "git+ssh://git@gitlab.com:<username>/my-core-lib.git/dist"

提前致谢

我正在尝试创建一个角度库，该库拦截来自导入它的应用程序的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 …