Divide views into several modules in Ionic2 +


#1

Dear everyone,

I want to divide views into several modules, because I have many pages for different user roles.
Would you like to see this image?

And here is a project structure.

And what I want is like:

I tried to make several modules like Angular, but I got errors.
Please teach me.

thanks


#2

What if there was a blind person that wanted to and could have helped you?


#3

Please post your code as text here and use the </> button to format it. It is almost impossible to get an overview by opening these images.


#4

Sucks.
I have been working with AngularJS and Ionicframework for over 3 years.
But I’m new on Angular2 & Ionic2.
I tried to use modules like Angular2, but failed.
I never heard such words before.


#5

Thanks Sujan12
Here is my codes.

@NgModule({
  declarations: [
    MyApp,
    // auth pages

    LoginPage,
    SignUpPage,
    SignUpPopOverPage,

    // Common page,
    AboutUsPage,
    AccountPage,
    CFormPage,
    CurrentDyesPage,
    EditOrderPage,
    EditProductPage,
    GreetingsPage,
    NewProductPage,
    NewsPage,
    OrderFormPage,
    ProductDetailPage,
    ProductListPage,
    SamplesPage,
    StockListPage,
    SuggestionsPage,
    WayBillsPage,
    ProductListOnSalePage,

    // client pages
    ClientHomePage,
    ClientCartPage,
    ClientOrderDetailPage,
    ClientOrdersPage,
    PaymentPendingPage,
    ClientPriceListPage,
    ClientOrderSheetPage,
    ClientDispatchReturnsPage,
    ClientOrderDispatchedPage,
    ClientWayBillPage,
    ClientCFormPage,
    ClientOrderPendingPage,
    ClientLedgerPage,
    ClientOrderReturnsPage,

    // sales team page
    SalesTeamChequeDetailPage,
    SalesTeamCompanyBankPage,
    SalesTeamHomePage,
    SalesTeamPartyLedgerPage,
    SalesTeamPartyToPartyPage,
    SalesTeamPriceListPage,
    SalesTeamWayBillPage,
    SalesTeamCFormPage,
    SalesOrderPendingPage,
    SalesOrderDispatchedPage,
    SalesOrderHistoryPage,
    SalesDispatchDetailPage,
    SalesOrderReturnsPage,
    SalesDispatchReturnDetailPage,
    SalesTargetPage,

    // dispatch user
    DispatchOrderPage,
    DispatchUserHomePage,
    DispatchPendingListPage,

    // product user
    ProductionUserHomePage,
    MaterialListPage,
    MaterialDlg,
    ProductionPendingListPage,
    ProductionUserProductListPage,
    ProductionUserNewProductPage,


    // super admin
    SuperAdminHomePage,
    SuperAdminOrdersPage,
    SuperAdminProductListPage,
    EditUserPage,
    UserListPage
  ],
  imports: [
    HttpModule,
    JsonpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

    // auth pages

    LoginPage,
    SignUpPage,
    SignUpPopOverPage,

    // Common page,
    AboutUsPage,
    AccountPage,
    CFormPage,
    CurrentDyesPage,
    EditOrderPage,
    EditProductPage,
    GreetingsPage,
    NewProductPage,
    NewsPage,
    OrderFormPage,
    ProductDetailPage,
    ProductListPage,
    SamplesPage,
    StockListPage,
    SuggestionsPage,
    WayBillsPage,
    ProductListOnSalePage,

    // client pages
    ClientHomePage,
    ClientCartPage,
    ClientOrderDetailPage,
    ClientOrdersPage,
    PaymentPendingPage,
    ClientPriceListPage,
    ClientOrderSheetPage,
    ClientDispatchReturnsPage,
    ClientOrderDispatchedPage,
    ClientWayBillPage,
    ClientCFormPage,
    ClientOrderPendingPage,
    ClientLedgerPage,
    ClientOrderReturnsPage,

    // sales team page
    SalesTeamChequeDetailPage,
    SalesTeamCompanyBankPage,
    SalesTeamHomePage,
    SalesTeamPartyLedgerPage,
    SalesTeamPartyToPartyPage,
    SalesTeamPriceListPage,
    SalesTeamWayBillPage,
    SalesTeamCFormPage,
    SalesOrderPendingPage,
    SalesOrderDispatchedPage,
    SalesOrderHistoryPage,
    SalesDispatchDetailPage,
    SalesOrderReturnsPage,
    SalesDispatchReturnDetailPage,
    SalesTargetPage,

    // dispatch user
    DispatchOrderPage,
    DispatchUserHomePage,
    DispatchPendingListPage,

    // product user
    ProductionUserHomePage,
    MaterialListPage,
    MaterialDlg,
    ProductionPendingListPage,
    ProductionUserProductListPage,
    ProductionUserNewProductPage,


    // super admin
    SuperAdminHomePage,
    SuperAdminOrdersPage,
    SuperAdminProductListPage,
    EditUserPage,
    UserListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    B2BApi,
    B2BCart,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

The pages can be divided in several modules.
Please let me know if you still have no idea.