CODEWITHSUNDEEP
angularionic-frameworkionic3
Ivantha
Ivantha

Reputation: 521

Imports in Ionic 3

I am a newbie to Ionic as well as Angular. And I cannot figure our the difference if imports in xxx.ts and xxx.module.ts. in Ionic 3.

Assume that I have a newly generated tab called 'settings' and it has,

settings.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-deals',
  templateUrl: 'settings.html',
})
export class SettingsPage {

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingsPage');
  }

}

and settings.module.ts as 

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './settings';

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

As you can see, there are import statements in both. So if I were to import something, where should I do it? And what is the difference of imports in these two .ts files?

Thank you!

Upvotes: 1

Views: 235

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222572

That's how angular structure works. To give a detailed answer on it.

Imports inside module.

If you want to consume a component,provider(pipe/service) you need to register at the root level, which is the module level.The imports use angular dependency injection and can be exported. This also creates a new instance that can be shared with the elements without needing to instantiate multiple time.

Imports inside the component

These imports are related to the component level which should be already at the module level.Usually The imports at the top of the file are TypeScript imports to make classes, interfaces and variables.

Upvotes: 1

Related Questions