ionic-team / ionic-module-template

A template for building a reusable Angular 2 module for Ionic 2 apps

Ionic Module Template

This is a template for building your own reusable Angular2/Ionic2 module using TypeScript. Supports Angular's ngc and Ahead-of-Time compiling out of the box.

Developing

Develop your module like any other Angular 2 module. Then, run npm run build to build a local copy.

When you're ready to publish to npm, run npm publishPackage.

If you'd like to test this package, run npm install ionic-module-template

npm link

Currently, modules must be published to npm. npm link packages will not install properly with our webpack confing (something on our list). If you can't push private code to npm, other options are a private npm repo/npm enterprise, or npm install from a git repo.

Using your module in an Ionic 2 app

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// Import your module
import { MyModule } from 'ionic-module-template';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),

    MyModule // Put your module here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

ionic-module-template's Issues

Error at first install

I've started new ionic2 project with

ionic start [app-name] --v2
The version is ionic2 rc3 with app-scripts 0.0.45
install the ionic-module-template
add it to imports
run ionic:serve
Got the error
\C:\Repos\ionic2rc3\node_modules@angular\compiler\src\metadata_resolver.js:241 Uncaught Error: Unexpected value 'MyModule' imported by the module 'AppModule'(…)

build --prod: ngc error : "Error encountered resolving symbol values statically"

Hi!
First, thanks for this template, it has helped me a lot to get my first module up and running.

If I build or serve an app referencing the module of this template, everything is fine.
But when I run in production ionic-app-scripts build --prod, I get an error from NGC which says:

build prod failed: Error encountered resolving symbol values statically. Reference to a local (non-exported) 
            symbol 'MyModule'. Consider exporting the symbol (position 23:14 in the original .ts file)

Here is the issue opened on my own module, there are some additional informations on the Ionic version used: geeklearningio/gl-ionic2-env-configuration#2

No such file or directory, open './dist/package.json'

When I run the build script, I can insert the name for my package but after that the process is crashing with the following error:

Component created
(node:72684) DeprecationWarning: Calling an asynchronous function without callback is deprecated.
fs.js:89
      throw err;  // Forgot a callback but don't know where? Use NODE_DEBUG=fs
      ^

Error: ENOENT: no such file or directory, open './dist/package.json'

Any idea what could cause the problem?
Current dev env:

npm -v ->3.10.9
node -v -> v7.2.0

New project ionic2 failed on build error , the module "Unexpected value"

I've opened new ionic2 app by using command "ionic start ionic2 --v2" , I've installed "Ionic2 Module Template" from
https://github.com/driftyco/ionic2-module-template
I run "ionic serve" the app open in browser showing "my-component" from the imported module , but as I run "ionic build android" I get error

[12:27:36] Error: Unexpected value 'MyModule' imported by the module 'AppModule'
[12:27:36] ngc failed
[12:27:36] ionic-app-script task: "build"
[12:27:36] Error: Error
How come ?

Problem with fresh install [email protected]

Hello,

Just after installing npm install ionic2-module-template --save I followed the instructions to import using import { MyModule } from 'ionic2-module-template'; and MyModule inside imports of the app. However when building or running via ionic serve I got:

Unexpected value 'MyModule' imported by the module 'AppModule'

I have greats expectations on using this to solve a problem that I had importing a custom Angular2 module. Hope to share my advances.

My enviroment is:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0 
ios-sim version: 5.0.11 
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

templateUrl not works

Now it is impossible to use templateUrl in component inside module. Ionic project that uses such module cannot find html file with template. "npm run build" generates output tree with no *.html files.

Reproduce:

1. change "template" statement to "templateUrl: 'my-component.html'";
2. create my-component.html file in same folder with my-component.ts;
3. add "@@@" text to my-component.html (to find it later);
4. invoke "npm run build" in project folder;
5. invoke "tree dist" command in project folder to see no *.html files in this dir;
6. invoke "grep @@@ dist/" and see there is no content of template in dist dir at all.

OS: Debian Jessie amd64
NPM: 5.3.0
Node: 7.10.0
Ionic: 3.9.2

Support for component TemplateUrl and StylesUrl

it would be nice if the repo can add support to have templateUrl and stylesUrl as it would nice to have separate files for html and css/scss. Also like to see support for relative paths when adding component specific styles and template.

Is this repo not supported anymore by the Ionic team anymore ?

Add ChartModule to ionic-module-template failed

I try to add ChartModule to this template , I dis this steps
add to dependencies and install

"angular2-highcharts": "^0.4.1",
"highcharts": "^5.0.2"
add ChartModule to my-module.module.ts

import { Observable } from 'rxjs';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MyComponent } from './components/my-component';
import { MyProvider } from './providers/my-provider';
import { ChartModule } from 'angular2-highcharts';

@NgModule({
  declarations: [
    MyComponent
  ],
  providers: [ MyProvider ],
  exports: [
    MyComponent ,
    ChartModule
  ],
  imports: [
    BrowserModule ,
    ChartModule
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class MyModule {}

add chart component to my-component

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `<div>I'm a special snowflake 3</div>
<chart [options]="options"></chart>
`
})
export class MyComponent {
    options = {};

    constructor() {

        this.options = {
            title: {text: 'simple chart'},
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };

    }
}

the publish works , but on my main app where I import this module ionic fails

[10:39:29] ionic-app-scripts 0.0.46
[10:39:29] build prod started ...
[10:39:29] clean started ...
[10:39:29] clean finished in 6 ms
[10:39:29] copy started ...
[10:39:29] ngc started ...
[10:39:29] copy: Error copying "C:\Repos\ionic2rc3\node_modules\ionicons\dist\fonts" to
"C:\Repos\ionic2rc3\www\assets\fonts"
[10:39:29] copy: Error copying "C:\Repos\ionic2rc3\node_modules\ionic-angular\fonts" to
"C:\Repos\ionic2rc3\www\assets\fonts"
[10:39:29] copy finished in 181 ms
[10:39:33] Error: Unexpected value 'ChartModule' imported by the module 'MyModule'
[10:39:33] ngc failed
[10:39:33] ionic-app-script task: "build"
[10:39:33] Error: Error

How to publish in windows?

When I run npm run build && npm publish
I get the following error:

> [email protected] build E:\xampp\htdocs\ionic-module-template
> rm -rf aot dist && npm run ngc

'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rm -rf aot dist && npm run ngc`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dell\AppData\Roaming\npm-cache\_logs\2018-04-15T15_28_30_611Z-debug.log