소개

현장에서 Ionic3을 사용하여 앱을 만들고 있습니다만, webview에서 표시되는 페이지에서 Angular-material을 사용하고 있어, 네이티브와 web페이지에서 디자인이 바뀌어 버리는 것으로 네이티브측 즉 Ionic측에 심지어 Angular-material을 도입하자는 것으로 시도해 보았습니다만 곳곳에 빠진 부분이 있었기 때문에, 기록도 겸해 공유합니다😃

주의사항

ionic start 명령이 이미 앱 템플릿을 만든 것으로 가정합니다.

Angular 버전을 확인하십시오.

package.json에 나열된 @angular/core 버전을 확인하십시오.

package.json

// 省略
"dependencies": {
  "@angular/core": "5.2.11"
}

Angular-material Getting started 에 쓰여진,

$ npm install --save @angular/material @angular/cdk @angular/animations

설치하면 Ionic의 Angular 버전에 따라

Typescript Error Type 'ElementRef' is not generic.

그리고 오류가 표시 잘 작동하지 않습니다.
왜냐하면 Ionic3의 Angular 버전과 Angular-material 등의 버전이 다르기 때문입니다.
그래서 설치할 때는 버전을 지정해 줄 필요가 있습니다.

Angular-material을 설치합니다.

전항에서 설명한 대로 버전을 지정하여 Angular-material 등을 설치합니다.
Angular5.x.x의 경우,

$ npm install --save @angular/[email protected] @angular/[email protected] @angular/[email protected]

※각 버전은 2019/01/08 시점에서 5.x.x계에서 최신의 것.

app.module.ts에 Module을 추가합니다.

※이번은 예로 FormField, Input, Button, Icon을 사용했습니다.

app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
} from "@angular/material";

@NgModule({
    // 省略
    imports: [
        BrowserAnimationsModule
    ]
})

Ionic에 Angular-material CSS를 로드합니다.

이 절차를 수행하지 않으면 예를 들어

hoge.html

<mat-form-field>
    <input matInput placeholder="input">
</mat-form-field>

라고 쓸 때,


이렇게 placeholder 위에 text 폼이 와 버려 잘 표시되지 않습니다.
따라서 스스로 Angular-material CSS를 읽을 수 있도록 설정해야합니다.
node_modules/@ionic/app-scripts/config 아래에 있는 copy.config.js 를 어디에서나 좋지만, 이번은 프로젝트 디렉토리 바로 아래의 package.json (이후 package.json이라고 함)과 같은 계층에 복사합니다.
그런 다음 복사한 파일에 다음 설정을 추가합니다.

copy.config.js

  // 省略
  copyAngularMaterialCss: {
    src: ['{{ROOT}}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'],
    dest: '{{WWW}}/assets/css'
  }
}

그런 다음 package.json에 다음 설정을 추가합니다.

package.json

  // 省略
  "config": {
    "ionic_copy": "./copy.config.js"
  }

이제 package.json config에 지정된 js 파일을 Ionic 빌드 시 로드하고 www/assets/css 아래에 indigo-pink.css 를 복사합니다.

마지막으로 src 아래의 index.html에 다음 태그를 추가합니다.

  <link href="assets/css/indigo-pink.css" rel="stylesheet"/>

실행해보십시오.

$ ionic serve

다음과 같이 표시되어야 합니다.

입력 양식에 초점을 맞추면 ...

이렇게 푹신하고 애니메이션으로 입력할 수 있게 됩니다.

마지막으로

간단하게 도입할 수 있다고 생각했는데, 버전, 스타일의 2개소에서 주저했습니다. 단지 이전과 달리 영어의 기사 등에 저항이(전보다는는) 없어졌으므로, 의외로 시간 걸리지 않고 해결할 수 있었습니다. 영어 공부하는 것은 중요합니다.

참고 링크

Type 'ElementRef' is not generic
Ionic Angular Material Integration
Ionic developer-resources/app-scripts/
npm @angular/material
npm @angular/cdk
npm @angular/animations