ngx-youtube-player | A youtube component wrapped with Angular

You will see in your example url, that once you get the 404 error you can't make it work, but if you include a hash before the angular-specific url like /#latest it will work.

Why stops working when refreshing? your webserver is intercepting the GET request from your browser and is trying to go directly to the directory /latest, which doesn't exist. It doesn't know that it needs to go to /bosv2, find an angular app, and then add the small ending bit to your path which is a not-real directory but a routing for angular. In your local it would work as when you are doing ng serve, webpack webserver is prepared for this, but not the host where you are hosting the app.

By default, angular is using HTML5 style navigation, but with your current webserver settings you would need the old angularjs style (with hash#).

From here, you have two solutions:

1. Change your webserver configuration

2. Tell Angular to use HashLocationStrategy (perfectly valid solution), you can go old-school with the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.

   @NgModule({ imports: [ ... RouterModule.forRoot(routes, { useHash: true }) // .../#/latest/ ], ...

I would say going the hash style has a couple of downsides, which may not be relevant in your scenario:

1. It doesn't produce the clean and SEO Friendly URLs that are easier for users to understand and remember.
2. You can't take advantage of the server-side rendering.

Hope you find this answer helpful :)

I solved it after a lot of hard works. I followed ngx-youtube-player official documentation. then I found out that was the version problem.

It looks like your operators are still chained in rxjs 5.x fashion.

So to recap what changed in rxjs6 :

1. Imports are different. Now, you should import Observable, Subject, BehaviorSubject etc. AND methods that were in 'rxjs/add/observable' differently. So all of these must be imported from 'rxjs'. For example :

   import {Observable, Subject, of, from} from 'rxjs';

   Alternatively, all operators like map, concat, do (which now is called tap) etc. are to be imported from rxjs/operators. so something like :

   import { map, tap, takeUntil} from 'rxjs/operators';

   I think your imports are pretty sane.

2. You must use pipes instead of chaining your operators. For instance, in your all-matches.components.ts, line 33, if you replace : this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{

   by

   this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{

   your takeUntil error will disappear.

   In the same fashion, instead of Observable.of(true), you should import of operator and use of(true).

   You can try this in your authorization.service.ts file. All the "of errors" will be fixed.

   maybe you should inspect this

3. Concerning the import errors regarding custom files, please check the files actually exist. For example :

   ERROR in src/app/app.module.ts(6,38): error TS2307: Cannot find module './api-keys'

   related to

   import { masterFirebaseConfig } from './api-keys'

   is normal, since this file './api-keys' doesn't exist. PS: maybe you don't have these errors if keys are not stored in git, if so ignore this.

4. Finally, about AngularFire5.0, you should use one of the operators :

   Db.list('items').subscribe(console.log)

   becomes (with valueChanges method) :

   Db.list('items').valueChanges().subscribe(console.log)

   More info : https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Good luck!