housseindjirdeh / angular2-hn Goto Github PK
View Code? Open in Web Editor NEW:boom: Progressive Hacker News client built with Angular
Home Page: https://angular2-hn.firebaseapp.com
License: MIT License
:boom: Progressive Hacker News client built with Angular
Home Page: https://angular2-hn.firebaseapp.com
License: MIT License
Why
declare var fetch;
in hackernews-api.service.ts?
I'm having the same issue. => angular/angular-cli#2234 (comment)
Fix the webpack version in your app to v2.1.0-beta.22 for now.
I've added "webpack": "2.1.0-beta.22" to devDependencies.
or
npm install [email protected] --save-dev
Great app but It doesn't work with [email protected] can you update?
Gives this output:
It seems like you're using a project generated using an old version of the Angular CLI.
The latest CLI now uses webpack and includes a lot of improvements, include a simpler workflow, a faster build and smaller bundles.
To get more info, including a step-by-step guide to upgrade the CLI, follow this link:
https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.12
Would be nice to have a littles settings icon that the user can click and change the font size of the page and/or line-spacing. Can be something similar to how they did it in this client https://react-hn.appspot.com or something slightly different. Open to suggestions :)
Trying to see the sw in action . According to instructions
npm run builld
npm run precache - not exists in package.json ?
When running this code, I get the following error:
C:\Angular 2\angular2-hn-initial-setup\angular2-hn-initial-setup>ng serve
It seems like you're using the newest version of the Angular CLI that uses webpack.
This version does not require an angular-cli-build file, but your project has one.
It will be ignored.
Your global Angular CLI version (1.0.0-beta.28.3) is greater than your local
version (1.0.0-beta.22-1). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
reflect-metadata shim is required when using class decorators
I haven't been able to find a solution.
Any ideas?
I get this error in my environment:
client?93b6:76 [default] /Users/vaughanjackson/OneDrive/Projects/AngularJS2/angular-hn/src/app/stories/stories.component.ts:12:17
Supplied parameters do not match any signature of call target.
unless I alter the code to pass some kind of value into the fill() call:
export class StoriesComponent implements OnInit {
items: number[];
constructor() {
this.items = Array(30).fill().map((x,i)=>i); <= change 'fill()' to 'fill(0)' for example
}
My environment is this:
vaughanjackson@Vaughans-MBP angular-hn (master) $ ng --version
angular-cli: 1.0.0-beta.16
node: 4.5.0
os: darwin x64
vaughanjackson@Vaughans-MBP angular-hn (master) $
https://developers.google.com/web/updates/2019/07/nic76#dark-mode Standard is now made available in nearly all major browsers.
I have an issue. This is too awesome. I've been groping at a similar service for some weeks now and your code has taught me so much. Too much. Tone down the awesomeness will ya? Seriously though. Thanks!
This project is using sw-precache instead of the latest @angular/service-worker
and ng-pwa-tools
.
At Google I/O last week, they announced that https://github.com/GoogleChrome/workbox would be the preferred option over sw-precache going forward.
However, Angular seems to be creating a better integrated SW and PWA story using the tools mentioned above. That said, it would be interesting to see if these tools actually reduce the size of the config and improve performance or load time.
sir,thanks for this awesome project..........the app opens successfully but i get this message in console i am running the code with ng serve host MYIP
How can I solve this issue? Please help, thanks!
So this doesn't yet support polls:
Hackernews: https://news.ycombinator.com/item?id=7059569
Angular2HN: https://angular2-hn.firebaseapp.com/item/7059569
This isn't complicated at all. In the item.comments.component you'll just need to do a check for type === poll and if so, get the details from the poll object in the response.
It would be nice to have bars to represent the results as well, but maybe we can just start with outputting the results and then doing that later.
So thanks to @mateuszwitkowski, we have poll support! :)
But they don't currently show in mobile :(. All that needs to be done is just updating the mobile section of 'item-comments.component.html' to include the poll information
When hovering items from the new | show | ask | jobs
menu the items after the hovered one move a slight bit due to the hovered item having more width by being bold.
When I click on a link or comment from the front page and go back, the page goes right back to the top again. Any solutions? It happens on mobile and web.
P.S This is my favourite HN PWA, I love the color choices and I think this one of the only PWA's that supports comment collapsing.
When a item is opened from the bottom of the page, the page doesn't scroll back to top in the item detail view.
(sorry , co workers are very picky, opening a PR right now)
I am reading your code, but what is this syntax means? like the line down below
this.pageNum = params['page'] ? +params['page'] : 1;
With Firebase, leveraging h2 push seems straightforward which is awesome. Tried this quite some time ago but didn't notice any particular wins, however I do think it's something worth exploring again.
AggressiveSplittingPlugin, although experimental, seems to be a viable solution to output multiple smaller chunks that can be pushed from the server. However, spent a bit of time trying to include it and it doesn't output the generated chunks to the html due to an issue with HTMLWebpackPugin
. Definitely something to keep an eye on when this gets resolved.
Open to all kinds of suggestions and tips!
Would be interesting to see if we can get some parts of the app (if not all) working without any JS on the browser using Angular Universal. Never used Universal before so would love suggestions/tips.
That would be very helpful!
This app is awesome! I see that it uses REST requests rather than the realtime SDK. Is there a reason why you went this route?
Very nice, @hdjirdeh
Thanks for sharing.
In the screencast I see you are running it fullscreen natively.
Did you use phonegap? Is it builtin in your project?
Our poll results for poll items are fetched individually async, and we have it set up to only show once all the poll results have been fetched. It'll be nice if we had a loading indicator to show until all the poll results show.
Feel free to copy the same loading indicator I used through the app and modify it to fit the poll results area.
ERROR in [default] e:\learning\angular2\Angular2-HNews-master\src\app\stories\stories.component.ts:31:49
Property 'storiesType' does not exist on type '{ [name: string]: any; }'.
ERROR in [default] e:\learning\angular2\Angular2-HNews-master\src\app\user\user.component.ts:25:33
Property 'fetchUser' does not exist on type 'HackerNewsAPIService'.
Checking the latest deployment (https://angular2-hn.firebaseapp.com/) over normal 3G, performance is great but a lot of our JS work doesn't get completed until much later on: https://www.webpagetest.org/video/compare.php?tests=170514_00_bb389f33405b558ea644b37f565c8a56-r:1-c:0
I wonder if it would be worth adding in support for <link rel="preload">
so you can tell the browser early on that the following scripts are important:
<script type="text/javascript" src="inline.e195cb797c8ab56372da.bundle.js"></script>
<script type="text/javascript" src="vendor.a39b96651e0f11f342a5.bundle.js"></script>
<script type="text/javascript" src="main.f85b553fbaef45424581.bundle.js"></script>
I've suggested this to a number of sites where it has improved their time to interactivity (it hasn't for everyone) but it might be worth giving a shot.
I might separately also suggest registering SW after the window onload event so that there's no chance of network contention with the main page resources on first load: https://github.com/housseindjirdeh/angular2-hn/blob/master/src/index.html#L62
So the next major step for this app would be to make it a full blown progressive web app, and there's a CLI build just for that - Angular Mobile Toolkit.
So here are some of the things that we can do to make this a progressive web application.
Now the mobile toolkit comes with these features built in to it's configuration but it's still in an alpha stage. Nonetheless I would still prefer to get this done using --mobile, otherwise we can look into using sw-precache and sw-toolbox as well.
P.S. Here's an earlier build of the application using the mobile toolkit so feel free to take a look and see how I did things there. The App Shell and manifest files seemed to have worked but it did not work offline.
So thanks to @mateuszwitkowski, we have poll support :)
Now the poll results show simply just like in Hacker News. I think it'll be pretty cool to show a nice poll results section wth bars (or chart) instead. I'm thinking separate bars with the largest result shown at 100% and the others as percentages based on their values (something just like this: https://app.hackerwebapp.com/#/item/6527104). We'll also want to make sure it fits for all screen sizes nicely.
I'm open to other ideas too! It doesn't have to be this exactly so let me know if you have any thoughts.
It doesn't seem like you are leveraging a benefit of angular which is AOT and affecting the performance numbers.
I see you are using npm build, but perhaps not the right build which should be ng build --target=production --environment=prod --aot
I'm using the reader as app and so it opens the links inside the app.
Is there a way to open the link in another browser?
Can we get a share functionality to eg. send the current page per mail or add it to pocket (another reader app)?
Thank you very much!
Hi,
The project is using an unofficial API for Hacker News but there is official Hacker News API. It will be better if it is upgraded to this official API:
https://github.com/HackerNews/API
Thank you
It's been so great seeing how far this has come since you started adding sw-toolbox and sw-precache. Glad the suggestions were useful :)
On desktop, you're doing pretty well on our latest version Lighthouse as you know:
Seems like switching to AoT support made a nice little dent :)
If you wanted to get those time to interactive numbers down further, you might consider trying out the new view compiler that landed in Angular master:
https://twitter.com/robwormald/status/834938328294154240
Are you using H/2 Server Push? (saw some related commits in master)
@SeriousM mentioned that it would be great have the ability to share story links or the comment's page for a story. Would love to get some suggestions on whether anyone thinks this is something we definitely need and if so, how/what should we implement exactly.
Sending by mail should be simple, but should we include other avenues (social media) as well? Integration with Pocket has been mentioned, but not sure if we should spend time wrestling it's API if not too many people use it.
How can i access this web from other device?
To start, thank you for your great PWA article and the provided app.
Is there a way to configure the Service Worker internally in the app, either via a polyfill(s) or a flag, so that the app will work without the Service Worker caching in the older browsers such as IE10 or IE11?
Hello, thanks for your tutorial and project.
I tried to create the prod version with
ng build --aot --prod --bh ./ # or variants
it works when served within a http server but it doesn't when it's called as "file://..."
while the basic angular/cli works generating the "app works!" trivial example.
I have to create a demo, static only, angular2 cli generated dist to be called as "file://" and I tried with your project. I suppose it is just a question of using the right commands 'cause it should not be necessary to have a real webserver, even for the html5 internal routing.
Am I wrong? What is the sequence of shell commands to get, in dist folder, a working version that can be called in the browser as "file://<absolute_path>/dist/index.html"? Thank you for your time.
what's the advantages of using your own css files or SASS ?
Hey. I love this hn client, great work.
Is there a typo in the docs for the service worker (PWA) part and in the package.json.
It says:
npm run sw to generate the service worker file
npm run static-serve to load the application along with the service worker asset using lite-server
I had to:
npm run precache instead of npm run sw
install lite-server from npm
change static-serve script to use lite-server not live-server
npm run static-serve
Should we add more detailed steps to docs and/or change package.json script too?
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.