ionic-team/ionic-app-scripts

App Build Scripts for Ionic Projects

DISCLAIMER: NO LONGER MAINTAINED

Oh, hello there! Ionic App Scripts is a tool tied specifically to version 3.x of Ionic Framework. Since the release of version 4.0 of Ionic Framework, we are no longer using Ionic App Scripts for building in Ionic Framework. Version 3 of Ionic Framework is no longer actively maintained by us. For more information on which versions are active, see our support policy. Due to this, we are no longer maintaining Ionic App Scripts and we recommend developers update their apps to the latest framework release. This provides several new features, bug fixes, performance improvements, as well as up to date tooling for Ionic apps. For more details on how to upgrade, check out our migration guide.

Ionic App Scripts

Helper scripts to get Ionic apps up and running quickly (minus the config overload).

To get the latest @ionic/app-scripts, please run:

npm install @ionic/app-scripts@latest --save-dev

Config Defaults

Out of the box, Ionic starters have been preconfigured with great defaults for building fast apps, including:

• Multi-core processing tasks in parallel for faster builds
• In-memory file transpiling and bundling
• Transpiling source code to ES5 JavaScript
• Ahead of Time (AoT) template compiling
• Just in Time (JiT) template compiling
• Template inlining for JiT builds
• Bundling modules for faster runtime execution
• Treeshaking unused components and dead-code removal
• Generating CSS from bundled component Sass files
• Autoprefixing vendor CSS prefixes
• Minifying JavaScript files
• Compressing CSS files
• Copying src static assets to www
• Linting source files
• Watching source files for live-reloading

Just the bullet list above is a little overwhelming, and each task requires quite a bit of development time just to get started. Ionic App Script's intention is to make it easier to complete common tasks so developers can focus on building their app, rather than building build scripts.

Note that the Ionic Framework's source is made up of modules and can be packaged by any bundler or build process. However, this project's goal is provide simple scripts to make building Ionic apps easier, while also allowing developers to further configure their build process.

npm Scripts

Instead of depending on external task runners, Ionic App Scripts now prefers being executed from npm scripts. Ionic's npm scripts come preconfigured in the project's package.json file. For example, this is the default setup for npm scripts in each starter:

  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },

To run the build script found in the package.json scripts property, execute:

npm run build

Environments

You can use Node style process.env.MY_VAR syntax directly in your typescript and when the application is bundled it'll be replaced with the following order of precedence:

• If the variable exists in the process environment it will be replaced with that value.
• If the variable is not defined in the process environment it will be read from a .env.dev file for dev builds or .env.prod file for prod builds which are located in the root of the app
• If the variable is not defined in either place it will be undefined

In order to take advantage of this apps will need a src/declarations.d.ts file with the following declaration:

declare var process: { env: { [key: string]: string | undefined; } };

Note: This declaration may conflict if @types/node is installed in your project. See #3541.

Custom Configuration

In many cases, the defaults which Ionic provides cover most of the scenarios required by developers; however, Ionic App Scripts does provide multiple ways to configure and override the defaults for each of the various tasks. Note that Ionic will always apply its defaults for any property that was not provided by custom configuration.

Default Config Files

package.json Config

Ionic projects use the package.json file for configuration. There's a handy config property which can be used. Below is an example of setting a custom config file using the config property in a project's package.json.

  "config": {
    "ionic_cleancss": "./config/cleancss.config.js"
  },

Command-line Flags

Remember how we're actually running ionic-app-scripts from the scripts property of a project's package.json file? Well we can also add command-line flags to each script, or make new scripts with these custom flags. For example:

  "scripts": {
    "build": "ionic-app-scripts build --webpack ./config/webpack.dev.config.js",
    "minify": "ionic-app-scripts minify --cleancss ./config/cleancss.config.js",
  },

The same command-line flags can be also applied to npm run commands too, such as:

npm run build --webpack ./config/webpack.dev.config.js

Overriding Config Files

Config File	package.json Config	Cmd-line Flag
CleanCss	ionic_cleancss	--cleancss or -e
Copy	ionic_copy	--copy or -y
Generator	ionic_generator	--generator or -g
NGC	ionic_ngc	--ngc or -n
Sass	ionic_sass	--sass or -s
TSLint	ionic_tslint	--tslint or -i
UglifyJS	ionic_uglifyjs	--uglifyjs or -u
Watch	ionic_watch	--watch
Webpack	ionic_webpack	--webpack or -w

Overriding Config Values

Config Values	package.json Config	Cmd-line Flag	Defaults	Details
root directory	ionic_root_dir	--rootDir	process.cwd()	The directory path of the Ionic app
src directory	ionic_src_dir	--srcDir	src	The directory holding the Ionic src code
www directory	ionic_www_dir	--wwwDir	www	The deployable directory containing everything needed to run the app
build directory	ionic_build_dir	--buildDir	build	The build process uses this directory to store generated files, etc
temp directory	ionic_tmp_dir	--tmpDir	.tmp	Temporary directory for writing files for debugging and various build tasks
ionic-angular directory	ionic_angular_dir	--ionicAngularDir	ionic-angular	ionic-angular directory
ionic-angular entry point	ionic_angular_entry_point	--ionicAngularEntryPoint	index.js	entry point file for ionic-angular
source map type	ionic_source_map_type	--sourceMapType	source-map	Chooses the webpack devtool option. eval and source-map are supported
generate source map	ionic_generate_source_map	--generateSourceMap	true	Determines whether to generate a source map or not
tsconfig path	ionic_ts_config	--tsconfig	{{rootDir}}/tsconfig.json	absolute path to tsconfig.json
app entry point	ionic_app_entry_point	--appEntryPoint	{{srcDir}}/app/main.ts	absolute path to app's entrypoint bootstrap file
app ng module path	ionic_app_ng_module_path	--appNgModulePath	{{srcDir}}/app/app.module.ts	absolute path to app's primary NgModule
app ng module class	ionic_app_ng_module_class	--appNgModuleClass	AppModule	Exported class name for app's primary NgModule
clean before copy	ionic_clean_before_copy	--cleanBeforeCopy	false	clean out existing files before copy task runs
output js file	ionic_output_js_file_name	--outputJsFileName	main.js	name of js file generated in buildDir
output css file	ionic_output_css_file_name	--outputCssFileName	main.css	name of css file generated in buildDir
bail on lint error	ionic_bail_on_lint_error	--bailOnLintError	null	Set to true to make stand-alone lint commands fail with non-zero status code
enable type checking during lint	ionic_type_check_on_lint	--typeCheckOnLint	null	Set to true to enable type checking during lint
write AoT files to disk	ionic_aot_write_to_disk	--aotWriteToDisk	null	Set to true to write files to disk for debugging
print webpack dependency tree	ionic_print_webpack_dependency_tree	--printWebpackDependencyTree	null	Set to true to print out a dependency tree after running Webpack
parse deeplink config	ionic_parse_deeplinks	--parseDeepLinks	true	Parses and extracts data from the @IonicPage decorator
convert bundle to ES5	ionic_build_to_es5	--buildToEs5	true	Convert bundle to ES5 for production deployments
default watch timeout	ionic_start_watch_timeout	--startWatchTimeout	3000	Milliseconds controlling the default watch timeout
choose the polyfill	ionic_polyfill_name	--polyfillName	polyfills	Change with polyfills.modern or polyfills.ng (all options)[https://github.com/driftyco/ionic/tree/master/scripts/polyfill]
enable linting	ionic_enable_lint	--enableLint	true	Set to false for skipping the linting after the build

Ionic Environment Variables

These environment variables are automatically set to Node's process.env property. These variables can be useful from within custom configuration files, such as custom webpack.config.js file.

Environment Variable	Description
IONIC_ENV	Value can be either prod or dev.
IONIC_ROOT_DIR	The absolute path to the project's root directory.
IONIC_SRC_DIR	The absolute path to the app's source directory.
IONIC_WWW_DIR	The absolute path to the app's public distribution directory.
IONIC_BUILD_DIR	The absolute path to the app's bundled js and css files.
IONIC_TMP_DIR	Temp directory for debugging generated/optimized code and various build tasks
IONIC_NODE_MODULES_DIR	The absolute path to the node_modules directory.
IONIC_ANGULAR_DIR	The absolute path to the ionic-angular node_module directory.
IONIC_APP_SCRIPTS_DIR	The absolute path to the @ionic/app-scripts node_module directory.
IONIC_SOURCE_MAP_TYPE	The Webpack devtool setting. eval and source-map are supported.
IONIC_GENERATE_SOURCE_MAP	Determines whether to generate a sourcemap or not.
IONIC_TS_CONFIG	The absolute path to the project's tsconfig.json file
IONIC_APP_ENTRY_POINT	The absolute path to the project's main.ts entry point file
IONIC_APP_NG_MODULE_PATH	The absolute path to app's primary NgModule
IONIC_APP_NG_MODULE_CLASS	The exported class name for app's primary NgModule
IONIC_GLOB_UTIL	The path to Ionic's glob-util script. Used within configs.
IONIC_CLEAN_BEFORE_COPY	Attempt to clean existing directories before copying files.
IONIC_CLOSURE_JAR	The absolute path ot the closure compiler jar file
IONIC_OUTPUT_JS_FILE_NAME	The file name of the generated javascript file
IONIC_OUTPUT_CSS_FILE_NAME	The file name of the generated css file
IONIC_WEBPACK_FACTORY	The absolute path to Ionic's webpack-factory script
IONIC_WEBPACK_LOADER	The absolute path to Ionic's custom webpack loader
IONIC_BAIL_ON_LINT_ERROR	Boolean determining whether to exit with a non-zero status code on error
IONIC_TYPE_CHECK_ON_LINT	Boolean determining whether to type check code during lint or not
IONIC_AOT_WRITE_TO_DISK	--aotWriteToDisk
IONIC_PRINT_WEBPACK_DEPENDENCY_TREE	boolean to print out a dependency tree after running Webpack
IONIC_PARSE_DEEPLINKS	boolean to enable parsing the Ionic 3.x deep links API for lazy loading
IONIC_BUILD_TO_ES5	boolean to enable converting bundle to ES5 for production deployments
IONIC_START_WATCH_TIMEOUT	Milliseconds controlling the default watch timeout

The process.env.IONIC_ENV environment variable can be used to test whether it is a prod or dev build, which automatically gets set by any command. By default the build and serve tasks produce dev builds (a build that does not include Ahead of Time (AoT) compilation or minification). To force a prod build you should use the --prod command line flag.

process.env.IONIC_ENV environment variable is set to prod for --prod builds, otherwise dev for all other builds.

All Available Tasks

These tasks are available within ionic-app-scripts and can be added to npm scripts or any Node command.

Task	Description
build	A complete build of the application. It uses development settings by default. Use --prod to create an optimized build
clean	Empty the www/build directory.
cleancss	Compress the output CSS with CleanCss
copy	Run the copy tasks, which by defaults copies the src/assets/ and src/index.html files to www.
lint	Run the linter against the source .ts files, using the tslint.json config file at the root.
minify	Minifies the output JS bundle and compresses the compiled CSS.
sass	Sass compilation of used modules. Bundling must have at least ran once before Sass compilation.
watch	Runs watch for dev builds.

Example NPM Script:

  "scripts": {
    "minify": "ionic-app-scripts minify"
  },

Tips

1. The Webpack devtool setting is driven by the ionic_source_map_type variable. It defaults to source-map for the best quality source map. Developers can enable significantly faster builds by setting ionic_source_map_type to eval.
2. By default, the lint command does not exit with a non-zero status code on error. To enable this, pass --bailOnLintError true to the command.

"scripts" : {
  ...
  "lint": "ionic-app-scripts lint"
  ...
}

npm run lint --bailOnLintError true

The Stack

• Ionic Framework
• TypeScript Compiler
• Angular Compiler (NGC)
• Webpack Module Bundler
• Ionic Component Sass
• Node Sass
• Autoprefixer
• UglifyJS
• CleanCss
• TSLint

Contributing

We welcome any PRs, issues, and feedback! Please be respectful and follow the Code of Conduct.

We use Node 6, and NPM 5 for contributing.

Publish a Nightly Build

1. Run npm run build to generate the dist directory
2. Run npm run test to validate the dist works
3. Tick the package.json version
4. Run npm run nightly to generate a nightly build on npm

Publish a release

Execute the following steps to publish a release:

1. Ensure your branch has been merged into master
2. Run npm run build to generate the dist directory
3. Run npm run test to validate the dist works
4. Temporarily tick the package.json version
5. Run npm run changelog to append the latest additions to the changelog
6. Manually verify and commit the changelog changes. Often times you'll want to manually add content/instructions
7. Revert the package.json version to the original version
8. Run npm version patch to tick the version and generate a git tag
9. Run npm run github-release to create the github release entry
10. Run npm publish to publish the package to npm
11. git push origin master - push changes to master

ionic-app-scripts's Issues

Ionic2 RC.0 third party scss libraries not found after live compilation

From @peterpeterparker on October 2, 2016 9:33

Hi,

I added some third party scss libraries in my application.

To accomplish that:

• "npm install"
• override sass.config.js to include these scripts.
• add "@include" in my app.component.scss

Works fine.

I only face one problem. When I'm running the server ("ionic serve"), if I make any changes to my scss files, the server gonna recompile the sass files but it isn't able, seems so, to find these third party scss files anymore. For example, the recompilation results could be:

[11:26:15]  Sass Error: line: 85, column: 1
File to import not found or unreadable: _bourbon.scss
Parent style sheet: /Users/me/Documents/projects/myproject/src/app/app.component.scss

Therefore, each time I make a scss change I've to start my server again, which isn't really convenient.

Could that be fixed?

Copied from original issue: ionic-team/ionic-framework#8401

Watching is slow

Watching has slowed down a lot using the new npm scripts. Below are samples of the time watching takes. 29 seconds is a very long wait for livereloading. The gulp task took about 3 seconds. I'm hoping there's still a lot to improve here!

Are there some config settings we can override to improve speed, until the default situation improves?

Start watch: 46 seconds

[11:18:01]  ionic-app-scripts 0.0.23
[11:18:01]  watch started ...
[11:18:01]  build dev started ...
[11:18:01]  clean started ...
[11:18:01]  clean finished in 76 ms
[11:18:01]  copy started ...
[11:18:01]  typescript compiler started ...
[11:18:02]  lint started ...
[11:18:02]  copy finished in 459 ms
[11:18:19]  typescript compiler ready in 17.15 s
[11:18:19]  bundle dev started ...
[11:18:20]  lint finished in 18.64 s
[11:18:45]  bundle dev finished in 26.51 s
[11:18:45]  sass started ...
[11:18:48]  sass finished in 2.35 s
[11:18:48]  build dev finished in 46.11 s
[11:18:48]  watch ready in 46.33 s

Livereload: 29 seconds

[11:38:25]  typescript compilation started ...
[11:38:29]  typescript compilation finished in 4.58 s
[11:38:30]  bundle dev update started ...
JS changed:   www/build/main.js
JS changed:   www/build/main.js.map
[11:38:54]  bundle dev update finished in 23.23 s
[11:38:54]  sass started ...
[11:38:54]  sass finished in 211 ms

Intellisense Webstorm doesn't work for angular 2 libraries

From @aavelyn on September 30, 2016 8:52

Short description of the problem:

Webstorm won't show autoimport/autocomplete prompts for angular 2 keywords. I think it's because all @angular dependencies aren't on first level (because of ionic-angular)

Deleting node modules and placing all @angular dependencies before ionic-angular and run npm install solves it, but not sure if it'll create conflicts (shouldn't?)

What behavior are you expecting?

Webstorm to shop classic autoimport/autocomplete prompts for @angular keywords

Which Ionic Version? Ionic 2 rc0

Copied from original issue: ionic-team/ionic-framework#8346

Add BuiltIns, Globals and JSON Rollup Plugins

^

On clean, only clean build directory and not www

In beta.11, only build directory was cleaned on clean task. I think that was much more convenient especially if you not want some of your libs to not go through entire build process. We can just drop js/styles/fonts in directory under www and build tool chain won't touch them.

What is expected: only clean build directory and not www

Automate Changelog

The commits are already in the angular change log format.

It quite trivial to add it to the release process.

Since this is a beta project and internal to the IONIC cli its hard to keep track what changes and doc's are limited, so a change log can help a lot.

Thanks!

Prod build includes local template paths

After running ionic-app-scripts build:

ionic-app-scripts 0.0.23
build prod started ...

My build/main.js has a lot of these in there:

t.createRenderComponentType("/Users/etc/etc/etc/etc/etc/node_modules/ionic-angular/components/alert/alert-component.d.ts class AlertCmp - inline template",0,vb.None,Lyt,{})

This same thing is mentioned here: angular/angular#11117, but was seemingly fixed.

Oh and the prod build also seems to generate a main.js.map, which doesn't seem necessary. It makes me wonder if a prod build might be a dev build after all. edit: PR for this in #40

Do not copy declarations.d.ts

I'm using pouchdb. Since @types/pouchdb sucks, I wrote my declarations.d.ts with declare module 'pouchdb';. But *.d.ts will not copy to .tmp folder.
How can I include 3rd party js lib which has no type define, just like pouchdb.

resolve config file path relative to root

Current behaviour resolves the path relative to the dist folder within @ionic/app-script node module.

The relative root should be the project's root, where package.json is.

In the current behaviour one must find it's way out by using ../../../../ to get to the root of the project since the actual root is now node_modules/@ionic/app-scripts/dist

Since package.json is static it's not possible to provide an absolute path without running into issues.

Memory usage while using "ionic serve"

Over time, running "ionic serve" consumes more and more memory. I've see it take over a gig after several hours of rebuilds. Killing the process frees the memory.

Custom rollup config breaks file watcher

When using a custom a custom rollup config, it gets loaded with require in util.fillConfigDefaults and the dest property is set on this config object in bundle.runBundle. This works fine the first time. When bundleUpdate is called from the watcher, the same instance is returned by require and the dest is set like this in bundle.runBundle:
rollupConfig.dest = join(context.buildDir, rollupConfig.dest);

Because it's always the same instance of rollupConfig, this will append to the dest with each watch trigger, leading to wrong paths.

See a detailed post about it here with screenshots: https://forum.ionicframework.com/t/having-a-custom-rollup-config-breaks-the-watcher/65343

commonjs-proxy paths break sass build

Rollup returns module paths with commonjs-proxy prepended if the module is a commonjs module. This then gets passed to build tasks, like sass which try to call fs.readDirSync( with this erroneous path which then fails.

commonjs-proxy:/Users/driftyadmin/apps/v2beta2/node_modules/localforage/dist

Updating AngularFire/Firebase project to new RC - @types issue

From @sicontis on September 30, 2016 8:33

Since the new RC uses @types now to install typings, I added the types from Firebase and Angularfire to my project using

npm install @types/firebase --save-dev --save-exact

It saves the types to a folder inside node_modules/@types/firebase and updates the package.json file.

Upon running the project with ionic serve, I get a whole bunch of error TS2503: Cannot find namespace 'firebase'. errors, which was fixable in the previous release with a "files": [ "firebase" ] addition to the tsconfig.json file and then running the typings install command.

Just wondering is there a fix for something similar or an extra step after the npm install?
Do the types for AngularFire/Firebase need to be updated to match the new RC?

Any ideas?

Copied from original issue: ionic-team/ionic-framework#8343

Jade templates (or others) support

There is any way to support Jade templates (or others)? I used to extend gulpfile with a task from previously version of ionic, but now better if it can be done with this tool

watch mode bundle update is not working

When in watch mode the first compilation works fine.

After an update the new rollup bundle is not updating in the browser, while code changes the browser still see's the "old" version.

The bundle is indeed updated but the destination is not right, for every update calling bundleUpdate it will call runBundle.

runBundle does this:

    rollupConfig.dest = join(context.buildDir, rollupConfig.dest);

so this will concat the directory path on itself on every call.

I have created a pull request, it is valid as long as context.buildDir is absolute.

Create separate bundles for Angular/Ionic and third party libs

Allowing multiple bundles would be useful. With single bundle when number of multiple third party libs increase there will be issue with first view. Allowing multiple bundles can address this issue. Also some of the rollup config/third party libs related issues will be addressed nicely.

1. Angular/Ionic bundle goes through rollup process
2. Third party libs can continue to use browserify or rollup

custom config files not working for PROD

Hi,

When setting the path to a config file in the package.json or using arguments in PROD mode the resolved file is always the default version of the config.

in runBundle:

  const taskInfo = (options.isProd) ? ROLLUP_PROD_TASK_INFO : ROLLUP_TASK_INFO;
  rollupConfig = fillConfigDefaults(context, rollupConfig, taskInfo);

The task is identified as PROD and sent to fillConfigDefaults.

fillConfigDefaults will load the configuration files using getConfigFileData (util.ts)

getConfigFileData(task.fullArgConfig, task.shortArgConfig, task.envConfig, null, context) || {};

Now, let's assume using config values from package.json (env). There is not way to distinguish between prod / dev in the config section so the end result is always loading xxx.config.js and not xxx.prod.config.js. getConfigFileData does not implement prod/dev file selection.

Since config inside package.json is not aware of prod/dev modes you probably need to decide on a convention to load files based on configuration preset. Something like add .prod for prod etc...

CALL_AND_RETRY_LAST allocation failed

I'm migrating to rc0 and using app-scripts version 0.0.27
with the latest ionic-cli: [email protected]

After a while running ionic serve i get the following output:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

npm
 ERR! Windows_NT 10.0.10586
npm
 ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "watch"

npm
 ERR!
 node v6.6.0

npm ERR! npm
 v3.10.8
npm ERR! code
 ELIFECYCLE
npm ERR!
 perkd@ watch: `ionic-app-scripts watch`
npm ERR! Exit status 3

npm ERR!

Any options to recognize the commonjs combined export?

I was using ng2-translate with

import { TranslateService } from 'ng2-translate'

and now the rollup complains with

ng2-translate.js does not export TranslateService

It seems rollup (or rollup-plugin-commonjs) doesn't recognize the following commonjs export which is compiled from export * from "./src/translate.service"

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}

__export(require("./src/translate.service"));
...

After changing the import like this the error disappears.

import { TranslateService } from 'ng2-translate/src/translate.service'

I'm new to rollup so don't know if it's the correct way, or is there any options to tell rollup to recognize the combined export?

Out of memory error

When I launch watch and do a few updates to the code, I get JavaScript out of memory error (FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory). I'm using version 0.0.27.

ES 6 and babel support

Hello, will you add support for ES6 code generation and Babel transpiling (similar to the old ionic-gulp-browserify-typescript-babel package)?
It would be nice to have it in the scripts "core" support, async/await support is a killer feature for many people IMO.

Logger.fail should take exception

Error messages aren't helpful enough right now, mainly due to the logger.fail calls that aren't passing in the exception through, or are merely calling toString() on it through interpolation. Example:

https://github.com/driftyco/ionic-app-scripts/blob/83df805de5ae826a73c9719eb74cd49287e573cc/src/clean.ts#L15

sourcemaps not working with rc0

I originally posted this as a comment (ionic-team/ionic-gulp-tasks#22 (comment)) in an ionic-gulp-tasks issue before realizing this is probably a more appropriate repo - oops...

Source maps appear broken with the new rc0 setup (I'm using the tabs starter with Crosswalk 2.1.0).

First of all, no form of sourcemaps are enabled by default in the starter project tsconfig.json, but that's not strictly an ionic-app-scripts issue. If you set "sourceMap": true, there will be ultimately two layers of indirection in the source map file references: main.js.map will point to ../../node_modules/ files (which work), as well as ../../.tmp/ intermediate .js files. The side-by-side intermediate .js.map files do point back to the original ../../src source files and you can see the sourceMappingURL=data:... comments in the Chrome debugger, but Chrome just ignores those references and only shows the intermediate .js file sources.

Then, if you try to inline the sourcemaps instead via inlineSourceMap and inlineSources in tsconfig as an attempt to bypass any path issues, the inlined source does make it to the intermediate js files (and the same options are mirrored in the generated tsconfig.tmp.json file), but the inlined source doesn't make it through to the www/build output. There's still only a regular www/build/main.js.map file generated without any inlined source :-(

Allocation failed - JavaScript heap out of memory

Ionic Serve runs without problems, but Ionic run iOS gives me this:
I already updated to app-scripts 0.0.27 to get #44

[16:22:46] bundle prod started ...
<--- Last few GCs --->
167123 ms: Mark-sweep 1308.5 (1434.1) -> 1308.5 (1434.1) MB, 1012.0 / 0.0 ms [allocation failure] [GC in old space requested].
168098 ms: Mark-sweep 1308.5 (1434.1) -> 1308.5 (1434.1) MB, 975.3 / 0.0 ms [allocation failure] [GC in old space requested].
169101 ms: Mark-sweep 1308.5 (1434.1) -> 1318.0 (1418.1) MB, 1002.5 / 0.0 ms [last resort gc].
170079 ms: Mark-sweep 1318.0 (1418.1) -> 1327.5 (1418.1) MB, 977.2 / 0.0 ms [last resort gc].
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x1de7fe7cfb51
1: decode(aka decode) [/Users/Jan/Documents/Wohntraum360/wohntraumapp_v2/wohntraumapp/node_modules/rollup/dist/rollup.js:~304] [pc=0x890dfd2cecf](this=0x1de7fe704381 ,mappings=0x2036de204201 <Very long string[11559331])
2: render [/Users/Jan/Documents/Wohntraum360/wohntraumapp_v2/wohntraumapp/node_modules/rollup/dist/rollup.js:8938] [pc=0x890e04420e6] (this=0x63e3a0f75d1 <a...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1:
node::Abort() [/usr/local/bin/node]
2:
node::FatalException(v8::Isolate*, v8::Localv8::Value, v8::Localv8::Message) [/usr/local/bin/node]
3:
v8::internal::V8::FatalProcessOutOfMemory(char const_, bool)
[/usr/local/bin/node]
4:
v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
5:
v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object__, v8::internal::Isolate_) [/usr/local/bin/node]
6:
0x890dfc079a7
Caught exception:
undefined

Using CommonJS modules with rollup

@adamdbradley I think you closed #3 in a rush.

angularfire2 and firebase are something you can't ignore when thinking ionic...

It's also not specific to them, it's a problem when using rollup, I think the rollup process needs to handle commonJS directories transparently.

I now have another, similar error with lodash

When I:

import { assign } from 'lodash';

I get:

[14:02:04]  bundle failed:  Error: Module /app/node_modules/lodash/lodash.js does not export assign (imported by /app/.tmp/data-source/some.service.js)

Again, there is a workaround but ionic developer shouldn't get hard time on simple tasks:

import assign from 'lodash/assign';

This is not perfect, there is a TS error:

[14:14:40]  src/data-source/feeding.service.ts(5,8): error TS1192: Module '"lodash/assign"' has no default export.

There's a switch in error between the 2, when TS is happy rollup isn't and vice versa.

BTW, rollup does a wired thing when doing:

import * as assign from 'lodash/assign';

assign will be the module, with a default property which is the assign function...

error_handler.js:45 EXCEPTION: Error in ./HomePage class HomePage - inline template:17:10 caused by: assign$2 is not a function

I know you considered #3 as someone else's problem but app-scripts is part of the ionic CLI and if the integration is not smooth you'll get ton's of complaints.
If you integrate rollup you need it to be transparent.

rollup resolved templateURL for --dev builds with non-standard src path

first my ionic src path has changed from src/app to src/mobile/app, src/pages to src/mobile/pages, etc..

using the relative path of

@Component({
  templateUrl: './about.html'
})

works on ionic-app-scripts build,
does not work on ionic-app-scripts build --dev
which produces and error of

Error reading template file, "./about.html": Error: ENOENT: no such file or directory, open '/Users/StrictDev/Documents/update/starter/src/pages/about/about.html'

when I use the templateUrl relative like

@Component({
  templateUrl: '../../../src/mobile/pages/about/about.html'
})

this templateURL works on both prod and dev ionic-app-scripts builds

https://github.com/strictd/angular2-ionic2-webpack to use as a demo.

bundle failed with moment.js

Got this error message:
bundle prod failed: Error: Cannot call a namespace ('moment')

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @ionic/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @ngrx/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected] invalid
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

ionic serve not working

With the new change the server:before npm script is executing the watch process.
The watch never ends so the server never start.

The logic should be something like build -> serve -> watch

Sass sourceMap does't work

I want to debug all css file from src/*/.scss in chrome .

First step I override the sass.config.js and set the sourceMap:true,it can generate a main.css.map file in www\build,but it does't work.

the map file are these code:

AAAA,iBAAiB;AACjB;;;;;;;;;;EAUE;AACF;EACE,wBAAwB;EACxB,yDAAyD;EACzD,2XAA2X;EAC3X,oBAAoB;EACpB,mBAAmB;CACpB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAu6BE,sBAAsB;EACtB,wBAAwB;EACxB,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;EACpB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,eAAe;EACf,oCAAoC;EACpC,mCAAmC;CACpC;;AAED;EACE,iBAAiB;CAClB;;AAED;EACE,iBAAiB;CAClB;;AAED;EACE,iB...

3rd party lib and declaration files

If I add a 3rd party module to my project and create a ./src/declarations.d.ts file definition for that module, I am able to run my app (if the definitions are correct) however the app-scripts output indicates error.

The error from the output that is meaningful is this:
[01:41:57] src/pages/home/home.ts(5,18): error TS2307: Cannot find module 'node-uuid'.

$ ionic serve

Running 'serve:before' npm script before serve
> ionic-hello-world@ watch /Users/dan/Dev/lib-test
> ionic-app-scripts watch
[01:41:55]  watch started ...
[01:41:55]  build dev started ...
[01:41:55]  clean started ...
[01:41:55]  clean finished in 1 ms
[01:41:55]  copy started ...
[01:41:55]  typescript compiler started ...
[01:41:55]  lint started ...
[01:41:55]  copy finished in 38 ms
[01:41:56]  lint finished in 440 ms
[01:41:57]  src/pages/home/home.ts(5,18): error TS2307: Cannot find module 'node-uuid'.
[01:41:57]  typescript compiler ready in 1.92 s
[01:41:57]  bundle dev started ...
[01:42:00]  rollup: Treating 'crypto' as external dependency

[01:42:01]  rollup: No name was provided for external module 'crypto' in options.globals – guessing 'crypto'

[01:42:02]  bundle dev finished in 5.11 s
[01:42:02]  sass started ...
[01:42:03]  sass finished in 912 ms
[01:42:03]  build dev finished in 7.94 s
[01:42:03]  watch ready in 8.00 s

Steps to reproduce:

1.  git clone [email protected]:danbucholtz/lib-test.git
2.  git checkout declaration-file
3.  npm install
4.  ionic serve

The output indicates error, but the app still runs which indicates the error was not legitimate. The 3rd party module works as expected in the Ionic app within the browser. To verify, open the console and view a guid being logged.

Thanks,
Dan

Provide custom rollup.prod.config.js?

Hi,

I can easily override rollup.config.js, however is it also possible to override the rollup.prod.config.js?

I haven't found a way to do this yet and I think it's needed to allow custom builds that work in prod and devmode.

target browser by default in rollup-plugin-node-resolve

Currently, if a node module is targeting both browser and node, the node version is used by default.

Of course one can overwrite the config but the default should target browser version of packages.

nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    })

apollo library not working in RC0 (rollup+commonjs circular dep issue)

From @metzc on October 2, 2016 9:30

I used the library apollo-client successfully before RC0 in an ionic project. Now the runtime crashes as soon as i import from the apollo library:

Uncaught TypeError: Cannot read property 'HTTPFetchNetworkInterface' of undefined (anonymous function) @ batchedNetworkInterface.js:75

I digged into this already and it very much looks like this is a problem due to rollup+commonjs, as is also seen with other libraries. In the case of apollo this looks like a circular dependency that the rollup commonjs plugin just can't handle (rollup/rollup-plugin-commonjs#105).

I wonder how the ionic project wants to deal with this? If Rollup isn't compatible with a lot of existing important libraries, i wonder if it is a good fit for a general purpose framework like Ionic? Maybe the good approach of rollup can be combined with some compatibility as suggested in this comment in a similar issue: ionic-team/ionic-framework#8356 (comment)

Copied from original issue: ionic-team/ionic-framework#8400

Versioned JS and CSS bundles like main-1.0.2,js

Given a version number like 1.0.2, the script should create main-1.0.2.js, main-1.0.2,css and include the same in index.html. I know how to do this in gulp but prefer to use ionic-app-scripts. One option I can think of is to customise uglify script. Any suggestions?

Custom config does not work on Windows

When trying to set a custom config file for a build step on Windows (for example, rollup.config.js), it will not find the config file, even though it is there. This can be reproduced by both setting a CLI option, or using the config in package.json. It works fine in OS X. Running on Windows 10 x64.

watch mode sass update with custom config not working

package.json contains:

"scripts": {
...
    "sass": "ionic-app-scripts --sass ./config/sass.config.js",
...
  },
  "config": {
    "ionic_sass": "./config/sass.config.js"
  },

When I run ionic serve the initial ionic-app-scripts build works OK. When I modify an SCSS file and the watch is triggered, sassConfig no longer contains the custom file but rather the default config located in this repo.

This may apply to other overrides as well.

Not happy with ionic-app-scripts

Very disappointed with the new build scripts.

1. Slower build process due to unnecessary "templateUpdate" and "bundle dev update" steps during live reload.
2. Difficult to debug main.js compared to individual script files
3. Gulp has so many plugins to customise build, do I have to roll out my own javascript config.js files now?
4. Treating www folder as a build folder (to be cleaned up) is not a good idea. I have some very large data files to be kept inside www folder, copying them during build is not an option.

Windows newline issue in ng-template

Fails with: bundle failed: SyntaxError: Unterminated string constant (18:23) in <filename> due to not checking for \r. This will probably be an issue on OSX too.

Quickfix: Change to htmlContent = htmlContent.replace(/(\r)?\n/g, '\\n'); @ https://github.com/driftyco/ionic-app-scripts/blob/master/src/plugins/ng-template.ts#L72

add TSC build step when in DEV mode

@brandyscarney Hi,

With the latest change supporting prod/dev modes the new dev mode does not work.

Looking the the change I see that if isProd you use ngc to compile TS to JS.

If not isProd you just bundle.

Since ngc wraps tsc if we omit it we need to use tsc instead otherwise bundle will use rollup on nothings... no JS output from TS files.

The reason you might missed it might be since the .tmp directory was still in place from a previous run with isProd true.

It's also an issue/feature to add: delete .tmp before a run.

SASS module traversal creates a deadlock

@adamdbradley, when the sass process is looking for sass files inside modules it might freeze the build process.

In my scenario the lodash module caused it.

The freeze/deadlock happens here

I guess the directory or a file in it get's locked and the instruction is waiting for it to get released.

Now, I know that I can add this module to the excludeModules in sass.config.js but this solution requires some understanding and deep debugging capabilities, developers shouldn't break their mind about it.

There was no error, the process just froze on sass started ... log message and nothing happen from there on...
Users might add a lot of modules, if there's no error or no handling for this issue most of them will not be able to use it.

fs-extra/readJsonSync breaks comments in tsconfig.json

TypeScript has allowed comments in tsconfig.json files for almost a year now (see microsoft/TypeScript#4987), but the current use of readJsonSync() in fs-extra to parse tsconfig.json files doesn't seem to like them.

Maybe switching to a tsconfig-aware library like https://github.com/TypeStrong/tsconfig would better support the full format?

Ionic2 RC.0: Module does not export ModuleClass error

From @andrucz on September 29, 2016 20:44

After installing the module using:

npm install --save angular2-moment

And adding it to NgModule:

import { MomentModule } from 'angular2-moment';

@NgModule({
  ...
  imports: [MomentModule]
})

And import/use in my component, I am getting this error when serving:

[17:37:53]  Error: Module c:\dev\app\node_modules\angular2-moment\index.js does not export MomentModule (imported by c:\dev\app\.tmp\app\app.module.js)
    at Module.trace (rollup.js:7677:29)
    at ModuleScope.findDeclaration (rollup.js:7300:22)
    at Scope.findDeclaration (rollup.js:5351:39)
    at Identifier.bind (rollup.js:6489:29)
    at rollup.js:5151:50
    at ArrayExpression.eachChild (rollup.js:5165:19)
    at ArrayExpression.bind (rollup.js:5151:7)
    at rollup.js:5151:50
    at Node.eachChild (rollup.js:5168:5)
    at Node.bind (rollup.js:5151:7)

The same occurs when I try to import and use other modules.

Copied from original issue: ionic-team/ionic-framework#8322

Minify cordova folders

I got speed improvements and smaller js by minifying the files 'cordova.js' and 'cordova_plugins.js' as well as the cordova 'plugins' folder. Especially for larger ionic 1 projects.

Maybe you could add this to your plugin?

Thanks!

Unit Testing with Ionic 2 RC0

From @NelsonBrandao on September 30, 2016 11:45

Short description of the problem:

I'm starting an Ionic 2 project using RC0 and I'm having trouble getting unit tests to work. Almost all the documentation found on the web is for the beta releases that still used gulp. Is there any documentation on how to set it up with the new building system?

I can see that ionic-app-scripts already checks for linter errors, is there any planning to support unit testing?

Copied from original issue: ionic-team/ionic-framework#8351

Windows path issues (directory separators)

Was getting (when run from C:\dev\ionic2):

[13:13:04]  Sass Error: line: 1, column: 19
File to import not found or unreadable: C:Þvionic2src/theme/variables.scss
Parent style sheet: stdin
[13:13:04]  sass failed:  Sass compile error

Doing sassFile.replace(/\\/g, "\\\\") @ https://github.com/driftyco/ionic-app-scripts/blob/master/src/sass.ts#L93 does the trick, but I would assume there is something better.

RC0 - doesn't build with node LTS versions v4.x but do on v5.x and v6.x

From @vukasin-nikodijevic on September 30, 2016 12:58

Short story long:
works on 5.10.1 & 6.7.0 but not on any LTS e.g 4.6.0.

All details are in forum thread:
https://forum.ionicframework.com/t/rc0-production-build-for-starter-projects-fails-serve-works-as-expected/65149/2

Copied from original issue: ionic-team/ionic-framework#8355

How to include third party css and scss?

Hey,

In Ionic Beta 11, I was overriding the sass task in gulp file to have the possibility to include third party libraries css or scss. I used to have following code in my gulpfile.js

gulp.task('sass', function(){
    return buildSass({
        sassOptions: {
            includePaths: [
                'node_modules/ionic-angular',
                'node_modules/ionicons/dist/scss',
                'node_modules/cropperjs/dist',
                'node_modules/bourbon/app/assets/stylesheets',
                'node_modules/sass-mediaqueries'
            ]
        }
    });
});

Is there a way to achieve that in ionic-app-scripts aka how do I include third libraries css and scss in the build process?

Thx in advance for your help

ngc task forces es5 output, can't use third-party transpiler

Prior to rc0, I was using TypeScript to generate ES2015, and then running the result through babel. I did this because we make extensive use of async functions, which are not supported in TypeScript's compilation of ES5 at this time.

rc0 now forces in the ionic-app-scripts ngc script that the target be set as es5, which breaks this workflow and prevents the introduction of a third-party transpiler.

We rely on the use of async functions heavily in our code.

Using angularfire2 with firebase

Hi,

Trying to ionic serve my code (using beta.12 branch for app-base and tabs app template) I get this error:

[01:54:08]  bundle failed:  Error: Module app/node_modules/angularfire2/node_modules/firebase/firebase-node.js does not export auth (imported by app/node_modules/angularfire2/auth/firebase_sdk_auth_backend.js)

It appears to be an error in the rollup bundling process (ngc completes ok).
Not sure if it's a problem with the integration of the bundle of angularfire2 with rollup or some config issue for rollup...

removing all imports of angularfire2 (and code that uses it) and the everything is fine.

Thanks, Shlomi.

Ionicons are not copied on serve

When running ionic serve the ionicons are not copied into the assets folder.
The copy task works and also copies the fonts, but apparently they are missing if called with serve.
I tried all this on a freshly started ionic --v2 app

I'd be happy to provide more information in case you need it.

edit here's my info http://i.imgur.com/efXoE3q.png
The OS is actually win10