Git Product home page Git Product logo

ionicthemes / ionic4-starter-app-tutorial Goto Github PK

View Code? Open in Web Editor NEW
126.0 11.0 102.0 3.05 MB

Ionic 4 To Do List App. FREE Ionic 4 example app. Learn how to start using Ionic 4 to create a simple app with lists, forms and navigation.

Home Page: https://ionicthemes.com/tutorials/about/ionic-4-vs-ionic-3

License: MIT License

JavaScript 6.70% TypeScript 69.93% HTML 11.56% CSS 11.80%
ionic4 ionicframework ionic-framework ionic-4 ionic-starter ionic-tutorial angular angular7 ionic

ionic4-starter-app-tutorial's Introduction

Ionic 4 Starter App

About this repo

This repo is the code of an Ionic 4 starter app that we created as part of a Getting started with Ionic 4 tutorial. In the following tutorial your will learn the differences between Ionic 3 and Ionic 4 and all the new concepts about Ionic 4:

Find more Ionic 4 tutorials and starter apps in https://ionicthemes.com

Install this Ionic 4 starter app

npm install

Browse Ionic 4 app

ionic serve

Demo

https://www.youtube.com/watch?v=COTmXyXg5rU

Get a premium Ionic 5 Starter App

Did you know that we recently released Ionic 5 Full Starter App? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It is also a PWA and has a score of 100 in lighthouse. Try it on your phone as a PWA to see the magic!

It also has lots of forms and validations examples.

ionic4-starter-app-tutorial's People

Contributors

dependabot[bot] avatar djabif avatar gonzad77 avatar jonjonsiler avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

vevedh ionic4-toolbox 87abhii christian-trisolini byteming steflight abrjpyalmbrand mixuala iravithakur davidtoska soniyakudroli seraphims solvingman harrymedinajr forkedit fidaulis vtxyer otorocket yatimisi nareshsavillasns mahmoudtokura bilelkh atoianavetik ranyatrabelsi bitce alkdkei kamleshwebtech mateus456 nditah suprcodr gi7alb3 arberd valvesjr studuino denymm jhonsmall flastowizka johnsonmauro thwu 0x38 smehta2 ediri websitedesignanddeveloper shyam-santra habibtalib ggolfko lydia-sebastian jmb12686 lucy1993 sagwadie mystogab markusdom barayuda sarahmustafaa guilhermeaugustoferreira jonjonsiler ideiagrupo sirtxo saber13812002 jamshan zengskie chanakaweerasinghe peterennis natthaponsoisangwan dave20170118 rid3thespiral santu1994 shroud1995 hhzl redblow eclipse446 ma571win tripoworld zilveer zwoch wellsmitch androidmanikandan5689 sridharcool0005 initru isabelpildain vidhema cosnofski mh0132345 scorobogaci andaniel2029 ajay3009 leonelngande lijin820 zhenghaiye anatole72 acsewer zainabadel501 lquintero1979 aspojo ksarpotdar aribowoabdurrahman mikegikas bouchendira

ionic4-starter-app-tutorial's Issues

Tests

It would be incredibly helpful to those learning ionic4 if you could make unit and e2e tests.

Cordova not available on browser console

Browser console has few warnings and HTTP operations are not working please advise.

Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Failed to compile.

Dear,
When I run the project,I faced the fowling error,
any solution for this?

[ng] ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
[ng] node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
[ng] node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.
[ng] node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: ';' expected.
[ng] node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: ';' expected.
[ng] node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: Expression expected.

Example Shadow DOM Styling

It would be nice if there was an example of how to style the Ionic components using CSS variables. Judging by comments on articles about Ionic 4, styling the components seems to be one of the major challenges for people upgrading.

Failed to compile

Cannot find module 'node-sass'

ng] i ｢wdm｣: wait until bundle finished: /
[ng]
[ng] Date: 2019-05-27T00:36:00.644Z
[ng] Hash: 542b7b36561f690384e9
[ng] Time: 9693ms
[ng]
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module 'node-sass'

Complete Log here:

PS D:\WS\Ionic\ionic4-starter-app> ionic serve

ng run app:serve --host=0.0.0.0 --port=8100
[ng] ****************************************************************************************
[ng] This is a simple server for use in testing or debugging Angular applications locally.
[ng] It hasn't been reviewed for security issues.
[ng] DON'T USE IT FOR PRODUCTION!
[ng] ****************************************************************************************

[INFO] Development server running!

   Local: http://localhost:8100
   External: http://192.168.1.43:8100

   Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] i ｢wdm｣: wait until bundle finished: /
[ng]
[ng] Date: 2019-05-27T00:36:00.644Z
[ng] Hash: 542b7b36561f690384e9
[ng] Time: 9693ms
[ng]
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module 'node-sass'
[ng] Require stack:
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\loadLoader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\LoaderRunner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModule.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModuleFactory.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\Compiler.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\webpack.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\webpack\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-angular\src\dev-server\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\architect.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\architect-command.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\commands\build-impl.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\export-ref.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\utilities\json-schema.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\command-runner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\cli\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\init.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\bin\ng
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[ng] at Module.require (internal/modules/cjs/loader.js:681:19)
[ng] at require (internal/modules/cjs/helpers.js:16:16)
[ng] at Object.sassLoader (D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js:46:72)
[ng] ERROR in ./src/theme/variables.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/theme/variables.scss)
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module 'node-sass'
[ng] Require stack:
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\loadLoader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\LoaderRunner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModule.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModuleFactory.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\Compiler.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\webpack.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\webpack\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-angular\src\dev-server\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\architect.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\architect-command.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\commands\build-impl.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\export-ref.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\utilities\json-schema.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\command-runner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\cli\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\init.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\bin\ng
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[ng] at Module.require (internal/modules/cjs/loader.js:681:19)
[ng] at require (internal/modules/cjs/helpers.js:16:16)
[ng] at Object.sassLoader (D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js:46:72)
[ng] ERROR in ./src/app/pages/new-item/new-item.page.scss
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module 'node-sass'
[ng] Require stack:
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\loadLoader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\LoaderRunner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModule.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModuleFactory.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\Compiler.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\webpack.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\webpack\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-angular\src\dev-server\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\architect.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\architect-command.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\commands\build-impl.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\export-ref.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\utilities\json-schema.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\command-runner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\cli\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\init.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\bin\ng
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[ng] at Module.require (internal/modules/cjs/loader.js:681:19)
[ng] at require (internal/modules/cjs/helpers.js:16:16)
[ng] at Object.sassLoader (D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js:46:72)
[ng] ERROR in ./src/app/pages/update-item/update-item.page.scss
[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] Error: Cannot find module 'node-sass'
[ng] Require stack:
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\loadLoader.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\loader-runner\lib\LoaderRunner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModule.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\NormalModuleFactory.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\Compiler.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules\webpack\lib\webpack.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\webpack\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-webpack\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\build-angular\src\dev-server\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\architect.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\architect\src\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\architect-command.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\commands\build-impl.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\export-ref.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular-devkit\schematics\tools\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\utilities\json-schema.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\models\command-runner.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\cli\index.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\lib\init.js
[ng] - D:\WS\Ionic\ionic4-starter-app\node_modules@angular\cli\bin\ng
[ng] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
[ng] at Function.Module._load (internal/modules/cjs/loader.js:527:27)
[ng] at Module.require (internal/modules/cjs/loader.js:681:19)
[ng] at require (internal/modules/cjs/helpers.js:16:16)
[ng] at Object.sassLoader (D:\WS\Ionic\ionic4-starter-app\node_modules\sass-loader\lib\loader.js:46:72)
[ng] chunk {common} common.js, common.js.map (common) 21.6 kB [rendered]
[ng] chunk {main} main.js, main.js.map (main) 33.6 kB [initial] [rendered]
[ng] chunk {pages-home-home-module} pages-home-home-module.js, pages-home-home-module.js.map (pages-home-home-module) 6.8 kB [rendered]
[ng] chunk {pages-new-item-new-item-module} pages-new-item-new-item-module.js, pages-new-item-new-item-module.js.map (pages-new-item-new-item-module) 10.5 kB [rendered]
[ng] chunk {pages-update-item-update-item-module} pages-update-item-update-item-module.js, pages-update-item-update-item-module.js.map (pages-update-item-update-item-module) 11.3 kB [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 9 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 23.1 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.26 MB [initial] [rendered]
[ng] i ｢wdm｣: Failed to compile.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.