Ionic 3.0.0 Beta!

Hey Hey Hey! So we’ve been hard at work on the next release of Ionic and we’re pleased to announce a beta release of Ionic 3.0.0! :tada:

To update to this beta, please follow the upgrade instructions here:
##Ionic 3 Update Guide

Breaking Changes


The old grid has been removed, please update to the new responsive grid:


Style selectors have been removed, so you’ll need to add the ion-text attribute to add color to native HTML elements.

Previously you could write:

<h1 color="secondary"> Hello World </h1>

Now it should be:

<h1 ion-text color="secondary"> Hello World </h1>


All deprecated slide options and inputs have been removed. These had console warns, so they shouldn’t have been in use anymore:

  • Slides input options has been removed. Please use the input properties instead.
  • Slide event ionWillChange has been removed, please use ionSlideWillChange instead.
  • Slide event ionDidChange has been removed, please use ionSlideDidChange instead.
  • Slide event ionDrag has been removed, please use ionSlideDrag instead.
  • Slides getSlider() method has been removed, please use the instance of ion-slides.

There are a few known issue with SplitPane and Deeplinker. They will be addressed in 3.1


  • Update to Angular 4.0.0.
  • Update to latest Typescript, 2.2.x
  • Lazy loading of page components

To take advantage of lazy loading components in your app, it’s highly recommended that you follow the steps in the google doc, as this will provide a substantial improvement in startup time.

For a reference of breaking changes in Angular, please see their changelog:


Wicked - gonna give it a try today! :smiley:

Edit: Question… are some of the issues with ionic CLI 3.0.0-beta.4 also being looked at with this? I opened an issue the other day on GitHub about ionic update authentication failure.

What does one do with custom directives/components?
And do we import pipes in each page module that we need the respective pipes on?

For custom directives/components/pipes we suggest wrapping these as modules as well.

I have an example project were a custom pipe is wrapped as a module.


Fyi your package.json has the wrong double quote at the end of the zone.js version (after the 4) which breaks the json if you copy/paste it. If only I could do a PR on google docs :slight_smile:


Grr…damn you “smart” quotes. I’ll fix it, thanks for the headsup

1 Like

My biggest question is what about services? If everything is lazy loaded, how do we ensure they are singletons? In regular Angular we can provide them at the module level so they are available at the root injector, but if every module is lazy loaded…how will this work?

This is the first thing I want to figure out in Ionic 3. Maybe you can provide the answer up front? I want to be building reusable modules that represent a feature group and using folder-by-feature, so my services will be in the same module as any related components. How do I ensure those are singletons? Is it the same as vanilla Angular?


Services are always singletons. If you’re using a service across multiple pages, you could consider putting it into a shared NgModule and importing it in both page NgModules, or even the root NgModule - though putting it in the root NgModule will slightly slow down start-up time. My personal opinion - put it in the root NgModule for now and move it if it becomes an issue.

We have more work to do with lazy loading. Eventually I’d like to make it easy for developer to lazy load their own services, etc.


1 Like

One more thing, if you’re using the ionic_experimental_manual_treeshaking flag, there is a good chance things won’t work as expected due to Angular compiler changes. We are working with the angular team to figure out how we can facilitate tree shaking with Webpack without this flag and the logic we wrote.


Also, the example package.json update includes the in-app-browser from ionic-native, but not the status bar, which means as is most peoples project will probably break? Obviously each project should get it’s own proper ionic native plugins, just seems like by default though we should have status bar since the starter projects include it.

1 Like

Okay, I followed the instructions directly from the Google doc, but I ended up with the exact same error I mentioned in the Slack channel yesterday. Something is up with the webpack minification (I think?), where this line: return Promise.all(ids.slice(1).map(__webpack_require__.e)).then(function() { doesn’t work because there is no__webpack_require__.e. Seems like minification isn’t right?

I deleted my node modules and made my package.json match yours directly. I double checked my components and modules to make sure they were set up correctly. I also tried reverting Ionic globally to the last stable version (I was on the beta for cli 3.x). Still can’t get any farther than yesterday, not sure what’s up. Sample project on github here:

Any ideas?

Edit: Also I did run the node script mentioned in the doc, didn’t seem to do anything though?

1 Like

You’re correct. Sorry when I copied the package over it seems I took it from the conference app ( I’ve updated it, thanks!

So, I also downloaded the sample project listed here and it does work because webpack_require__.e does exist in it. Yet in mine it doesn’t. Can you clarify where this comes from so I can make mine match? Something seems just a little off:

My project:

The example project:

You can see my version doesn’t have it, yet the example version does. Not sure where the disconnect is here.

Thanks Dan, once I get the chance to dig into it hopefully it will become more clear. I was basically referring to this:!#04-11 where the style guide says to import the core module directly into the app module so the services are available to all. If you don’t do that and instead import them into the lazy loaded module the lazy loaded version will get a new copy.

Just couldn’t wrap my head around it at first with the different Ionic style, but I think it actually works the same way, as you say just import it into the main module.

What sample project?

Yours, the star-track one. It starts up but mine does not. Still can’t figure out why. It’s definitely due to that webpack issue, but I don’t know why I have the webpack issue.

So, started a whole new project from scratch. Used the blank starter to keep it as simple as possible. I added a second page for the sole reason of testing lazy loading. It works until I click the button that pushes the new page onto the nav stack, but when I push it via a string as described in the docs, then I get the other error message I got yesterday and posted about in Slack:

Uncaught (in promise): Error: Cannot find module '..pagessecond-pagesecond-page.module'. Error: Cannot find module '..pagessecond-pagesecond-page.module'. at y (http://localhost:8100/build/polyfills.js:3:7590) at webpackAsyncContext (http://localhost:8100/build/main.js:44873:25) at loadAndCompile (http://localhost:8100/build/main.js:76123:35)

I’m super excited about Ionic 3, but of course I know it’s just a beta, there’s going to be issues, but so far I can’t get any farther than I did on my own yesterday by just looking through the code. I have a github here:

If anyone can help me out on this it would be greatly appreciated. I can’t figure out what config issue is different in my project than in the start-track-ionic example (I also tested copying the package.json from that project, which is quite different, but no luck still).

1 Like

Big thanks to @mhartington for giving me a PR, and to @brandyshea for help :bow:. I now have a running version (EDIT: On OSX only, still broken with the same error on Windows)! The repo has been updated for others who need help:

Sounds like lazy loading is still being tweaked so as of now that google doc is a little off. It’s just a beta so no surprises here, but for now anyone else who wants to set this up should be able to figure it out from the github repo.

What hapens if i have more than one entry page? For example Login page for unauthenticated user and another Page for authenticated user? Should i put both modules in App module imports?