Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

É possível integrar o Angular Material com Ionic 3 ?

Olá, pessoal! Estava buscando uma forma de melhorar o design da minha aplicação e encontrei o Angular Material, que me pareceu muito agradável, porém não tive êxito ao tentar integrá-lo ao Ionic. Segui os passos do site https://material.angular.io/guide/getting-started mas o seguinte erro é apresentado quando executo a aplicação:

TypeError: Object(...) is not a function
    at http://localhost:8100/build/vendor.js:137968:128
    at Object.MAC_ENTER (http://localhost:8100/build/vendor.js:137970:2)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:131917:76)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:166959:81)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.<anonymous> (http://localhost:8100/build/vendor.js:166392:89)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
    at Object.221 (http://localhost:8100/build/main.js:212:77)

Meu app.module.ts :

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Alguém pode ajudar? Desde já, grato!

2 respostas
solução!

Boa noite, meu aluno! Como vai?

Eu nunca tentei integrar o Angular Material ao Ionic, até pq o objetivo do Angular Material é te dar o visual dos componentes do Material Design, algo que o Ionic já te dá por padrão!

Então, antes de mais nada, vc precisa pensar se acrescentar mais bibliotecas é algo realmente necessário! Afinal de contas isso vai se refletir depois no tamanho da sua aplicação!

Então, qual seria o seu objetivo ao fazer essa integração, tendo em vista que é algo que o próprio Ionic já resolve pra vc?

Grande abraço e bons estudos!

Olá, professor! A princípio era só questão de curiosidade mesmo. É que na breve passada que eu dei na documentação do Angular Material me pareceu que ele fornecia uns recursos mais sofisticados. Mas vou tentar reproduzir os efeitos com o próprio Ionic. Obrigado pelas dicas! Abraço.