A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
MIT License
Bot releases are hidden (Show)
Published by danbucholtz over 7 years ago
ionic-angular
should be set to version 3.5.0
.
npm install [email protected] --save --save-exact
There were major improvements made to navigation in this release of ionic-angular
. Specifically, we updated Ionic to support a concept of n
root navigation elements, instead of just one. This will enable first-class url support for things split-pane
. Before 3.5.0
, only one section of the screen could be represented in the URL. With these changes, multiple sections can be represented. Another large change was improving the behavior surrounding browser behaviors, such as the back-and-forward buttons, as well as refresh. In general, Ionic should work much more intuitively in a web browser now.
As a result of these improvements, if you're using deep linking, the urls of the application will be different with 3.5.0
than they were with previous Ionic releases. The URLs will likely change again in the near future with the next round of navigation improvements too. For now, we don't recommend using href
attributes in the application. Using the navPush
and navPop
directives is a better option for now while URL support is being built-out.
Published by danbucholtz over 7 years ago
ionic-angular
should be set to version 3.4.0
in the package.json dependency list. The latest @angular
release 4.1.3
is also supported. Feel free to update apps by updating the package.json
dependencies to match below.
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/core": "3.12.1",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.4.1",
"ionicons": "3.0.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.3.4"
}
Published by danbucholtz over 7 years ago
ionic-angular
now supports the latest @angular
(4.1.2), and typescript
(2.3.3) versions. Feel free to update apps by updating the package.json
dependencies to match below:
"dependencies": {
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/compiler-cli": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@ionic-native/core": "3.6.1",
"@ionic-native/splash-screen": "3.6.1",
"@ionic-native/status-bar": "3.6.1",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.3.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.3.3"
}
Another optional step is to remove the src/declarations.d.ts
file. This is a legacy file introduced early with ionic-angular
projects to improve compatibility between TypeScript and third-party libraries. Due to improvements in TypeScript, this file is no longer necessary. By removing this file, the TypeScript compiler will be able to provide more accurate error messages for import
statements.
Published by brandyscarney over 7 years ago
Update your package.json to match the following dependencies, remove the existing node_modules
directory, and then run npm install
:
"dependencies": {
"@angular/common": "4.1.0",
"@angular/compiler": "4.1.0",
"@angular/compiler-cli": "4.1.0",
"@angular/core": "4.1.0",
"@angular/forms": "4.1.0",
"@angular/http": "4.1.0",
"@angular/platform-browser": "4.1.0",
"@angular/platform-browser-dynamic": "4.1.0",
"@ionic-native/core": "3.6.1",
"@ionic-native/splash-screen": "3.6.1",
"@ionic-native/status-bar": "3.6.1",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.2.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"typescript": "2.2.1"
}
Using v3 of the Ionic CLI? Make sure to add @ionic/cli-plugin-ionic-angular
and @ionic/cli-plugin-cordova
to your devDependencies
. Read more about this on our blog.
Published by brandyscarney over 7 years ago
Published by brandyscarney over 7 years ago
Update your package.json to match the following dependencies, remove the existing node_modules
directory, and then run npm install
:
"dependencies": {
"@angular/common": "4.0.2",
"@angular/compiler": "4.0.2",
"@angular/compiler-cli": "4.0.2",
"@angular/core": "4.0.2",
"@angular/forms": "4.0.2",
"@angular/http": "4.0.2",
"@angular/platform-browser": "4.0.2",
"@angular/platform-browser-dynamic": "4.0.2",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.1.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.4",
"typescript": "~2.2.1"
},
Published by brandyscarney over 7 years ago
With this release comes a major update to Angular (Angular 4.0!), the latest version of TypeScript, and some optional structural changes to your application.
node_modules
directory, and then run npm install
:"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
}
BrowserModule
in your app/app.module.ts
file:import { BrowserModule } from '@angular/platform-browser';
and then add it to the imports in the same file:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
HttpModule
in your app/app.module.ts
file:imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
And that’s it! Your app should still function the same without any issues.
complete
if the state isn't loading (58b57c0)Removed the deprecated (old) grid. See the blog post for more information including steps to migrate:
http://blog.ionic.io/build-awesome-desktop-apps-with-ionics-new-responsive-grid/
The following selectors to style the text color of the native text elements have been removed:
h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]):not([ion-fab]), p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]
These have been throwing a deprecation warning since rc.3 but still working. They are officially gone and therefore these elements will not get the color unless the ion-text
attribute is added. Please see the documentation for more information: http://ionicframework.com/docs/api/components/typography/Typography/
The following properties and functions have been printing console warnings and are officially removed:
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.
Published by brandyscarney over 7 years ago
waitFor
method to InfiniteScroll (84e25a1)Published by brandyscarney over 7 years ago
package.json
to match the following dependencies, remove the existing node_modules
directory, and then run npm install
: "dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
}
Note: If you are using ionic-storage
, you need to update it to 2.0.0
or you will run into an error similar to this: Error: Can't resolve all parameters for Storage: (?, ?).
. For more information, see the Storage Documentation.
As part of our initiative to improve desktop support we have introduced a new component called Split Pane. Split Pane makes it possible to easily create multi-view layouts. It allows elements, such as a menu or another navigation pane, to be displayed on large viewports. Split Pane can be used to achieve a layout similar to the Gmail (Android) or Mail (Apple) applications.
Ionic has been updated to depend on Angular 2.4.8, which is the latest version that we have tested and confirmed to be compatible with Ionic. This means that updating to the 2.2.0 release of Ionic will automatically work with all of the performance updates, bug fixes and features in Angular 2.4.8!
We recently released the 2.0.0 version of ionic-storage
. If you are using Ionic Storage in your application, you need to update to this version of ionic-storage
. Attempting to use an older version of ionic-storage
with Ionic 2.2.0 will cause errors. You can read about how to update to ionic-storage
2.0.0 here.
Published by brandyscarney over 7 years ago
Published by brandyscarney over 7 years ago
Update the framework:
npm install --save --save-exact [email protected]
Change the import for ionicons in your theme/variables.scss
file from this:
@import "ionicons";
to
@import "ionic.ionicons";
See the conference app for an example. This fixes a bug with ionicons getting styled incorrectly.
Published by brandyscarney almost 8 years ago
npm uninstall -g ionic
npm install -g ionic
package.json
to match the following dependencies, remove existing node_modules
directory, and then run npm install
:"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.5",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26",
"sw-toolbox": "3.4.0"
},
"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"typescript": "2.0.9"
}
Note: please ensure you are using the exact TypeScript and Angular versions listed above. There have been issues with the latest versions.
Internal refactor completed in order to improve tree shaking and dead code removal. The public API, with the exception of the slides component, has stayed the same. However, internally many changes were required so bundlers could better exclude modules which should not be bundled. Ultimately most changes resorted to removing references to window
or document
, or a module that referenced one of those.
Service Worker Toolbox (sw-toolbox) is now built in to the starters and conference app. This allows you to customize your service worker using a high level API instead of using the raw service worker API. Our out of the box configuration will give your app a good, network independent experience but you can easily customize this to fit your app’s unique use cases.
As part of the refactor to improve tree shaking the TextArea
has been merged into the TextInput
class. This means that if you are importing the TextArea
class you will need to change this to be TextInput
.
ion-slides was refactored to remove the external dependencies, and rewritten in TypeScript/ES6 modules to again improve tree shaking abilities. In order to work with tree shaking, the options
attribute had to be removed. See the Slides API Documentation for usage information.
Published by brandyscarney almost 8 years ago
npm uninstall -g ionic
npm install -g ionic
package.json
file:"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
@ionic/app-scripts
was recentlyapplyTo
method to ionItemReorder
event (7e6d73b)Renamed the no-shadow
attribute for Material Design header, footer, and
tabs to no-border
. This is the same attribute used by iOS mode.
Moved the border on iOS from each toolbar to the last toolbar in a header, and the
first toolbar in a footer. Adding no-border
to the header or footer will hide the border.
For example, the following code:
<ion-header>
<ion-navbar no-border-bottom></ion-navbar>
<ion-toolbar no-border-top></ion-toolbar>
</ion-header>
will now become:
<ion-header>
<ion-navbar></ion-navbar>
<ion-toolbar></ion-toolbar>
</ion-header>
and if you decide you don't want the border just add no-border
to the header: <ion-header no-border>
.
This means that no-border-top
and no-border-bottom
will not work on iOS and should
be removed from any toolbars using it.
The argument passed to the events.subscribe(args)
function is no longer an array of parameters.
Instead, it will be called with the same parameters used in events.publish(arg1, arg2)
For example, the following code:
events.subscribe('user:created', args => {
console.log('Welcome ', args[0], ' at ', args[1]);
});
will now become:
events.subscribe('user:created', (user, time) => {
console.log('Welcome ', user, ' at ', time);
});