coryrylan / ng-pokedex

:monkey_face: Pokedex progressive web app built with Angular

NgPokedex

This project was generated with Angular CLI version 12.0.2.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

ng-pokedex's Issues

Upgrade sw-precache

On production stage the app crash on boot.

ng serve --prod

localhost/:25 Service Worker registered
vendor.bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)
inline.bundle.js:53 Uncaught TypeError: Cannot read property 'call' of undefined
at webpack_require (inline.bundle.js:53)
at eval (webpack:///./src/main.ts?:2)
at Object.404 (main.bundle.js:14)
at webpack_require (inline.bundle.js:53)
at eval (webpack:///multi_./src/main.ts?:1)
at Object.659 (main.bundle.js:59)
at webpack_require (inline.bundle.js:53)
at webpackJsonpCallback (inline.bundle.js:24)
at main.bundle.js:1
localhost/:57 Live reload enabled.

ng e2e fails

I read your great article https://coryrylan.com/blog/introduction-to-e2e-testing-with-the-angular-cli-and-protractor
and would like to test your app but ng e2e fails :

**************************************************
*                    Failures                    *
**************************************************

1) ng-pokedex App should display heading saying NG-Pokédex
  - Failed: No element found using locator: By(css selector, app-root h1)

2) ng-pokedex pokemon view should open and view a particular pokemon
  - Failed: No element found using locator: By(css selector, app-pokemon-modal h1)

3) ng-pokedex pokemon view should open and allow arrow keys to navigate between pokemon
  - Failed: No element found using locator: By(css selector, app-pokemon-modal h1)

Executed 4 of 4 specs (3 FAILED) in 4 secs.
[10:32:28] I/launcher - 0 instance(s) of WebDriver still running
[10:32:28] I/launcher - chrome #01 failed 3 test(s)
[10:32:28] I/launcher - overall: 3 failed spec(s)
[10:32:28] E/launcher - Process exited with error code 1

"ng build" giving an error

Hi @splintercode,

Below are my steps for setting up the ng-pokedex project in my local:

1. I cloned the repo https://github.com/splintercode/ng-pokedex
2. After cloning the project in my local I did "npm install".
3. Then I did "ng build".

On "ng build", I get the error "You have to be inside an angular-cli project in order to use the build command." even I have installed the angular CLI globally.

Do you have any idea about the reason for this error?

runtimeCaching is not working

Hi @coryrylan ,

I tried uncommenting the runtimeCaching option in the workbox-build.js and wanna see how it works in action. But it doesn't seem to work whatsoever though precaching does seem to work.

However I changed the urlPattern option in runtimeCaching config to reflect my local api url but it doesn't work. Is there any problem with the setup or it is a problem with the workbox itself?

Please let me know your thoughts.

Thanks,
Bhasker

be awesome if we can get the iOS tags added

be awesome if we can get the iOS tags added:
https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb#.mu5wep17n

regards

Sean

Bug - UI Design Mobile - Card design is not responsive in mobile views

The cards are not responsive in mobile displays less than 320px (Xtra Small Devices) width, hence the ids (#00) are getting hidden from the view.

Steps to reproduce.

• Go to the website.
• Resize to mobile display size less than or equal to 320px
• Check the cards

Solution
Make a single card display in XS devices.

unable to publish to a non root server dir

I was wondering if you can assist.
I am trying to publish the project to a node server which resides in a path that is non root.
In other words:
https://secure.digitalsignage.com/poke/ (poke dir)
as you cam see, I get no assets
I did publish with:

ng build --target=production --base-href ./
ng build --target=production --base-href /poke
ng build --target=production --base-href /poke/
ng build --target=production --base-href ./poke
with no luck
and you can clearly see the error in dev tools.

by the way you can clearly see that it is able to load the app just fine, but not able to load the: https://secure.digitalsignage.com/manifest.json Failed to load resource: the server responded with a status of 404 (Not Found), so I am not sure why it is trying the manifest from the root?

I was wondering if you have any ideas on how to host in a non root node server dir,

great project by the way,

regards

Sean

Some e2e tests fail in this sample

Hi,

A couple of e2e tests fail when I try to run them:

× should open and view a particular pokemon

• Failed: No element found using locator: By(css selector, app-modal h1)

× should open and allow arrow keys to navigate between pokemon
- Failed: No element found using locator: By(css selector, app-modal h1)

Running from master from the 98f0bc1 commit (16-10).

Hope you can help out.

Gerben.

fix - simple typo and unused library import

• A open source Pokédex in about.component.html
  I think we can modify it to An open source Pokédex
• import { switchMap, startWith, tap, map } from 'rxjs/operators'; in pokemon.service.ts
  tap is not used

Intl polyfills

import 'intl';
import 'intl/locale-data/jsonp/en.js';

Pokemon