[異常]Refusing to run ionic cordova plugin inside a Capacitor project.

安裝控件

ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter

出現異常 :  

          Refusing to run ionic cordova plugin inside a Capacitor project.

解決:

            ionic integrations disable capacitor

解決Could not find com.android.tools.build:gradle 問題

 現在CSDN的文章也不靠譜，都是複制粘貼。回到問題

repositories 也設置了

下載 gradle-6.8.1-all.zip 

設置 -》 gradle -》 使用 gradle 從選擇 'gradle-wrapper.propertiers' 

setting -》 gradle -》 gradle user home 選擇解壓gradle-6.8.1-all.zip 後的目錄

下面關鍵的來了

依賴{

    類路徑 'com.android.tools.build:gradle: 4.0.0 '

}

這個是插件版本，並不是你的gradle 的版本，

插件跟gradle版本對比看如下鏈接：

https://developer.android.google.cn/studio/releases/gradle-plugin.html

我之前一直把插件版本跟gradle 寫成一樣，結果怎麼都是報 Could not find com.android.tools.build:gradle 錯誤。希望你避免踩坑

[Angular] 使用 @ViewChild 取得操作 DOM 屬性

在使用 Angular 開發時因為已內建基本的資料繫結功能，我們只要在 html 範本中依照繫結語法即可簡單快速地完成對指定的 DOM 物件完成繫結，只要變更 component.ts 的資料內容，DOM 的值就會跟著變動，不用像使用 jquery 需要先一個一個取得指定物件在對其操作，這對常需要使用動態表格的功能開發上減少了許多負擔，但有時候我們還是會依照需求在某個時間對單獨的 DOM 物件進行操作或取得屬性值來判斷，例如使用 fabric.js，等需要對 canvas 設定大小的操作，通常我們不會寫死，而是依照其上一層的 div 元素大小來動態設定 canvas 畫布大小，這時候我們可以用 @ViewChild 屬性裝飾器來於 component.ts 操作 DOM 物件內容。

 

 

使用說明

示範使用 fabricjs 依照動態寬高設定 canvas 大小

app.component.scss

.viewport {
     width: 100%;
     height: calc(100vh - 250px);
}

app.component.html

    <div #viewport class="viewport">
      <canvas id="canvas" style="border:1px dashed"></canvas>
    </div>

app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Canvas } from 'fabric/fabric-impl';
import { fabric } from 'fabric';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private canvas: Canvas;

 @ViewChild('viewport', { static: true }) viewportDOM: ElementRef;

  constructor() { }

  ngOnInit(): void {
  
  this.canvas = new fabric.Canvas('canvas');
  this.canvas.setWidth(this.viewportDOM.nativeElement.offsetWidth);
  this.canvas.setHeight(this.viewportDOM.nativeElement.offsetHeight);
  this.canvas.renderAll();
  }
}

注意這裡使用方式情境和官網範例點不太一樣，這裡多設定了一個 static 的選項，因為我想在 ngOnInit() 時就完成操作，而 static 參數是指我們要操作的 DOM 在 component.html 一開始就存在，不是透過 *ngIf 或 *ngFor 等結構型指令去產生的，如果要操作的 DOM 是由結構型指令產生，可以不用加上 static 參數，因為不加就是預設 static : false，這時候就要在 ngAfterViewInit() 才能抓到 @ViewChild 的內容，否則會報錯。

From: https://www.tpisoftware.com/tpu/articleDetails/2366

How to Uninstall and Reinstall Angular cli?

Uninstall Angular CLI:

npm uninstall -g @angular/cli

Clear Cache:

npm cache clean --force
npm cache verify


Install Angular CLI:

npm install -g @angular/cli

ionic project create

ionic start test blank --type=ionic-angular --capacitor
cd test
ionic build
ionic cordova platform add android
ionic cap add android


or

ionic start test blank --type=ionic-angular --cordova
cd test
ionic build
ionic cordova platform add android
ionic cap add android


Ionic repair

C: \ionic repair

[INFO] ionic repair will do the following:

- Remove node_modules/ and package-lock.json
- Run npm i to restore dependencies
- Remove platforms/ and plugins/
- Run cordova prepare to restore platforms and plugins

Node.js 重新安裝

第 1 步：從系統中卸載 NodeJs 應用 

第 2 步：轉到 programFiles/nodejs ->刪除 node_modules 文件夾  

第 3 步：重新安裝 NodeJs 應用 (Download)