2021年4月9日 星期五

Ionic error message: Unsupported engine package: '@angular/cli@11.1.4'

Error message: 
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular/cli@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/architect@0.1101.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/angular@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/update@0.1101.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/core@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/schematics@11.1.4',
npm WARN EBADENGINE   required: { node: '>= 10.13.0', npm: '^6.11.0', yarn: '>= 1.13.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@stencil/core@2.5.2',
npm WARN EBADENGINE   required: { node: '>=12.10.0', npm: '>=6.0.0' },
npm WARN EBADENGINE   current: { node: 'v12.5.0', npm: '7.8.0' }
npm WARN EBADENGINE }



Solution: 
$ npm -v
7.5.0

$ npm install --global npm@6

removed 60 packages, changed 194 packages, and audited 436 packages in 30s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm -v
6.14.11

$ npm install -g @angular/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@11.1.4 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google u
nder
Google’s Privacy Policy at https://policies.google.com/privacy? For more details
 and
how to change this setting, see http://angular.io/analytics. Yes

Thank you for sharing anonymous usage data. If you change your mind, the following
command will disable this feature entirely:

    ng analytics off

+ @angular/cli@11.1.4
added 5 packages from 2 contributors, removed 7 packages and updated 234 packages in 103.594s
————————————————

 

於 沒有留言:
標籤： , ,

2021年3月31日 星期三

如何在應用程式利用Google發通知郵件

1.申請1個Google的信箱。

2.使用應用程式密碼登入帳戶

使用應用程式密碼。

    1. 前往您的 Google 帳戶。
    2. 選取 [安全性]。
    3. 選取「登入 Google」底下的 [應用程式密碼]。您可能需要登入。如果您沒有看到這個選項，可能原因如下：
      1. 您的帳戶並未設定兩步驟驗證。
      2. 您目前只設定使用安全金鑰進行兩步驟驗證。
      3. 您使用的是公司、學校或其他機構專用的帳戶。
      4. 您已啟用進階保護功能。
    4. 選擇底部的 [選取應用程式] 並選擇您所使用的應用程式 下一步 選擇 [選取裝置] 並選擇您所使用的裝置 下一步 選取 [產生]。
    5. 按照操作說明輸入應用程式密碼。應用程式密碼是指裝置上黃色列中的 16 位數代碼。
    6. 輕觸 [完成]。
3.參數設定參考
<configuration>
  <system.net>
    <mailSettings>
      <smtp deliveryMethod="Network" from="xxxxx@gmail.com">
        <network defaultCredentials="false" host="smtp.gmail.com" port="587" userName="xxxxx@gmail.com" password="xxxxxxxxxxxxxxxx" enableSsl="true" />
      </smtp>
    </mailSettings>
  </system.net>


於 沒有留言:
標籤： , ,

2021年3月24日 星期三

關於 RxJS 裡的 BehaviorSubject 可以怎麼用!

 RxJS 裡的 Subject 有 4 種類型，Subject、BehaviorSubject、ReplaySubject 和 AsyncSubject，每一種類型的 Subject 都有各自的特性及使用時機，這次會使用 BehaviorSubject來管理使用者的登入狀態


BehaviorSubject

BehaviorSubject 與一般的 Subject 有什麼不一樣，差別有兩個

  1. BehaviorSubject 可以給予初始值
  2. 每一個 Observer 都可以在註冊的當下，立刻取得目前 BehavoirSubject 的值 (以下皆簡稱為 Subject)

這兩種特性，就非常適合用在使用者登入狀態管理的這種情境

使用情境

使用者登入基本上，狀態就兩種，登入與尚未登入，而每一個頁面都可以在取得該使用者目前的登入狀態。也可以即時知道已登入的使用者登出的時間點。

根據上列的描述，我們會實作一個 UserService，用來執行跟管理使用者的登入，登出行為及狀態。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from "rxjs";

@Injectable()
export class UserService {
    isLoginSubject = new BehaviorSubject<boolean>(this.hasToken());

    /**
     * 如果有取得token，表示使用者有登入系統
     * @returns {boolean}
     */
    private hasToken() : boolean {
      return !!localStorage.getItem('token');
    }

    /**
    *  登入使用者，並通知所有訂閱者
    */
    login() : void {
      localStorage.setItem('token', 'JWT');
      this.isLoginSubject.next(true);
    }

    /**
    * 登出使用者，並通知所有訂閱者
    */
    logout() : void {
      localStorage.removeItem('token');
      this.isLoginSubject.next(false);
    }

    /**
    *
    * @returns {Observable<T>}
    */
    isLoggedIn() : Observable<boolean> {
     return this.isLoginSubject.asObservable();
    }
}

Component 的使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, OnInit } from '@angular/core';
import { AuthService } from "../auth.service";
import { Observable } from "rxjs";

@Component({
  selector: 'app-main-nav',
  template: `
    <ul>
      <li *ngIf="!(isLoggedIn | async)" (click)="authService.login()>
        <a>Login</a>
      </li>
      <li *ngIf="(isLoggedIn | async)" (click)="authService.logout()">
        <a>Logout</a>
      </li>
    </ul>
  `
})
export class MainNavComponent implements OnInit {
  isLoggedIn : Observable<boolean>;

  constructor( public userService : UserService ) {
    this.isLoggedIn = userService.isLoggedIn();
  }
}

這樣子就完成了一個陽春型的使用者登入狀態管理 service。



參考資料

於 沒有留言:
標籤： , , , ,

2021年3月21日 星期日

No pipe found with name 'translate'

 Error message:

error NG8004: No pipe found with name 'translate'.



page module 要作如下配置:

import { TranslateModule } from '@ngx-translate/core';


@NgModule({

  imports: [

TranslateModule

  ],

  exports: [

TranslateModule

  ]

})


於 沒有留言:
標籤： , ,

If 'ion-title' is an Angular component, then verify that it is part of this module.

 Error message:

1. If 'ion-title' is an Angular component, then verify that it is part of this module.

2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.


page ts 要加 entryComponents:

const tmpModule = NgModule({

         declarations: [tmpCmp],

         imports:[IonicModule],

         entryComponents: [tmpCmp]

    })(class {});


於 沒有留言:
標籤： , , ,

2021年3月20日 星期六

ionic buile error: No provider for LocalNotifications

Error message:

core.js:6140 ERROR NullInjectorError: R3InjectorError(AppModule)[cls_localnotifications -> LocalNotifications -> LocalNotifications -> LocalNotifications]: 

  NullInjectorError: No provider for LocalNotifications!


Soluction:

app.module.ts  add:

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

providers: [

    LocalNotifications,

]


         

於 沒有留言:
標籤： ,

2021年3月16日 星期二

No targets devices/emulators available. 使用模擬器出現異常,無法使用

指令:ionic cordova emulate android 

異常訊息:

[native-run] ERR_NO_TARGET: No targets devices/emulators available. Cannot create AVD because there is no suitable API installation. Use --sdk-info to reveal missing packages and other issues.


avdmanager list avd    --列出所有系統中所有的AVD    

(環境變數中要有 %ANDROID_HOME%\tools\bin 才可以執行)


avdmanager list target --列出目標的AVD


C:\Users\morse>avdmanager list target

Available Android targets:==============] 100% Fetch remote repository...

----------

id: 1 or "android-19"

Name: Android API 19

Type: Platform

API level: 19

Revision: 4

----------

id: 2 or "android-28"

Name: Android API 28

Type: Platform

API level: 28

Revision: 6

----------

id: 3 or "android-29"

Name: Android API 29

Type: Platform

API level: 29

Revision: 4

ionic指定模擬器：

手機

ionic cordova emulate android --target=Nexus_5X_API_26_x86

ionic cordova emulate android --target=Nexus_5X_API_26_x86 --verbose

ionic cordova emulate android --target=Nexus_5X_API_26_x86 --warning-mode all

平板

ionic cordova emulate android --target=Nexus_9_API_27


SDK 管理工具

sdkmanager --install "system-images;android-29;default;x86"


於 沒有留言:
標籤： , , , , ,
訂閱： 文章 (Atom)

[Q&A] Send image from ionic to asp.net core (IFormFile) web api

 [Q] We are looking to upload image from ionic to .net core web api. To achieve this we are using file transfer plugin. So, far we understoo...