How to importing pages

@Mxman06 wrote:

As a beginner in Ionic2, I want two ionic2 apps which are including same pages (in order to distribute the same code for multiple clients but not reproduce).

I tried this :

I created a 'pages' folder, containing only code with pages (js + html), and created, at the same level, a folder containning a ionic2 application which import pages from 'pages'.

I add the html and js file paths into webpack.

But I have the following error

EXCEPTION: No provider for FormBuilder! (LoginPage -> FormBuilder)BrowserDomAdapter.logError @ common_directives.ts:49BrowserDomAdapter.logGroup @ common_directives.ts:49ExceptionHandler.call @ common_directives.ts:49(anonymous function) @ common_directives.ts:49NgZone._notifyOnError @ common_directives.ts:49collection_1.StringMapWrapper.merge.onError @ common_directives.ts:49run @ common_directives.ts:49(anonymous function) @ common_directives.ts:49zoneBoundFn @ common_directives.ts:49lib$es6$promise$$internal$$tryCatch @ common_directives.ts:49lib$es6$promise$$internal$$invokeCallback @ common_directives.ts:49lib$es6$promise$$internal$$publish @ common_directives.ts:49(anonymous function) @ common_directives.ts:49microtask @ common_directives.ts:49run @ common_directives.ts:49(anonymous function) @ common_directives.ts:49zoneBoundFn @ common_directives.ts:49lib$es6$promise$asap$$flush @ common_directives.ts:49
common_directives.ts:49 STACKTRACE:BrowserDomAdapter.logError @ common_directives.ts:49ExceptionHandler.call @ common_directives.ts:49(anonymous function) @ common_directives.ts:49NgZone._notifyOnError @ common_directives.ts:49collection_1.StringMapWrapper.merge.onError @ common_directives.ts:49run @ common_directives.ts:49(anonymous function) @ common_directives.ts:49zoneBoundFn @ common_directives.ts:49lib$es6$promise$$internal$$tryCatch @ common_directives.ts:49lib$es6$promise$$internal$$invokeCallback @ common_directives.ts:49lib$es6$promise$$internal$$publish @ common_directives.ts:49(anonymous function) @ common_directives.ts:49microtask @ common_directives.ts:49run @ common_directives.ts:49(anonymous function) @ common_directives.ts:49zoneBoundFn @ common_directives.ts:49lib$es6$promise$asap$$flush @ common_directives.ts:49
common_directives.ts:49 Error: DI Exception
    at NoProviderError.BaseException [as constructor] (common_directives.ts:49)
    at NoProviderError.AbstractProviderError [as constructor] (common_directives.ts:49)
    at new NoProviderError (common_directives.ts:49)
    at Injector._throwOrNull (common_directives.ts:49)
    at Injector._getByKeyDefault (common_directives.ts:49)
    at Injector._getByKey (common_directives.ts:49)
    at Injector._getByDependency (common_directives.ts:49)
    at Injector._instantiate (common_directives.ts:49)
    at Injector._instantiateProvider (common_directives.ts:49)
    at Injector._new (common_directives.ts:49)

here is the js and html for loginPage

import {Page, IonicApp} from '../../node_modules/ionic-framework/ionic';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '../../node_modules/angular2/common';

@Page({
    templateUrl: 'build/pages/login/login.html',
    directives: [FORM_DIRECTIVES],
    provider: [FormBuilder]
})

export class LoginPage {

    loginForm: ControlGroup
    username: AbstractControl;
    password: AbstractControl;

    constructor(fb: FormBuilder) {
        this.loginForm = fb.group({
            'username': ['', Validators.compose([Validators.required, Validators.minLength(8), null])],
            'password': ['', Validators.compose([Validators.required, Validators.minLength(8), null])]
        });

        this.username = this.loginForm.controls['username'];
        this.password = this.loginForm.controls['password'];
    }

    onSubmit(value: string): void {
        if(this.loginForm.valid) {
            console.log('Submitted value: ', value);
            let nav = IonicApp.app.getComponent('nav');
        }
    }


    /*checkFirstCharacterValidator(control: Control): { [s: string]: boolean } {
    if (control.value.match(/^\d/)) {
        return { checkFirstCharacterValidator: true };
    }*/
}

}

html:

<style>
    ion-list {
        margin-top: 50%;
    }

    ion-label {
        padding-top: 2%;
        padding-bottom: 2%;
    }
</style>

<ion-navbar *navbar>
    <ion-title>Login</ion-title>
</ion-navbar>

<form [ngFormModel]="loginForm" (ngSubmit)="onSubmit(loginForm.value)">
    <ion-list>

        <ion-item [class.error]="!username.valid && username.touched">
            <ion-label fixed>Username</ion-label>
            <ion-input [ngFormControl]="username" required type="text" value=""></ion-input>
        </ion-item>
        <div *ngIf="username.hasError('required') && username.touched" class="error-box">* Username is required!</div>
        <div *ngIf="username.hasError('minlength') && username.touched" class="error-box">* Minimum username length is 8!</div>
        <div *ngIf="username.hasError('checkFirstCharacterValidator') && username.touched" class="error-box">* Username cant't start with number!</div>

        <ion-item [class.error]="!password.valid && password.touched">
            <ion-label fixed>Password</ion-label>
            <ion-input [ngFormControl]="password" required type="password" value=""></ion-input>
        </ion-item>
        <div *ngIf="password.hasError('required') && password.touched" class="error-box">* Password is required</div>
        <div *ngIf="password.hasError('minlength') && password.touched" class="error-box">* Minimum password length is 8!</div>
        <div *ngIf="password.hasError('checkFirstCharacterValidator') && password.touched" class="error-box">* Password cant't start with number!</div>

    </ion-list>
    <button type="submit" [disabled]="!loginForm.valid" block>Se connecter</button>
</form>

the webpack:

var path = require('path');


module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: false,
          useWebpackText: true
        },
        include: [path.resolve('app'),path.resolve('./../Common')],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    root: [
      'app',
      './../../Common'
    ],
    alias: {
      'angular2': path.resolve('node_modules/angular2'),
      'ionic': 'ionic-framework',
      'CommonPages': './../../Common/pages'
    },
    extensions: ['', '.js']
  }
};

and the app file

import {App, IonicApp, Platform, FormBuilder} from 'ionic/ionic';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {LoginPage} from 'CommonPages/login/login';


@App({
  templateUrl: 'build/app.html',
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  constructor(app: IonicApp, platform: Platform) {

    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage },
      { title: 'Login', component: LoginPage }
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      //
      // For example, we might change the StatusBar color. This one below is
      // good for light backgrounds and dark text;
      if (window.StatusBar) {
        window.StatusBar.styleDefault();
      }
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

Does someone ahs already imports pages from another project than the current app in ionic2 ??

Posts: 1

Participants: 1

Read full topic