angular之关于Ionic的使用

官网：https://ionicframework.com/docs/intro
安装：

npm install @ionic/angular@latest --save

使用：

（1）在app.module.ts文件中引入
    import { IonicModule } from "@ionic/angular";
（2）添加到 AppModule 的 imports 数组中
    imports: [
        AppRoutingModule,
        IonicModule,
        BrowserModule
      ]

（3）具体内容如下：
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { IonicModule } from "@ionic/angular";

    import { AppComponent } from './app.component';
    import { FooterGuideComponent } from './components/footer-guide/footer-guide.component';
    import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    FooterGuideComponent
  ],
  imports: [
    AppRoutingModule,
    IonicModule.forRoot(),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 遇到的问题：
如果你只是安装了ionic但没有在app.module.ts文件中的imports中注册，就会报错如下：

解决： 在app.module.ts中引入并注册即可

Ionic样式修改

• 修改全局样式：
  在angular.json文件中的styles中添加你的样式路径如下：

  "styles": [
                "src/styles.css",
                {
                    "input": "src/global.scss"
                }
              ],

   

• 在global文件中添加：root即可修改全局样式，如下代码：
   

  // http://ionicframework.com/docs/theming/
  @import '~@ionic/angular/css/ionic.bundle.css';
  @import '~@ionic/angular/css/utils.bundle.css';
  @import '~@ionic/angular/css/global.bundle.css';
  /* Core CSS required for Ionic components to work properly */
  @import "~@ionic/angular/css/core.css";
  
  /* Basic CSS for apps built with Ionic */
  @import "~@ionic/angular/css/normalize.css";
  @import "~@ionic/angular/css/structure.css";
  @import "~@ionic/angular/css/typography.css";
  
  /* Optional CSS utils that can be commented out */
  @import "~@ionic/angular/css/padding.css";
  @import "~@ionic/angular/css/float-elements.css";
  @import "~@ionic/angular/css/text-alignment.css";
  @import "~@ionic/angular/css/text-transformation.css";
  @import "~@ionic/angular/css/flex-utils.css";
  @import "~@ionic/angular/css/display.css";
  
  /* Custome CSS  */
  // @import "theme/themes/default-theme";
  // @import "theme/variables";
  :root {
    --ion-color-primary: #F05A23;
  }
  
  :host {
    -webkit-padding-start: 0;
    -webkit-padding-end: 0;
  }
  

  npm引入bootstrap

• npm install bootstrap@4 --save-dev
  
  @4是版本号

  angular.json中配置即可 

  "styles": [
                "src/styles.css",
                "node_modules/bootstrap/dist/css/bootstrap.css"
              ],