Usando libs de terceiros no Ionic

Como vai, José?

Dando uma olha no exemplo de utilização da lib no link que vc postou, acho que no seu caso não funcionou pq vc adicionou o ParticlesModule no LoginPageModule e não no módulo principal da aplicação AppModule como eles orientam.

Faça essa modificação e verifique se o seu código funciona.

Grande abraço!

realmente, falha minha.

Uma dúvida: eu estou começando tanto no Angular quanto no Ionic. O fato de eu carregar essa lib no app.module, faz com que ela seja carregada em qualquer tela que eu esteja? Ou só será carregada quando eu acessar essa única tela que vai usar essa lib?

Sim, tudo que vc carrega no módulo principal app.module.ts estará disponível para ser utilizado em qualquer parte da sua aplicação.

Só que isso nem sempre é vantajoso, pelo motivo que eu mostrei no curso. Por isso que o pessoal do Ionic criou o recurso de lazy loading, um dos assuntos que eu apresentei nessa parte 1.

Sim eu vi o exemplo que foi usado pra carregar as pages com o lazy loading, mas então eu posso tbm fazer o lazy loading com essa minha lib? Achei que era só com pages

Boa noite, José! Vc pode fazer lazy loading de qualquer componente do Angular. Como uma página do Ionic é um componente do Angular tudo funciona perfeitamente!

Para a vc chegar ao resultado que vc quer, basta carregar por lazy loading a página onde vc quer aplicar essa biblioteca particles. Se vc carregar ela sem utilizar o lazy loading vai ter o problema que vc teve!

Exemplo prático:

// exemplo-particles.module.ts

@NgModule({
  declarations: [
    ExemploParticlesPage,
  ],
  imports: [
    IonicPageModule.forChild(ExemploParticlesPage),
    ParticlesModule
  ],
  exports: [
    ExemploParticlesPage
  ]
})
export class ExemploParticlesPageModule {}

// exemplo-particles.ts

@IonicPage()
@Component({
  selector: 'page-exemplo-particles',
  templateUrl: 'exemplo-particles.html',
})
export class ExemploParticlesPage {
  myStyle: object = {};
  myParams: object = {};
  width: number = 100;
  height: number = 100;

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

  ionViewDidLoad() {
    this.myStyle = {
      'position': 'fixed',
      'width': '100%',
      'height': '100%',
      'z-index': -1,
      'top': 0,
      'left': 0,
      'right': 0,
      'bottom': 0,
    };

    this.myParams = {
      particles: {
        number: {
          value: 200,
        },
        color: {
          value: '#ff0000'
        },
        shape: {
          type: 'triangle',
        }
      }
    };
  }

}

<!-- exemplo-particles.html -->

<ion-header>

  <ion-navbar>
    <ion-title>exemplo-particles</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="content-particles">
    <particles [params]="myParams" [style]="myStyle" [width]="width" [height]="height"></particles>
</ion-content>

// exemplo-particles.scss

page-exemplo-particles {
    .content-particles {
        background-color: #FF0000;
    }
}

// app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  // carregamento por lazy loading
  rootPage:any = ExemploParticlesPage.name;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

// app.module.ts

//observar que o ExamploParticlesPage não aparece aqui pq será carregado por lazy loading
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Extra: Se vc seguir as instruções que eu mostrei em aula e abrir o Developer Tools na aba Network, ao carregar a sua aplicação, vai ver que será carregado um arquivo 0.js (a exemplo do que aconteceu em aula) que representa o seu módulo que foi carregado de maneira lazy. Veja nessa imagem.

Se algo não ficou claro é só falar!

Grande abraço, meu aluno!