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>
Slides
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.
Note
There are a few known issue with SplitPane and Deeplinker. They will be addressed in 3.1
Features
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.
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.
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
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.
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.
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: https://github.com/roblouie/ionic-3-beta
Any ideas?
Edit: Also I did run the node script mentioned in the doc, didn’t seem to do anything though?
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:
Thanks Dan, once I get the chance to dig into it hopefully it will become more clear. I was basically referring to this: https://angular.io/docs/ts/latest/guide/style-guide.html#!#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.
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: https://github.com/roblouie/ionic3-beta-simple.
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).
Big thanks to @mhartington for giving me a PR, and to @brandyshea for help . 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: https://github.com/roblouie/ionic-3-beta
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?
. 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: