housseindjirdeh / angular2-hn Goto Github PK

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.

• App Shell functionality
• Work offline with the help of Service Workers
• Manifest file so these apps can be installed from browsers

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.

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!

I am reading your code, but what is this syntax means? like the line down below
this.pageNum = params['page'] ? +params['page'] : 1;

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

On mobile, story links that don't have a URL (for example, Ask HN stories) show the HTML markup instead of just the title text.

‭

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) $ 

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 :)

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

How can i access this web from other device?

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!

That would be very helpful!

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.

The header-text div covers some of the logo you can click to go back to the homepage.
This affects both the mobile and desktop views. Encountered on Chrome 57 and Firefox 50 on OS X.

I will open a PR shortly to fix.

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.

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.

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!

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.

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.

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?

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)

Currently poll options are shown in the order the AJAX calls are returned. It would make sense to preserve the ordering that the story defines the options.

e.g. with arbitrary order, the story defined the values in ascending $ value

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!

Trying to see the sw in action . According to instructions
npm run builld
npm run precache - not exists in package.json ?

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.

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

what's the advantages of using your own css files or SASS ?

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.

Currently when the API errors out the loading indicator continues to be shown. It would be nice if the user got a friendly error message when the API is down.

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)

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?

@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.

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

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.

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?

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

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?

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'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

Why

declare var fetch;

in hackernews-api.service.ts?

https://developers.google.com/web/updates/2019/07/nic76#dark-mode Standard is now made available in nearly all major browsers.

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'.