AngularでJsBarcodeを利用したい

Question

前提・実現したいこと

AngularでJsBarcodeを利用して、バーコードの生成と表示をしたいです。

発生している問題・エラーメッセージ

バーコードが表示されない。エラーメッセージはなし。

該当のソースコード

以下、バーコードを表示したいコンポーネントファイル

<p>下にバーコード表示</p>
<svg id="barcode"></svg>
<!--OKボタン-->

import * as JsBarcode from 'jsbarcode';
@Component({
  //略
})
export class BarcodeComponent {
  constructor(
    //略
  ){}
  ngOnInit(){
    JsBarcode("#barcode", "1234567890");
  }
}

試したこと

lindell/JsBarcode
上記公式ページを参考に実施

（１）npm install jsbarcodeでライブラリをインストール
（２）npm lsでインストール確認　⇒　「jsbarcode@3.11.3」
また、package.jsonとpackage-lock.jsonにも記載があることを確認
node_modules以下にも「jsbarcode」フォルダがあります。

svgの他にもcanvasやimgも使ってみましたが変わりません。

疑問点

公式ドキュメント内の「Node.js:」部分のコードは不要ですか？
必要な場合はどこに記述すればいいですか？

補足情報（FW/ツールのバージョンなど）

■バージョン
npm: 7.4.0
Angular: 11.0.5
JsBarcode: 3.11.3

■参考
Generate barcode on Angular2 project #134
↑同じような質問があるのですが、読解力不足でいまいちわかりませんでした……

Answer 1

自分の方でAngularCLIを使って作った初期状態のプロジェクトに質問主さんのコードをベースに読み込ませて見ましたが動作しますね。

npm install jsbarcodeをnpm install jsbarcode --saveにしたらどうなりますか？

app.component.html

<div>
  <svg id=barcode></svg>
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import * as JsBarcode from 'jsbarcode';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'barcode';

  ngOnInit() {
    JsBarcode("#barcode", "1234567890");
  }
}

・・追記
Angular CLI: 11.2.2
Node: 10.13.0
OS: win32 x64
Angular: 11.2.3
npm: 6.4.1

Comments

[退会済みユーザー]

回答ありがとうございます。

--saveオプションつけても変わらないです。

どこか別のファイルが影響することはあるのでしょうか…

Answer 2

解決しました。

HTMLのほうでngIfを使用していて、条件判定と描画のタイミングが合わないために描画されない、ということでした。

フックメソッドをngOnInitではなく、ngAfterViewInitにしてうまくいきました。

提示した情報が不足しており申し訳ありませんでした。