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.
The page is well loaded except when I put some tags like or : I have the following error with
EXCEPTION: No provider for Config! (TextInput -> Config)
common_directives.ts:49 EXCEPTION: No provider for Config! (TextInput -> Config)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} 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');
}
}
}
}
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>
<div>div</div>
<ion-label>label</ion-label>
<ion-input [ngFormControl]="username" required type="text" value=""></ion-input>
</ion-list>
</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'
],
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 ??