标签: angular-library

我有一个关于角度库辅助入口点设置的非常具体的问题。我真的不明白当它们相互依赖（包括主入口点）时，如何设置它才能使其工作。我已经阅读了 ng-packagr 的文档以及很多问题和堆栈问题，但没有找到真正好的答案。问题是，我想将我们庞大的内部库分解成更小的部分，以便对于不需要一切的应用程序来说，导入和依赖项变得更小。

所以这就是我想要达到的目标：

• 主库@my/my-lib
• 辅助路径@my/my-lib/functions
• 辅助路径@my/my-lib/constants
• 辅助路径@my/my-lib/lang
• 辅助路径@my/my-lib/broker
• 辅助路径@my/my-lib/signalr
• 辅助路径@my/my-lib/sso
• 辅助路径@my/my-lib/types

这就是文件夹结构：

projects\my-lib
-- constants\
---- ...
---- package.json
---- public_api.ts
-- functions\
---- ...
---- package.json
---- public_api.ts
-- lang
---- ...
---- package.json
---- public_api.ts
-- broker
---- ...
---- package.json
---- public_api.ts
-- signalr
---- ...
---- package.json
---- public_api.ts
-- sso
---- ...
---- package.json
---- public_api.ts
-- src <-- the main entry point, as setup from the ng g library
---- lib
------ modules …

我正在升级私有角度库/包（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", …

我在构建角度 Lib 项目时遇到错误：无法将类型实体 i10.BidiModule 解析为符号。还有另外 2 个库项目正在构建良好。这个新的 lib 项目在没有弹性布局和材料的情况下运行良好。但是当我在这个项目中使用柔性布局或材料时，我遇到了以下错误。我已经搜索了很多。有解决方案，例如包含"preserveSymlinks": true在 tsconfig.lib.json 中。不幸的是它不适合我。欢迎对此提供任何帮助。

我的 shell 和微前端有单独的存储库，我想在 shell 和微前端之间共享身份验证服务数据。

我使用下面的文章“第 5 步：共享 Monorepo 的库”来创建 AuthService 共享库，但由于我的不是 Monorepo，所以我将该库发布到 npm 中：

https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md

我的 AuthLibrary 的 npm：https://www.npmjs.com/package/@vijender1256/auth-lib

我将 npm 包安装到我的 shell 和微前端中。我正在 shell 应用程序中设置登录值，并希望在多个微前端中共享用户信息，我想使用此库进行跨 shell 和微前端的 AuthService 状态管理。

shell webpack.config.js

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' }),
    ...sharedMappings.getDescriptors()
  },
  sharedMappings: ['@vijender1256/auth-lib'],
});

微前端 webpack.config.js：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'itemMfe',

  exposes: {
    './ItemModule': …

我有一组反应组件,我试图在Angular 2应用程序中使用它们.

这是我想要使用的主要反应组件

import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer from './containers/MyCardContainer';
import './assets/style/main.css';
export default class MyCard extends Component {

    constructor(props){
        super(props);
    }

    componentWillMount(){

    }

    render(){
        if(this.props.param1 && this.props.param2) {
            return (
                <Provider store={configureStore()}>
                    <MyCardContainer param1={this.props.param1} param2={this.props.param2} key='container'/>
                </Provider>
            )
        }
        else{
            return(
                <div>
                    Invalid Params are provided for MyCard Component !!
                </div>
            )
        }
    }
}

现在在我的角度项目中,我有以下文件.

app.module.ts

import { BrowserModule …

我创建了两个 Angular 库，其中一个库依赖另一个库。

需要使用 forRoot 方法配置依赖关系。我如何将配置数据从父库传递到它的依赖项？

例如，假设我们有TopLevelLib，它有OtherLib一个依赖项。需要使用 forRoot 向 OtherLib 传递一个配置对象。

最终用户的AppModule，导入到

@NgModule({
  imports: [
    TopLevelLib.forRoot(someConfigData)
  ],
  declarations: [...],
  exports: [...]
})
export class AppModule { }

TopLevelLib - 由最终用户导入到 AppModule

@NgModule({
  imports: [
    ...
    OtherLib.forRoot(*****what goes in here?*****)
  ],
  declarations: [...],
  exports: [...]
})
export class TopLevelLib {
  static forRoot(config: ConfigObj): ModuleWithProviders {
    return {
      ngModule: SampleModule,
      providers: [{ provide: SomeInjectionToken, useValue: config }]
    };
  }
}

OtherLib - 由 TopLevelLib 导入

@NgModule({
  imports: [...], …

是否可以使用 Visual Studio Code Debugger 调试已使用 npm link 链接的 Angular 库？非常特别的是，我想知道是否可以将调试器链接到我的库的 TypeScript 代码（不是内置的 js 代码）。

我的调试器适用于我通过 VS Code 运行的应用程序，但是我的链接库断点从未被命中。

从我所做的研究中，我相信我明白为什么会发生这种情况（使用库的应用程序没有源代码，它只有 node_modules 中的编译代码），但是我无法弄清楚或找到有关如何调试的任何详细信息。

以下是我所做的概述：

• Angular 7 库内置在 dist 文件夹中。
• 我npm link在 dist 文件夹中运行
• 我npm link @my/test-lib在我的应用程序中运行，库显示在 node_modules 中，应用程序能够很好地使用它
• 在 angular.json 中：sourceMap 为 true，preserveSystemlinks 为 true，aot 为 false，vendorSourceMap 为 true
• tsconfig.json sourceMap 为true，enableResourceInlining 为true
• vscode launch.json 将 runtimeArgs 设置为 --preserve-symlinks 和 --preserve-symlinks-main

我正在开发一个我不想在 npmjs 中共享的组件库，有什么方法可以与其他 angular 项目共享我的 angular 库而不与 NPM 共享它。

我是角度的新手，

开始编写我的第一个库，包含组件、服务、指令。

我在库的exports数组中列出了我的组件、服务、指令，但仍然：

• 当使用来自另一个库或应用程序的库并成功编译时，我需要在public-api.ts. 为什么 ？ngModule 的 exports数组还不够吗？

• 现在从exports数组中删除了组件、服务、指令，一切仍然有效。为什么 ？

阅读 angular.io 上的文档，它看起来public-api.ts和exports服务于相同的目的 - 我可能在这里遗漏了一些基本的东西。

我已将 Angular 8 迁移到版本 10。应用程序正在使用自定义 Angular 库，该库也从版本 7 迁移到版本 10。该库具有 NgxFileDropModule，导入为

(import { NgxFileDropModule } from 'ngx-file-drop';)

但在主应用程序中抛出错误无法将类型实体 i9.NgxFileDropModule 解析为符号 我该如何摆脱此问题 Ps 库编译和构建良好，但主应用程序抛出依赖于库的错误