ionic3 懒加载

ionic3 懒加载

第一步:增加module.ts
ionic3 懒加载_第1张图片

第二部:去掉app.module.ts中重复的部分
ionic3 懒加载_第2张图片

第三步:在对应页面的.ts文件里增加@IonicPage()特性(以home.ts为例)
ionic3 懒加载_第3张图片
第四步:使用懒加载(只需要将之前的页面名字用引号引起来即可,对应的也不需要在顶部进行import导入)
app.component.ts

ionic3 懒加载_第4张图片

tabs.ts

ionic3 懒加载_第5张图片第五步:懒加载运行效果图
首次进入的时候,只加载了tabs和tool,切换的时候才会加载home
ionic3 懒加载_第6张图片

ionic3 懒加载_第7张图片
如果报错,查看下当前配置环境

package.json

{  "name": "WebAdmin",  
   "version": "0.0.1",  
   "author": "Ionic Framework", 
    "homepage": "http://ionicframework.com/",  
    "private": true,  
    "scripts": {   
     "start": "ionic-app-scripts serve",   
      "clean": "ionic-app-scripts clean",    
      "build": "ionic-app-scripts build",   
       "lint": "ionic-app-scripts lint" 
        },  
        "dependencies": {   
         "@angular/animations": "5.2.11",   
          "@angular/common": "5.2.11",    
          "@angular/compiler": "5.2.11",   
           "@angular/compiler-cli": "5.2.11",    
           "@angular/core": "5.2.11",    
           "@angular/forms": "5.2.11",    
           "@angular/http": "5.2.11",    
           "@angular/platform-browser": "5.2.11",    
           "@angular/platform-browser-dynamic": "5.2.11",    
           "@ionic-native/core": "~4.18.0",    
           "@ionic-native/file": "^4.19.0",   
            "@ionic-native/in-app-browser": "^4.19.0",  
              "@ionic-native/splash-screen": "~4.18.0",   
               "@ionic-native/status-bar": "~4.18.0",   
                "@ionic/storage": "2.2.0",    
                "cordova-browser": "5.0.4",    
               "cordova-plugin-device": "^2.0.2",    
             "cordova-plugin-inappbrowser": "3.0.0",    
            "cordova-plugin-ionic-keyboard": "^2.1.3",    
        "cordova-plugin-ionic-webview": "^2.3.1",    
      "cordova-plugin-splashscreen": "^5.0.2",  
     "cordova-plugin-statusbar": "^2.4.2",    
     "cordova-plugin-whitelist": "^1.3.3",    
    "ionic-angular": "3.9.2",    
    "ionic-image-loader": "^6.3.2",   
   "ionicons": "3.0.0",   
    "jquery": "^3.3.1",   
     "rxjs": "5.5.11",   
      "sw-toolbox": "3.6.0",   
       "sweetalert2": "^7.33.1",    
       "zone.js": "0.8.26"  
       }, 
        "devDependencies": {  
          "@ionic/app-scripts": "^3.2.1",    
          "@types/jquery": "^3.3.29",    
          "typescript": "~2.6.2" 
           },  
           "description": "An Ionic project",  
           "cordova": {    
           "plugins": {    
             "cordova-plugin-whitelist": {},   
               "cordova-plugin-statusbar": {},     
                "cordova-plugin-device": {},     
                "cordova-plugin-splashscreen": {},     
                "cordova-plugin-ionic-webview": {},      
             "cordova-plugin-ionic-keyboard": {},    
              "cordova-plugin-inappbrowser": {}   
               },    
               "platforms": [    
                 "browser"  
                   ]  }
                   }

删掉node_modules,然后npm install

如果还报错,就把app-scripts升级到最新版本试一试

你可能感兴趣的:(ionic)