Help us test Webpack support in Ionic 2 App Scripts!

danbucholtz · October 26, 2016, 5:46pm

Angular CLI is probably always going to be faster as it stands today. We think we offer a good compromise. 2 seconds vs 3 seconds is not worth fretting over in my opinion. Both are pretty fast. We’ll keep trying to get faster but for now there are more pressing issues to attend to.

The Angular CLI is not without it’s own host of issues. In some ways, we think we’re ahead of them. In other ways, we’re playing catch up. I’m confident we’ll get where we need to be.

@pivalig, Sorry, that isn’t really enough to work off of. Can you try to track the issue down and if it’s an issue with the build process itself vs the code/library can you file an issue here?

Thanks,
Dan

mirkonasato · October 26, 2016, 6:11pm

I mentioned the Angular CLI just for reference, as speed will vary on different machines. 3 secs is not too bad, but I suspect on slower machines the difference will be more significant.

I think there’s actually another thing that makes the webpack-dev-server nicer to work with: as soon as you save a file you see in the devtools console [WDS] App updated. Recompiling...

It’s a small detail but it does helps with the “perceived speed” because you know straight away that the change has been detected, even if it’s going to take a bit longer before it reloads the page. Without that you just wait there thinking “is it doing anything?”.

Just an idea.

impyraCom · October 27, 2016, 3:18am

I was having various issues trying to use Webpack with Ionic and Angular, especially when it came to caching/refreshing files and HMR. Luckily, I stumbled across this github repo: https://github.com/qdouble/angular-webpack2-starter. (This is not AngularClass.) This repo demonstrates quite a lot and does it really well. I got HMR, lazy loading, and AOT (with and without Angular Universal) all setup in a day. And that included integrating it all with Ionic. While I’m not using the Ionic CLI directly, I am using some of the scripts from ionic-app-scrpts.

I figured this repo may have some some ideas that could help you out so thought I’d share. It also uses some libraries that I haven’t had any experience with yet, like Yarn and NGRX (specifically the ‘store’). So, if you like trying new things, this repo should do the trick.

Also, let me know if you need help with anything.

Todd

nylex · October 27, 2016, 5:26am

yep i’m using the same starter for my other project its quite good.

atx · October 27, 2016, 7:11am

Hey Dan, thanks for driving this one home. As a early adopter of RC0/1 I had my share of trouble with rollup and dependencies which worked with ionic beta. now with app-scripts@beta these tend to work as expected!

So just Kudos! Great work!

highwaychile · October 27, 2016, 10:50am

I now tried the latest beta 2 of webpack support and I have the problem that ionic serve creates for every .ts file in my src folder one .js and one .js.map file, in the same folder which is quite annoying. Is there a way to make it save these files in a separate folder?

Edit: Another problem: When running ionic-app-scripts build --dev, the program outputs “build dev finished” and does nothing afterwards.

Marwan22 · October 27, 2016, 12:36pm

Hi @danbucholtz I’ve tryed to start a new project using @ionic/app-scripts@beta, and Webpack

is webpack the default package bundler in app-scripts@beta ?
did I have to uninstall rollup as well ?

I’ve started a basic ionic 2 project and added the main client-side modules
npm install meteor-client-side
npm install angular2-meteor

if I try to import something from those packages I gets errors like :

[14:21:50] bundle failed: Illegal reassignment to import ‘commonjsHelpers’
[14:21:50] ionic-app-script task: “build”
[14:21:50] Error: Illegal reassignment to import ‘commonjsHelpers’

when I do import ‘meteor-client-side’ in app.component for example.

What is disturbing is if I start a meteor project instead and add Ionic2 - rc0 in it everything seems to work fine.

There is a boilerplate of a meteor base with latest ionic2 here if needed :

Thanks for Ionic2 by the way it’s very usefull.

dvuika · October 27, 2016, 1:25pm

Hi @danbucholtz,

can you please provide minimal project template for the external library that can be used with the latest app scripts to demonstrate reusable libraries work? Optionally could you explain how this example could be made working with app scripts (webpack)? https://github.com/DenisVuyka/ionic2-issue

For last 3 weeks since migrating from beta 11 I’m desperately trying to get at least any ‘empty’ project working with RC.x tools with no luck.

danbucholtz · October 27, 2016, 2:30pm

@Marwan22,

If you remove/rename the rollup config, it will default to use Webpack. Webpack is the default.

You can also specify ionic_bundler as webpack in the package.json config section. See the docs here.

@dvuika,
What issue are you having and with what lib? Try this once:

npm install -g ionic@latest
ionic start myProject blank --v2
cd myProject
npm install @ionic/app-scripts@beta
ionic serve

That should work for you. If it doesn’t, please let me know the error message.

Thanks,
Dan

danbucholtz · October 27, 2016, 2:31pm

@highwaychile,

It should not save the .js and .js.map files to the src folder. It should save them to the .tmp folder. Are you doing something unique there? Are you overriding the .tmp directory per the docs?

Thanks,
Dan

dvuika · October 27, 2016, 2:48pm

I see that it uses webpack now, not rollup. Upon startup (ionic serve) the browser error is “Uncaught Error: Unexpected value ‘SamplesModule’ imported by the module ‘AppModule’”.

All I do is ‘npm install’ my demo library, and change app.module.ts

import { SamplesModule } from 'demo-sample01';

@NgModule({
  ...
  imports: [
    IonicModule.forRoot(MyApp),
    SamplesModule
  ],
  ...
})

Thanks,
Denys

danbucholtz · October 27, 2016, 2:59pm

@dvuika,

Is SamplesModule an NgModule export? Can you review the docs on Angular Modules and confirm? Admittedly, it is complicated. There are javascript/typescript classes which are JS modules, and then there are NgModules which are a separate thing.

Thanks,
Dan

nylex · October 27, 2016, 4:39pm

So i switched to webpack and i am back to life, from 25 seconds ts updates to now only 4-6 seconds. This is bearable but 25 seconds was a pain to wait. Thanks ionic team.

nylex · October 27, 2016, 5:29pm

any idea how can i do ionic run android in a dev mode?

danbucholtz · October 28, 2016, 2:22am

You can add --dev to the npm script for build in the package.json.

Thanks,
Dan

dvuika · October 28, 2016, 8:28am

This project works with angular 2 projects without any problem. The only problem I have is running it with Ionic.

So far I’ve been trying to get it working for a month now without any responses here, on github and twitter. You guys just keep disappearing when asked about guidelines for shared libraries.

I would be more than happy if you provide any other basic template that works fine with whatever configuration and bundler you prefer this week.

danbucholtz · October 28, 2016, 1:21pm

Hi @dvuika,

I’m sorry that’s been your experience. We are all very busy so sometimes we lose track of this. Since we allowed Webpack support, most third party libraries are just working without issue. In general, just make any library that works in the web and it should be fine. Commonjs, Typescript, whatever. If it is an NgModule library (which most aren’t), then it needs to be pre-compiled with NGC and include the .metadata.json files.

I will check out your project and give some feedback. It looks fine at first glance. I am not sure why it wouldn’t work with Ionic but I will dig in now.

Thanks,
Dan

dvuika · October 28, 2016, 1:33pm

Thanks Dan, much appreciated. Even a small gist with package.json and absolute minimum to get it working would be more than enough. I just need anything to migrate code to and keep working.

Thanks,
Denys

danbucholtz · October 28, 2016, 1:54pm

Hi @dvuika,

I was unable to build your library out of the box due to it not depending on @angular/compiler-cli. I added an entry for @angular/compiler-cli@0.6.2 since that is what ionic-angular is set up to use. I’m not sure if that makes a difference or not.

Your library looks like it is set-up correctly from a distribution perspective. You’re shipping esm modules (es2015 module headers, es5 body content). I did not do the bundling as that step didn’t work either, but I doubt you want to do that to get started anyway.

I think the part that you’re missing is how to import the module in a separate project.
See the code we wrote here

github.com

ionic-team/ionic/blob/master/src/module.ts

/**
 * Import Angular
 */
import { ANALYZE_FOR_ENTRY_COMPONENTS, APP_INITIALIZER, ComponentFactoryResolver, Inject, Injector, ModuleWithProviders, NgModule, NgZone, Optional } from '@angular/core';
import { APP_BASE_HREF, HashLocationStrategy, Location, LocationStrategy, PathLocationStrategy, PlatformLocation } from '@angular/common';
import { DOCUMENT, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

/**
 * Import Other
 */
import { DeepLinkConfig } from './navigation/nav-util';

/**
 * Global Providers
 */

import { App } from './components/app/app';
import { AppRootToken } from './components/app/app-root';

This file has been truncated. show original

to provide the import in the NgModule in Ionic apps.

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

I don’t have time to do a deeper dive right now. I will try to make some time in the next week to create starter projects for both regular modern libs (Typescript + esm) and then an angular NgModule lib as well. Sound fair? In general, any code that can run with ngc in an Angular project can be run in an Ionic project. Using the angular-cli and utilizing ngc may be a good path to troubleshoot since it takes Ionic out of the equation.

Thanks,
Dan

dvuika · October 28, 2016, 2:14pm

Thanks for feedback, will review the code.

Regards,
Denys

Topic		Replies	Views
Anyone else giving up on RC0? Rolling back to Beta 11! ionic-v3	51	6100	November 18, 2016
ATTENTION: Upcoming Ionic 2 Starter Changes ionic-v3	30	20391	November 10, 2016
HOWTO: webpack ionic-v3	29	27393	July 12, 2017
RC.0: how do you use the Chrome Debugger with the Rollup bundler? ionic-v3	55	9772	October 25, 2016
Ionic-app-scripts for normal web applications ionic-v3	1	322	April 7, 2017

Help us test Webpack support in Ionic 2 App Scripts!

Related topics