标签: angular-library

我想创建一个在我的 Angular 4 应用程序中使用的库，对于一些我将在其上完成的业务，我有一个enum应用程序稍后需要使用的库。问题是，我像这样声明枚举my-enum.ts：

export enum MyEnum {
    value1 = 1,
    value2 = 2,
    value3 = 3
}

但是，当我执行以下操作时，我似乎无法从我的应用程序导入它：

import { MyEnum } from 'my-library';

我应该如何正确地进行此操作？

我已经使用 CLI 创建并捆绑了一个 Angular (7.2.0) 库：

ng g 图书馆 MyLibrary

ng 建立我的图书馆

这给了我my-libary.umd.js我需要的包。

目前，所有依赖项都作为 peerDependencies 添加到库 package.json 中。我想要做的是实际将一些依赖项与库 (.umd) 捆绑在一起。将它们添加为 " dependencies" 而不是 " peerDependencies" 似乎不起作用，我真的不明白有什么区别？

我怎样才能做到这一点？

应捆绑 ngx-spinner 的 package.json 示例

{
  "name": "demo-plugin",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  },
  "dependecies": {
    "ngx-spinner": "^7.1.4"
  },
  "bundledDependencies": [
    "ngx-spinner"
  ]
}

我正在创建 Angular 库，但有一些关于环境的问题。\n我生成了一个应用程序（父级）和库（子级）。\n如何从库中定义的子组件获取环境（在父级下定义）。

我生成了这样的应用程序。

ng version\n# Angular CLI: 8.0.1\n# Node: 10.15.3\n# OS: darwin x64\n# Angular: 8.0.0\nng new app-parent\ncd app-parent\nng generate library lib-child\n

像这样的项目结构。

$ tree -L 2\n.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 protractor.conf.js\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 lib-child # <- wanna get environment from here!!\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.sass\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.spec.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tslint.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 yarn.lock\n

我尝试导入为相对路径，例如... import …

我正在建立一个库，我希望我的其他项目可以使用它。我正在尝试将配置文件传递到我定义的模块，如下所示：

@NgModule({
  declarations: [ImageComponent],
  imports: [CommonModule],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [{ provide: ImagesConfig, useValue: config }],
    };
  }
}

export class ImagesConfig {
  cloudName: string;
}

这看起来不错，但现在我想在实际模块中使用 cloudName ，如下所示：

@NgModule({
  declarations: [ImageComponent],
  imports: [
    CommonModule,

    CloudinaryModule.forRoot(Cloudinary, {
      config.cloudName,
    }),
  ],
})
export class ImagesModule {
  static forRoot(config: ImagesConfig): ModuleWithProviders<ImagesModule> {
    return {
      ngModule: ImagesModule,
      providers: [{ provide: ImagesConfig, useValue: config }],
    };
  }
}

export class ImagesConfig { …

我创建了 3 个角度库/包：

\n
• @example/ng-youtube-player包含一个YoutubePlayerComponent和YoutubeApiService
\n
• @example/ng-dailymotion-player包含一个DailymotionPlayerComponent和DailymotionApiService
\n
• @example/ng-vimeo-player包含一个VimeoPlayerComponent和VimeoApiService
\n

现在我想创建一个包含 a 的库，仅使用提供,和 的VideoPlayerComponent包。为了不包含不必要的其他组件，我想将 3 个库分别拆分，这样我就可以只安装 Service 类。YoutubeApiServiceDailymotionApiServiceVimeoApiService

\n

您可能会争辩说 Angular 使用了树摇动，因此组件\n无论如何都不会与应用程序捆绑在一起，但无论如何，为了简洁起见，我宁愿\n将这些依赖项分开。

\n

我尝试设置一个包含 2 个库和一个测试应用程序的 monorepo，但是从我引用另一个库的服务的那一刻起，构建失败了。我创建了一个非常基本的示例工作区来重现该问题：

git clone https://github.com/PieterjanDeClippel/angular-monorepo-test\ncd angular-monorepo-test\nnpm install\nng build @mintplayer/ng-youtube-api\nng build @mintplayer/ng-youtube-player\nng build ng-youtube-player-demo\n\n# All projects compile successfully\n# Now go to the NgYoutubePlayerComponent and uncomment the injection parameter in the constructor (line 16)\n\nng build …

我有一个组成部分

     <p style="padding: 5px">

      <select [(ngModel)]='thisDD' name="nameDD" id="idDD" (ngModelChange)="updateDD(thisDD)" class="form-control">
        <option *ngFor="let thing of thingies" [value]="thing.thingID">{{thing.ThingName}} ({{thing.ThingCode}})</option>
      </select>  

     </p>

里面有一个@OutPut

 @Output() selectedValue = new EventEmitter<object>();

我在我的应用程序中使用它

<my-dropdown (selectedValue)="setValue($event)"></my-dropdown> 

哪个将组件中的代码调用为“ setValue”

setValue(event){
this.currValue=event;
}

当下拉列表的值更改时，这一切都很好，但是我有其他组件依赖于在加载应用程序时设置的值。

有没有办法通过@Output获取我默认组件的值？或您将如何实现？

我正在尝试使用 Angular 9，我想创建一个项目，然后创建一个库项目并开始向其中添加我想稍后在 GitHub 上发布的通用模块，并在我的项目中本地使用这些库。

以下是相关依赖项：

Angular CLI: 9.0.0-rc.6
Node: 13.3.0
OS: MacOS 10.15.2
PNPM: 4.3.0

首先，我创建了我的角度项目，ng new foo并添加了角度材质依赖项ng add @angular/material

然后我创建了我的库项目并ng new tuxin-ec --create-application=false 在其中执行了ng generate library animated-images --prefix=tuxin-ec.

我打算创建 15 个左右的公共库来使用和发布。这是这样做的方法吗？ng generate library只是为每一个人做些什么？

目前，在tuxin-ec项目目录中的项目下，我animated-images包含一个模块、服务和控制器，我将相关代码添加到控制器 html 和 css 中。

我想tuxin-ec在我的项目中进行本地链接。所以在tuxin-ec我运行的根目录下pnpm link 和在foo我运行的目录下pnpm link tuxin-ec。

foo在目录下node_modules我还有 tuxin-ec 链接目录。

问题是我想做import {AnimatedImagesModule} from 'tuxin-ec ，但它抱怨找不到tuxin-ec

我能做的是 …

升级到 Angular 12 后，自定义 Angular 库组件的源映射不再可用于调试。

angular.json以下是Angular 应用程序模块的一部分，该模块使用该库：

"projects": {
  "myapp": {
    "build": {
      "configurations": {
        "development": {
          "optimization": false,
          "sourceMap": true,
          "namedChunks": true,
          "extractLicenses": false,
          "vendorChunk": true,
          "buildOptimizer": false,
          "budgets": []
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "myapp:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "myapp:build:production"
        },
        "development": {
          "browserTarget": "myapp:build:development"
        }
      },
      "defaultConfiguration": "development"
    }
  }
}

太棒了，Angular发布了版本6，CLI提供了生成库的选项-他们称其为“备受期待的功能”。

现在，从业务角度来看，我想知道：

• 为什么您实际上需要这个，
• 为什么在现有项目中而不是可以通过npm像往常一样安装的单独项目中...
• 如果您想在项目中使用它，为什么不为此使用模块。

所以我明白了，在npmjs上发布了一些东西，希望整个世界以及未来的连接事物都需要它。图书馆，太好了。

在更大的公司的大型系统中，我们可以重用库，但是我们已经能够使用模块重用东西。我需要分别构建库并在每次更改内容时重新编译。

使用库而不是模块的原因是什么？

（现在我想说，一个lib可以比模块更大，所以我只是用它来组织我的应用程序更好）

我有一个Angular 6应用，可以处理诸如“页面未找到”，“错误”，“未经授权”之类的路由。

这是我的路线的样子：

const appRoutes: Routes = [
  { path:'page-not-found', component: NotFoundPageComponent },
  { path: 'unauthorized', component: UnAuthorizedPageComponent },
  { path: 'error', component: ErrorPageComponent },
  { path: '**', component: NotFoundPageComponent },
  ];

所有组件都有简单的html模板，如下所示：

 <p>Page Not Found. Please report this error to system administrator </p>
 <p>Unauthorized. Please report this error to system administrator</p>
 <p>Error. Please report this error to system administrator</p>

一切工作正常，ng serve我想在多个应用程序中使用这些路由，因此我希望将其转换为可以在许多应用程序中导入的模块或库，如下所示

import { NotFoundPageComponent } from 'routing-lib';

在我的原始应用程序中，我使用创建了一个库ng g library routing-lib。但是我不怎么将我的应用程序绑定到库。这就是我的项目结构的样子。

有什么建议或指示吗？