ionic-team / ionic-module-template Goto Github PK
View Code? Open in Web Editor NEWA template for building a reusable Angular 2 module for Ionic 2 apps
License: MIT License
A template for building a reusable Angular 2 module for Ionic 2 apps
License: MIT License
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
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.
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
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:
OS: Debian Jessie amd64
NPM: 5.3.0
Node: 7.10.0
Ionic: 3.9.2
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'(โฆ)
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 ?
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
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.