我正在使用Angular 6.1.0构建一个库

• ng new lib-demo
• ng generate library my-lib

所有文章建议使用如下--prod标志运行库的构建:

ng build my-lib --prod

但是,这会引发错误

Configuration 'production' could not be found in project 'my-lib'.

这可能是正确的,因为当我查看angular.jsonproduction build configuration时,库项目中没有a的定义.它仅适用于应用程序项目.

以下是我在使用的库项目的构建配置下所拥有的内容 ng-packagr

"build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-lib/tsconfig.lib.json",
        "project": "projects/my-lib/ng-package.json"
      }
    }

所以这里的问题是,--prod不再需要标志,只是运行ng build m-lib会生成prod构建？

看看dist文件夹的内容看起来如此,但我不是百分百肯定.如果有人可以验证这一点,那就太好了.

假设存在一个用普通Javascript编写的Javascript库,并且常用于vanilla,非框架网站.如何创建一个可以轻松npm install编辑的Angular库,使库无缝地在Angular应用程序中使用？

我无法在Angular文档或更广泛的网络上找到任何关于此过程的良好演示.

例如,有一个很棒的Javascript库被调用p5.js,这与Angular一起使用并不简单.如何创建一个Angular模块,您可以将其简单地导入到您自己的Angular模块中,并使用Angular支持的所有强大功能？

我在使用Angular 6时从延迟加载的模块加载组件时遇到问题.

我使用CLI创建了一个库 - ng generate library @org/chat

更新的angular.json文件包括:

"lazyModules": [
   "dist/org/chat"
],

然后通过AppComponent成功加载模块:

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

到目前为止一直很好,模块正在加载.

但是,ChatModule有一个名为ChatPopupComponent的组件,我找不到使用对话框(或通过将其添加到ViewChild容器)来显示它的方法.

要在对话框中打开组件,需要在模块的entryComponents下声明并在AppComponent级别导入:

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

但是当直接导入组件(并从库中导出)时,我得到以下(明显的)错误:' Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'.由于它是一个延迟加载的模块,它显然还没有导入.

当我尝试以下内容时:

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      }); …

我有一个Angular CLI工作区,包含两个库项目,foo和bar.当我构建两个库中的第二个时foo,构建失败并出现以下错误:

错误TS6059:文件'/code/projects/bar/src/lib/types.ts'不在'rootDir''/ code/projects/foo/src'下.'rootDir'预计会包含所有源文件.

Error: error TS6059: File '/code/projects/bar/src/lib/types.ts' is not under 'rootDir' '/code/projects/foo/src'. 'rootDir' is expected to contain all source files.

    at Object.<anonymous> (/code/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at /code/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/code/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
    at Object.compileSourceFiles (/code/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
    at Object.<anonymous> (/code/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at /code/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

Run Code Online (Sandbox Code Playgroud)

我已复制了错误的沙箱回购GitHub上这里.我仍然遇到错误,尽可能地简化了代码.您可以通过npm run build在rootDir-expect-all-source-files-error分支上执行来重现错误.错误的原因是什么？可能这是一个或与ng-packagr或的错误？或者只是一个配置问题？ngctsc

意见

下面是我可以进行构建传递的代码更改,但我想知道导致错误的原因是什么.

bar.component.ts

构建失败

export class BarComponent …

关于如何在我的库angular6项目中引用外部npm包,我有点困惑.我们有一个内部scss库,我想用它来设置我库中可重用组件的样式.我如何进口呢？

用于lib项目的package.json:

{
  "name": "ikr-lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "document-register-element": "1.8.1"
  },
  "dependencies": {
    "element.ui": "^1.0.1"
  }
}

当我构建库项目时,我得到了这个:

Distributing npm packages with 'dependencies' is not recommended. Please consider adding element.ui to 'peerDependencies' or remove it from 'dependencies'.

BUILD ERROR
Dependency element.ui must be explicitly whitelisted.

我创建了自己的私人角度库，其中包含多个组件，让我的生活更轻松。我按照本教程制作了这个库。一切都很好，我什至将它添加到另一个项目中进行测试。

现在是我必须支持多种语言的部分，因为我住在比利时。我过去使用过 ngx-translate 包没有任何问题，所以我认为这很容易。

我在我的项目中添加了一个带有翻译 json 的 assets/i18n 文件夹。

我发现 angular cli 不包含构建时的资产，因此您必须在制作包之前手动或使用 gulp 将它们添加到 dist 文件夹中。这样做之后，我注意到标签没有被翻译，除非我将翻译包含在主应用程序的 json 文件中。

我的库中的每个组件都有自己的模块，所以我认为我只需要在这些模块中添加翻译模块。所以我做了以下事情。

export function httpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        DirectivesModule,
        ButtonModule,
        IconModule,
        PillModule,
        TranslateModule.forChild({
            loader: {
                provide: TranslateLoader,
                useFactory: (httpLoaderFactory),
                deps: [HttpClient]
            },
            isolate: true
        })
    ],
    declarations: [
        FilterComponent
    ],
    exports: [
        FilterComponent
    ]
})

这让事情变得更糟，不仅标签仍未被翻译，我的主要应用程序甚至没有使用自己的翻译。在库模块中的这些更改之前，主应用程序的翻译没有问题......

所以是的，你猜对了，我被卡住了......我似乎找不到正确的解决方案。

我有一个带工作区的库，其中包含两个项目，一个用于库本身，一个用于测试应用程序。

??? projects
    ??? midi-app
    ??? midi-lib

在工作空间tsconfig.json文件中，我配置了一些@app和@lib路径：

"paths": {
  "@app/*": ["projects/midi-app/src/app/*"],
  "@lib/*": ["projects/midi-lib/src/lib/*"],
  "midi-lib": [
    "dist/midi-lib"
  ],
  "midi-lib/*": [
    "dist/midi-lib/*"
  ]
}

在上述projects/midi-lib/tsconfig.lib.json文件上扩展了一个tsconfig.json文件：

"extends": "../../tsconfig.json",

有一个public-api.ts文件包含：

export * from './lib/midi-lib.module';

我可以将此库与测试应用程序一起使用。

但是，当我尝试在另一个客户端应用程序，另一个工作空间（作为节点模块导入）中使用它时，在未知路径上会出现很多错误 Can't resolve '@lib/...'

如何表达库路径，以便它们在客户端应用程序中公开？或者在打包库时如何转换库路径？

作为附带的问题，我想知道为什么扩展未按相反方式进行。为什么tsconfig.json文件没有在文件上扩展projects/midi-lib/tsconfig.lib.json？

这是我打包然后使用库的方法：

要打包该库，请在父package.json文件的scripts数组中添加以下脚本

"copy-license": "cp ./LICENSE.md ./dist/midi-lib",
"copy-readme": "cp ./README.md ./dist/midi-lib",
"copy-files": "npm run copy-license && npm run copy-readme",
"build-lib": "ng build midi-lib",
"npm-pack": "cd …

我正在开发一个执行强计算操作的角度库。所以我对实现 web worker 很感兴趣，以便有更好的用户体验，让复杂的操作在后台运行。

我的问题是，当我ng g web-worker使用 Angular CLI 8运行命令时，输出是Web Worker requires a project type of "application". 有人对如何继续在我的库中实现 Web Worker 有任何建议吗？

我正在开发多个小型应用程序，这些应用程序将共享公共和共享模块以及资产。

关于如何创建项目结构的部分已在这里回答：/sf/answers/4287819021/

我的项目文件夹结构如下：-root --projects ---app1 ---app2 ---library

1. 我想在应用程序和库之间共享资源（图像和字体）（例如我有带有徽标的标题组件）
2. 我想为所有 css (SCSS) 提供一个位置。共享库中的一些组件也有 SCSS，但我认为我应该将其分开（因为在组件内，css 代码被添加到索引文件标记中）
3. 我应该在哪里保存共享资产文件夹，如何配置它以进行构建以及如何从每个应用程序进行访问（导入 scss 并获取图像和字体）。

我正在升级私有角度库/包（my-lib），以便我可以迁移所有其他项目，但是当导入到项目中时，其中一项服务使用 moment 并抛出错误：“错误类型错误：moment 不是函数”

该库在开发模式下工作，构建和发布都正常，即使导入到项目中，所有组件和资源都加载良好并且没有显示错误，依赖项已下载，但似乎某些 3rd 方依赖项不被“我的”所知-lib”导入后。

即使在项目中，我也可以导入 moment 并使用它，但 node_modules 中的“my-lib”看不到该包。

“my-lib”中的一些文件

服务.ts

import * as moment_ from 'moment';

const moment = moment_;
...

moment(value).format('YYYY-MM-DD')  ----> line that throws the error

已经尝试过

import moment from 'moment';

以及 tsconfig 中的“allowSyntheticDefaultImports”标志

包.json

"dependencies": {
    ...
    "moment": "~2.29.1",
    ...
},
"devDependencies": {
    "@angular-builders/custom-webpack": "~13.0.0",
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/schematics": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/animations": "~13.1.0",
    "@angular/cli": "~13.1.1",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/compiler-cli": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/language-service": "~13.1.0", …