Ionic项目中如何注入Ionic Material？项目包含app.module.ts文件

看起来你已经走完了Ionic Material集成的前期步骤，先给你梳理下你已经完成的操作：

• 用ionic start ionicMaterial blank创建了空白项目
• 通过bower install ionic-material和bower install robotodraft安装了依赖
• 在index.html里引入了对应的JS和CSS文件

现在遇到的问题是，教程里给的是AngularJS（Ionic 1）的注入代码，但你的项目是带app.module.ts的Ionic 2+（Angular）项目，所以不能直接照搬旧代码，我给你说下具体怎么操作：

先搞清楚版本差异 #

原来的教程是给Ionic 1（基于AngularJS）写的，而你的app.module.ts是Ionic 2+（基于Angular）的核心配置文件，两者的模块注册方式完全不同，所以得调整思路。

针对你的项目的具体操作 #

情况1：你用的是适配Ionic 2+的Ionic Material版本（如果有的话）

打开src/app/app.module.ts，按照下面的结构修改：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// 导入Ionic Material的Angular模块
import { IonicMaterialModule } from 'ionic-material';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    // 把Ionic Material模块添加到这里，完成注入
    IonicMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

情况2：你装的是旧版Ionic 1的Ionic Material（大部分情况）

旧版是给AngularJS写的，直接在Angular项目里用需要做兼容，步骤如下：

1. 先安装兼容包：

npm install @angular/upgrade --save

2. 修改app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    // 引入升级模块
    UpgradeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {
    // 这里对应原来的AngularJS模块注入代码，启动AngularJS的模块
    this.upgrade.bootstrap(document.body, ['ionic', 'ionic-material']);
  }
}

额外小建议 #

其实Ionic 2+本身就内置了Material Design风格，你完全可以不用额外装ionic-material，直接在app.module.ts里配置启用：

IonicModule.forRoot({
  mode: 'md'
})

或者在config.xml里加一句：

<preference name="mode" value="md" />

这样整个项目就会自动切换到Material Design的视觉风格，比引入旧依赖更省心~

内容的提问来源于stack exchange，提问作者stack questions