Angular5でngx-bootstrapを導入時にエラー

 

 

勉強のためにAngular5を触っています。

チュートリアルを一通りやってみた後にbootstrap導入してみたら、

テンプレートの方は1mmもいじってないのにコンソールでエラった。。。

出鼻をくじかれてひんひんいいながらStackOverFlowを参考に唸りながら直したのでメモ。

 

現象

　Angular5にngx-bootstrapを導入すると、

　コンソールにTemplateParseErrorが出て画面が表示されない

　※なお中身は実装をしていない新規作成状態のタイトルページのみ

エラー内容

"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-    index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec"):     
ng:///DatepickerModule/DayPickerComponent.html@52:58
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24633)
    at JitCompiler._parseTemplate (compiler.js:34442)
    at JitCompiler._compileTemplate (compiler.js:34417)
    at compiler.js:34318
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34318)
    at compiler.js:34188
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)

対処方法

　１．一旦bootstrapをアンインストール

　　$ npm uninstall ngx-bootstrap ng2-bootstrap  —-save

　２．パッケージディレクトリ配下のpackage-lock.jsonを削除

　３．キャッシュをクリアする

　　$ npm cache clear --force

　４．もう一度bootstrapをインストール

　　$ npm install ngx-bootstrap --save 

　５．package.jsonの中のdependenciesが更新されていることを確認

原因

　導入時はリファレンスではなく技術ブログを見て参考にしたので、

　ngx-bootstrapの前に、ng2-bootstrap(おそらくAnglar3および4に対応)を入れてしまい、

　ng2-bootstrapが適用されたままlockファイルによりngxで更新されず、

　ng2-bootstrapのng-templateのソースが適用されてエラーになっていたっぽい。

　（Anglar5はng-templateじゃなくtemplateなのかな？）

　Angular周りはバージョンによって互換がないことも多いみたいなので、

　リファレンス参考にするときは気をつけよう……

 

AngularによるモダンWeb開発 実践編~実際の開発で必要な知識を凝縮~

Angularアプリケーションプログラミング