ionic-team / ionic-stencil-hn-app Goto Github PK
View Code? Open in Web Editor NEWIonic Stencil HackerNews App
Home Page: https://corehacker-10883.firebaseapp.com/
License: MIT License
Ionic Stencil HackerNews App
Home Page: https://corehacker-10883.firebaseapp.com/
License: MIT License
The button on the comment page is written as:
<ion-button slot="start">
which is causing the height of the toolbar to be larger & covering content (created issue ionic-team/stencil#89 for the fact content doesn't adjust properly).
It should be written as the following though:
<ion-buttons slot="start">
<ion-button>
I'm not sure if it "runs out" of data or if the fetch isn't working properly or something, but by clicking "next" until I get to page 10 it stops changing the content. I can continue clicking next as much as I want but nothing changes. It should either stop showing me "next" once there are no ore pages or grab the right data if it exists:
The one being used looks weird.
For example, navigating to https://corehacker-10883.firebaseapp.com/news/3 does not go to the 3rd page, but to the first page. However, navigating to specific comment page works fine, i.e. https://corehacker-10883.firebaseapp.com/comments/16869488. Great stuff otherwise.
Service workers works perfectly on dev.
When running from the build, service worker does not load.
After npm run dev
I am getting issue like that
@stencil/[email protected] dev C:\OFFICE DATA\ionic-stencil-hn-app
sd concurrent "stencil build --dev --watch" "stencil-dev-server"
events.js:137
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3333
at Object._errnoException (util.js:1003:13)
at _exceptionWithHostPort (util.js:1024:20)
at Server.setupListenHandle [as _listen2] (net.js:1366:14)
at listenInCluster (net.js:1407:12)
at Server.listen (net.js:1495:7)
at Object. (C:\OFFICE DATA\ionic-stencil-hn-app\node_modules@stencil\dev-server\dist\index.js:88:64)
at Generator.next ()
at fulfilled (C:\OFFICE DATA\ionic-stencil-hn-app\node_modules@stencil\dev-server\dist\index.js:4:58)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
[57:52.4] @stencil/core v0.1.1-0
[57:52.4] build, app, dev mode, started ...
[57:52.4] compile started ...
[58:00.7] compile finished in 8.31 s
[58:01.9] bundle styles started ...
[58:02.0] bundle modules started ...
[58:03.5] bundle styles finished in 1.64 s
[58:08.3] bundle modules finished in 6.27 s
[58:13.9] build finished, watching for changes... in 21.46 s
When I try to load the app in IE11 the page loads fine, but if I try to go to second page of the news the page will become not clickable. Comparing to chrome I noticed the "Loading" popup never showed, which caused the "loading-backdrop" overlay blocking the page content.
ie. it looks transparent - but it is probably just not showing.
As well as show skeleton items instead of old ones probably
$ npm run dev
@stencil/[email protected] dev
sd concurrent "stencil build --dev --watch" "stencil-dev-server"
[57:27.1] @stencil/core v0.1.6
[57:27.2] build, app, dev mode, started ...
[57:27.2] compile started ...
[ WARN ] @PropDidChange('pageNum') decorator within "list-container" component has been deprecated. Please update to
@watch('pageNum').
[57:39.6] compile finished in 12.41 s
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/action-sheet-controller/action-sheet-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/alert-controller/alert-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/app/app.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/buttons/buttons.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/grid/col.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/content/content.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/fab/fab-container.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/fab/fab-list.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/footer/footer.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/header/header.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/dependencies/icon/icon.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item/item.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-divider/item-divider.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-options.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-option.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/item-sliding/item-sliding.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/label/label.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/list/list.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/list-header/list-header.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/loading-controller/loading-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/menu/menu-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/modal-controller/modal-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toolbar/navbar.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/page/page.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/popover-controller/popover-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/radio/radio-group.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/range/range-knob.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/reorder/reorder.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/grid/row.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/segment-button/segment-button.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/select-option/select-option.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/select/select-popover.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/skeleton-text/skeleton-text.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-bar.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-button.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/tabs/tab-highlight.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/title/title.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toast-controller/toast-controller.js:
TypeError: Cannot read property 'map' of undefined
[ ERROR ] error performing compiler upgrade on
/node_modules/@ionic/core/dist/collection/components/toolbar/toolbar.js:
TypeError: Cannot read property 'map' of undefined
[57:41.8] bundle styles started ...
[57:42.0] bundle modules started ...
[57:43.6] bundle styles finished in 1.76 s
[57:44.8] bundle modules finished in 2.88 s
[57:44.8] generate bundles started ...
[57:44.8] generate bundles finished in 12 ms
[ ERROR ] Error parsing: bundle:ion-segment.ion-segment-button, line: 2, column: 9
[ ERROR ] rollup died at
\node_modules@stencil\core\dist\compiler\index.js:1781:19 at
Generator.throw () at rejected
(\node_modules@stencil\core\dist\compiler\index.js:1748:65) at
[ ERROR ] Error parsing: bundle:ion-col.ion-grid.ion-row, line: 1, column: 9
[ ERROR ] Error parsing: bundle:ion-menu.ion-menu-controller, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-radio.ion-radio-group, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-range.ion-range-knob, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-fab.ion-fab-button.ion-fab-list, line: 1, column: 9
[ ERROR ] Error parsing: bundle:ion-reorder.ion-reorder-group, line: 1, column: 9
[ ERROR ] Error parsing: bundle:ion-button.ion-buttons.ion-icon, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-select.ion-select-option.ion-select-popover, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-tab.ion-tab-bar.ion-tab-button.ion-tab-highlight.ion-tabs, line: 1, column: 9
[ ERROR ] Error parsing: bundle:ion-alert.ion-alert-controller, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-action-sheet.ion-action-sheet-controller, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-loading.ion-loading-controller, line: 2, column: 9
[ ERROR ] Error parsing: bundle:ion-toast.ion-toast-controller, line: 2, column: 9
[57:56.5] build failed, watching for changes... in 29.33 s
Details of the errors are below.
Maybe until things settle down a bit these dependencies should be fixed versions
"dependencies": {
"@ionic/core": "0.0.2-20",
"@stencil/core": "^0.1.1-0",
"@stencil/router": "0.0.17-1"
},
"devDependencies": {
"@stencil/dev-server": "latest",
"@stencil/utils": "latest"
---- ERROR LOG ----
ERROR ] Component tag "ask-page" is defined in a bundle but no matching component was found within this app or its
collections.
[ ERROR ] Component tag "comments-list" is defined in a bundle but no matching component was found within this app or
its collections.
[ ERROR ] Component tag "comments-page" is defined in a bundle but no matching component was found within this app or
its collections.
[ ERROR ] Component tag "ionic-hn" is defined in a bundle but no matching component was found within this app or its
collections.
[ ERROR ] Component tag "news-page" is defined in a bundle but no matching component was found within this app or its
collections.
[ ERROR ] Component tag "story-list" is defined in a bundle but no matching component was found within this app or its
collections.
[ ERROR ] Component tag "jobs-page" is defined in a bundle but no matching component was found within this app or its
collections.
[ ERROR ] Component tag "show-page" is defined in a bundle but no matching component was found within this app or its
collections.
[57:06.1] build failed in 1.77 s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @stencil/[email protected] build: `stencil build --prerender`
You need to touch the SW for it to update (ie do a const version = 1 inside and bump it). Then remove old cached resources and re-cache).
Also make sure the SW is ALWAYS no-cache! same with manifest.json.
I think when you click "next" to go to a new page it should scroll the content back to the top instead of maintaining the scroll position. It seems weird that I would be halfway down a new page when I didn't scroll to that position.
Click on Show tab then click next page quickly, multiple times.and it will stop working
hello guys,
Can I use this seed ionic-stencil-hn-app with ngrx?
Procedure:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents)
:
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin",
"arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-c
li.js" "install"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! path C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_modules.staging@types\node-5b596f01
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app
node_modules.staging@types\node-5b596f01' -> 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_module
s@stencil\core\node_modules@types\node'
npm ERR! enoent ENOENT: no such file or directory, rename 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app
node_modules.staging@types\node-5b596f01' -> 'C:\Users\Jake21x\Desktop\dev\ionic-stencil-hn-app\node_module
s@stencil\core\node_modules@types\node'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
Local Machine
OS: win7 64bit
NPM : 3.10.10
NODE: v6.11.3
20 warnings and 8 errors generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make
failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack at ChildProcess.emit (events.js:200:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/12.4.0/bin/node" "/Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/tiago/git/github/ionic-stencil-hn-app/node_modules/node-sass
gyp ERR! node -v v12.4.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Considering this is just a simple vanilla PWA that anyone can build with Stencil. We should have more on the README about the process of building. Like tools used etc.
After running npm run dev
despite the server returning:
[24:48.8] @stencil/core v0.1.1-0
[24:48.9] build, app, dev mode, started ...
[24:48.9] compile started ...
[24:56.2] compile finished in 7.32 s
[24:57.1] bundle styles started ...
[24:57.1] bundle modules started ...
[25:03.0] bundle styles finished in 5.98 s
[25:05.4] bundle modules finished in 8.35 s
[25:07.5] build finished, watching for changes... in 18.64 s
Nothing is rendered on the browser. Eventually, after some time, the server crashes with this error.
<--- Last few GCs --->
[31933:0x3fff920] 200566 ms: Mark-sweep 1397.9 (1457.8) -> 1397.9 (1457.8) MB, 1462.8 / 6.4 ms allocation failure GC in old space re
quested
[31933:0x3fff920] 202141 ms: Mark-sweep 1397.9 (1457.8) -> 1397.9 (1426.8) MB, 1557.7 / 6.5 ms last resort GC in old space requested
[31933:0x3fff920] 203642 ms: Mark-sweep 1397.9 (1426.8) -> 1397.9 (1426.8) MB, 1500.1 / 5.2 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x38fe90a25739 <JSObject>
2: has [/home/leo/Documents/Development/AndroidProjects/IonicProjects/stencil-test/ionic-stencil-hn-app/node_modules/chokidar/index
.js:~483] [pc=0x25b472128a45](this=0x30f4a062a849 <Object map = 0x966dd1284d9>,item=0x1b3688ebdf69 <String[25]: ios-add-circle-outline.
js>)
3: /* anonymous */ [/home/leo/Documents/Development/AndroidProjects/IonicProjects/stencil-test/ionic-stencil-hn-app/nod...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [stencil-dev-server]
2: 0x11ef43c [stencil-dev-server]
3: v8::Utils::ReportOOMFailure(char const*, bool) [stencil-dev-server]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [stencil-dev-server]
5: v8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [stencil-dev-server]
6: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::NewInternal(v8::internal::Isolate*, int, v8::in
ternal::PretenureFlag) [stencil-dev-server]
7: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::New(v8::internal::Isolate*, int, v8::internal::
PretenureFlag, v8::internal::MinimumCapacity) [stencil-dev-server]
8: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::EnsureCapacity(v8::internal::Handle<v8::interna
l::StringTable>, int, v8::internal::PretenureFlag) [stencil-dev-server]
9: v8::internal::StringTable::LookupString(v8::internal::Isolate*, v8::internal::Handle<v8::internal::String>) [stencil-dev-server]
10: v8::internal::Runtime_HasProperty(int, v8::internal::Object**, v8::internal::Isolate*) [stencil-dev-server]
11: 0x25b471f842fd
Aborted (core dumped)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.