在Ionic 3

时间:2018-06-13 15:45:41

标签: android angular cordova typescript ionic-framework

我正在尝试在我的Sony Z2智能手机上运行该应用程序。我使用以下命令:

ionic build android --prod --release

我的控制台出现错误,如下所示:

  

打字稿错误               在C中键入CirckelmovementPage:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts             是2个模块的声明的一部分:AppModule in   C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts   和CirckelmovementPageModule在C:/ Users / fearcoder中               /Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts!

      Please consider moving CirckelmovementPage in
     

C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts             到更高的模块,导入AppModule   C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts             和CirckelmovementPageModule in   C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts

      You can also create a new NgModule that exports and includes
     

CirckelmovementPage in   C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.ts   然后导入那个NgModule               在AppModule中的C:/Users/fearcoder/Documents/natuurkundeformules/src/app/app.module.ts

      and CirckelmovementPageModule in
     

C:/Users/fearcoder/Documents/natuurkundeformules/src/pages/circkelmovement/circkelmovement.module.ts

这些是文件

circkelmovement.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@IonicPage()
@Component({
  selector: 'page-circkelmovement',
  templateUrl: 'circkelmovement.html',
})
export class CirckelmovementPage {

  ray:any;
  circulationtime:any;
  result:any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private admob: AdMobFree) {
  } 

  ionViewDidLoad(){
    const bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true,
      autoShow: true
    };
    this.admob.banner.config(bannerConfig);

    this.admob.banner.prepare()
      .then(() => {
        this.admob.banner.show()
      })
      .catch(e => console.log(e));
  }

  calculateWebSpeed(ray, circulationtime){      
    return this.result = "Baansnelheid: " + (2 * Math.PI * ray / circulationtime) + " m/s";    
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SpeedPage } from '../pages/speed/speed';
import { DistancePage } from '../pages/distance/distance';
import { TimePage } from '../pages/time/time';
import { WorkPage } from '../pages/work/work';
import { KinenergyPage } from '../pages/kinenergy/kinenergy';
import { GravityenergyPage } from '../pages/gravityenergy/gravityenergy';
import { GravityforcePage } from '../pages/gravityforce/gravityforce';
import { CirckelmovementPage } from '../pages/circkelmovement/circkelmovement';
import { ElectricityenergyPage } from '../pages/electricityenergy/electricityenergy';
import { LawohmPage } from '../pages/lawohm/lawohm';
import { LenslawPage } from '../pages/lenslaw/lenslaw';
import { LorentzforcewirePage } from '../pages/lorentzforcewire/lorentzforcewire';
import { DensityPage } from '../pages/density/density';
import { PressurePage } from '../pages/pressure/pressure';
import { LensstrenghtPage } from '../pages/lensstrenght/lensstrenght';
import { PowerPage } from '../pages/power/power';
import { CurrentstrenghtPage } from '../pages/currentstrenght/currentstrenght';
import { FrequencyPage } from '../pages/frequency/frequency';
import { WavespeedPage } from '../pages/wavespeed/wavespeed';
import { MassPage } from '../pages/mass/mass';
import { LorentzparticlePage } from '../pages/lorentzparticle/lorentzparticle';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,  
    LorentzparticlePage       
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,   
    LorentzparticlePage    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

circkelmovement.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CirckelmovementPage } from './circkelmovement';

@NgModule({
  declarations: [
    CirckelmovementPage,
  ],
  imports: [
    IonicPageModule.forChild(CirckelmovementPage),
  ],
})
export class CirckelmovementPageModule {}

我已经读过这个命令可以解决加载应用时的性能问题。我不知道我做错了什么。有人能指出我正确的方向吗?

亲切的问候

1 个答案:

答案 0 :(得分:2)

因此,当您使用延迟加载的页面时,您根本不需要在此app.module.ts中导入或声明它们,因为它们将成为其文件夹中自己模块的一部分。所以对于所有延迟加载的页面都有:

  • 延迟加载页面在页面中拥有自己的命名模块文件(您似乎拥有该特定页面的文件)

  • 加载此类页面时,在您的应用程序逻辑中
  • (例如使用navCtrl),您需要将页面名称用作字符串而不是作为组件

因此,在您的代码中,取消注释那些延迟加载的页面:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SpeedPage } from '../pages/speed/speed';
import { DistancePage } from '../pages/distance/distance';
import { TimePage } from '../pages/time/time';
import { WorkPage } from '../pages/work/work';
import { KinenergyPage } from '../pages/kinenergy/kinenergy';
import { GravityenergyPage } from '../pages/gravityenergy/gravityenergy';
import { GravityforcePage } from '../pages/gravityforce/gravityforce';
// import { CirckelmovementPage } from '../pages/circkelmovement/circkelmovement';
import { ElectricityenergyPage } from '../pages/electricityenergy/electricityenergy';
import { LawohmPage } from '../pages/lawohm/lawohm';
import { LenslawPage } from '../pages/lenslaw/lenslaw';
import { LorentzforcewirePage } from '../pages/lorentzforcewire/lorentzforcewire';
import { DensityPage } from '../pages/density/density';
import { PressurePage } from '../pages/pressure/pressure';
import { LensstrenghtPage } from '../pages/lensstrenght/lensstrenght';
import { PowerPage } from '../pages/power/power';
import { CurrentstrenghtPage } from '../pages/currentstrenght/currentstrenght';
import { FrequencyPage } from '../pages/frequency/frequency';
import { WavespeedPage } from '../pages/wavespeed/wavespeed';
import { MassPage } from '../pages/mass/mass';
import { LorentzparticlePage } from '../pages/lorentzparticle/lorentzparticle';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    // CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,  
    LorentzparticlePage       
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SpeedPage,
    DistancePage,
    TimePage,
    WorkPage,
    KinenergyPage,
    GravityenergyPage,
    GravityforcePage,
    // CirckelmovementPage,
    ElectricityenergyPage,
    LawohmPage,
    LenslawPage,
    LorentzforcewirePage,
    DensityPage,
    PressurePage,
    LensstrenghtPage,
    PowerPage,
    CurrentstrenghtPage,
    FrequencyPage,
    WavespeedPage,
    MassPage,   
    LorentzparticlePage    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

还有一件事:确保您对应用程序的命名约定非常小心。我在这看到:

@Component({
  selector: 'page-circkelmovement',
  templateUrl: 'circkelmovement.html',
})

您有不同的选择器和模板url文件命名。这可以咬你;) 使用此作为指导:https://angular.io/guide/styleguide或遵循Ionic如何建议的示例,但理想情况下在文件命名方面具有一致性,例如:

  • publish.page.html
  • publish.page.module.ts
  • publish.page.scss
  • publish.page.ts