在Angular CLI构建时，可以将可用的OSS列表（3rdpartylicenses.txt）显示在Web应用程序上

2 年 ago

逸, 科

2 minutes

首先

在近年，不使用开源软件（OSS）来开发Web应用程序（SPA）是不可能的吧？
虽然这取决于许可条款，但在使用OSS时，为了遵循许可条款，需要显示使用OSS列表和许可证。
对于Web应用程序，我们会准备一个用于显示许可证的页面，但是每次添加、删除或更改使用OSS的版本时，维护这个许可证显示页面会很麻烦，有时还会忘记对其进行更新，是吧？

这个目标
这个意图
这个目的

在使用@angular/cli进行SPA开发时，我们的目标是将许可证列表页面设置为无需维护的状态。
通过实现这一目标，开发者可以减轻开发过程中的负担，从而能够更专注于真正需要开发的内容。

前提 tí)

前提为以下内容。

ng build 実行時にdist/projectディレクトリに3rdpartylicenses.txtファイルが生成されている(–prodオプションを付与すると生成されます)

请用中文原生的方式改述以下内容，只需要提供一种选项：

内容

当使用@angular/cli来构建项目时，会在dist/project目录下生成一个文件名为3rdpartylicenses.txt的文件，该文件内容汇总了package.json中dependencies字段中记录的开源软件包的名称、版本和许可证。
我们需要创建一个能够读取并显示该文件内容的Component。
请根据个人喜好进行样式设计。

基本步骤

基本步骤如下，请根据需要省略。

请安装@angular/cli。

请创建一个适当的工作目录，并在工作目录中执行以下命令：
1. npm install -g @angular/cli@latest

创建项目

1. 建立一个新项目，命名为 “license-list-sample” 。

制作Component

执行以下操作，将生成 app/license/license.component.* 文件。这个类名为 LicenseComponent。

cd license-list-sample
ng g component license

进行源代码修正

请对每个源进行修订。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // 追加

import { AppComponent } from './app.component';
import { LicenseComponent } from './license/license.component';

@NgModule({
  declarations: [
    AppComponent,
    LicenseComponent // 追加
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<h2>Open Source Licenses</h2>
<div>
  <!-- LicenseComponentを挿入 -->
  <app-license></app-license>
</div>

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';
import { share } from 'rxjs/operators';

/**
 * 3rdpartylicenses.txtライセンスを
 * 読み込んで表示するコンポーネント
 */
@Component({
  selector: 'app-license',
  templateUrl: './license.component.html',
  styleUrls: ['./license.component.css']
})
export class LicenseComponent implements OnInit {

  /**
   * ライセンスを読み込むストリーム
   */
  public license$: Observable<string>;

  /**
   * コンストラクタ
   * @param http HttpClient
   */
  constructor(
    private http: HttpClient,
    private location: Location) {
  }

  /**
   * 初期化イベントハンドラ
   */
  ngOnInit() {
    // 3rdpartylicenses.txtを読み込むストリームを生成
    // --baseHref を設定していても対応できるようにしてみた。
    const path = this.location.prepareExternalUrl('3rdpartylicenses.txt');
    const url = `${window.location.protocol}//${window.location.host}${path}`;
    this.license$ = this.http.get(url, { responseType: 'text' }
    ).pipe(share());
  }
}

<pre [innerText]="(license$ | async)"></pre>

构建和执行

在执行 ng serve –prod 后，请在浏览器中打开 http://localhost:4200。如果这样输出，那就是成功了。请各自修正CSS/HTML并美化设计。

※注意事项
使用`ng build –extractLicenses=true`命令可以使得在非生产环境下也输出许可证列表。
在angular.json文件中设置`”extractLicenses”: true`也可以达到同样的效果。

行动的原因

当我意识到用 @angular/cli 构建时会生成 3rdpartylicenses.txt 文件时，我曾考虑能否利用它。
在这种情况下，我在一个英语网站上看到了介绍，所以我决定用日语写一篇介绍文章。
如果我能做出一点贡献就会很开心。

继续记录

我本来想要以JSON格式处理而不是文本，所以我将我的努力总结成了“创建依赖开源软件许可证清单（JSON）生成工具”。如果您愿意，请看一下。

请参考以下内容：

AngularでHttpClientのgetのためにbase-hrefを取得する

更新记录

2019-10-07: angular.json内のextractLicensesについて補足追加

首先

这个目标 这个意图 这个目的