Update angular

2019-07-24 16:05:59 +02:00 · 2019-07-24 16:05:59 +02:00 · f36da21e40
parent a353a4d77c
commit f36da21e40
45 changed files with 1317 additions and 850 deletions
--- a/client/browserslist
+++ b/client/browserslist
@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/client/package.json
+++ b/client/package.json
@ -31,21 +31,20 @@
    "punycode": "^1.4.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.1",
-    "@angular/animations": "~7.2.4",
-    "@angular/cdk": "^7.3.4",
-    "@angular/cli": "~7.3.1",
-    "@angular/common": "~7.2.4",
-    "@angular/compiler": "~7.2.4",
-    "@angular/compiler-cli": "~7.2.4",
-    "@angular/core": "~7.2.4",
-    "@angular/forms": "~7.2.4",
-    "@angular/http": "~7.2.4",
-    "@angular/language-service": "~7.2.4",
-    "@angular/platform-browser": "~7.2.4",
-    "@angular/platform-browser-dynamic": "~7.2.4",
-    "@angular/router": "~7.2.4",
-    "@angular/service-worker": "~7.2.4",
+    "@angular-devkit/build-angular": "~0.801.2",
+    "@angular/animations": "~8.1.2",
+    "@angular/cdk": "^8.1.1",
+    "@angular/cli": "~8.1.2",
+    "@angular/common": "~8.1.2",
+    "@angular/compiler": "~8.1.2",
+    "@angular/compiler-cli": "~8.1.2",
+    "@angular/core": "~8.1.2",
+    "@angular/forms": "~8.1.2",
+    "@angular/language-service": "~8.1.2",
+    "@angular/platform-browser": "~8.1.2",
+    "@angular/platform-browser-dynamic": "~8.1.2",
+    "@angular/router": "~8.1.2",
+    "@angular/service-worker": "~8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@neos21/bootstrap3-glyphicons": "^1.0.1",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
@ -69,10 +68,12 @@
    "@types/video.js": "^7.2.5",
    "@types/webtorrent": "^0.98.4",
    "angular2-hotkeys": "^2.1.2",
+    "angularx-qrcode": "^1.6.4",
    "awesome-typescript-loader": "5.2.1",
    "bootstrap": "^4.1.3",
    "buffer": "^5.1.0",
    "cache-chunk-store": "^3.0.0",
+    "codelyzer": "^5.0.1",
    "core-js": "^3.0.0",
    "css-loader": "^2.1.1",
    "dexie": "^2.0.4",
@ -97,7 +98,6 @@
    "ngx-chips": "2.0.0-beta.0",
    "ngx-clipboard": "12.0.0",
    "ngx-pipes": "^2.1.7",
-    "ngx-qrcode2": "^0.0.9",
    "node-sass": "^4.9.3",
    "npm-font-source-sans-pro": "^1.0.2",
    "p2p-media-loader-hlsjs": "^0.5.0",
@ -108,7 +108,7 @@
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "raw-loader": "^1",
-    "rxjs": "^6.3.3",
+    "rxjs": "^6.5.2",
    "sanitize-html": "^1.18.4",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^2.0.0",
@ -119,7 +119,7 @@
    "tslint": "^5.7.0",
    "tslint-angular": "^1.1.2",
    "tslint-config-standard": "^8.0.1",
-    "typescript": "3.2",
+    "typescript": "3.4.5",
    "video.js": "^7",
    "videojs-contextmenu-ui": "^5.0.0",
    "videojs-contrib-quality-levels": "^2.0.9",
@ -129,6 +129,6 @@
    "webpack-cli": "^3.0.8",
    "webtorrent": "^0.103.1",
    "whatwg-fetch": "^3.0.0",
-    "zone.js": "~0.9.0"
+    "zone.js": "~0.9.1"
  }
-}
+}
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@ -11,7 +11,7 @@ import { MarkdownService } from '@app/shared/renderer'
  styleUrls: [ './about-instance.component.scss' ]
 })
 export class AboutInstanceComponent implements OnInit {
-  @ViewChild('contactAdminModal') contactAdminModal: ContactAdminModalComponent
+  @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent

  shortDescription = ''
  descriptionHTML = ''
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.ts
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@ -13,7 +13,7 @@ import { InstanceService } from '@app/shared/instance/instance.service'
  styleUrls: [ './contact-admin-modal.component.scss' ]
 })
 export class ContactAdminModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal

  error: string

--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@ -13,7 +13,7 @@ import { VideoAbuse } from '../../../../../../shared/models/videos'
  styleUrls: [ './moderation-comment-modal.component.scss' ]
 })
 export class ModerationCommentModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
  @Output() commentUpdated = new EventEmitter<string>()

  private abuseToComment: VideoAbuse
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@ -17,7 +17,7 @@ import { MarkdownService } from '@app/shared/renderer'
  styleUrls: [ '../moderation.component.scss']
 })
 export class VideoAbuseListComponent extends RestTable implements OnInit {
-  @ViewChild('moderationCommentModal') moderationCommentModal: ModerationCommentModalComponent
+  @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent

  videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
  totalRecords = 0
--- a/client/src/app/+admin/system/logs/logs.component.ts
+++ b/client/src/app/+admin/system/logs/logs.component.ts
@ -10,7 +10,7 @@ import { LogLevel } from '@shared/models/server/log-level.type'
  styleUrls: [ './logs.component.scss' ]
 })
 export class LogsComponent implements OnInit {
-  @ViewChild('logsElement') logsElement: ElementRef<HTMLElement>
+  @ViewChild('logsElement', { static: true }) logsElement: ElementRef<HTMLElement>

  loading = false

--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@ -14,7 +14,7 @@ import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
  styleUrls: [ './user-list.component.scss' ]
 })
 export class UserListComponent extends RestTable implements OnInit {
-  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal', { static: true }) userBanModal: UserBanModalComponent

  users: User[] = []
  totalRecords = 0
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.ts
@ -6,7 +6,7 @@ import { UserNotificationsComponent } from '@app/shared'
  styleUrls: [ './my-account-notifications.component.scss' ]
 })
 export class MyAccountNotificationsComponent {
-  @ViewChild('userNotification') userNotification: UserNotificationsComponent
+  @ViewChild('userNotification', { static: true }) userNotification: UserNotificationsComponent

  markAllAsRead () {
    this.userNotification.markAllAsRead()
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@ -18,7 +18,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 export class MyAccountAcceptOwnershipComponent extends FormReactive implements OnInit {
  @Output() accepted = new EventEmitter<void>()

-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  videoChangeOwnership: VideoChangeOwnership | undefined = undefined

--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@ -18,7 +18,7 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
  sort: SortMeta = { field: 'createdAt', order: -1 }
  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }

-  @ViewChild('myAccountAcceptOwnershipComponent') myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent
+  @ViewChild('myAccountAcceptOwnershipComponent', { static: true }) myAccountAcceptOwnershipComponent: MyAccountAcceptOwnershipComponent

  constructor (
    private notifier: Notifier,
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@ -23,8 +23,8 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
  styleUrls: [ './my-account-videos.component.scss' ]
 })
 export class MyAccountVideosComponent implements DisableForReuseHook {
-  @ViewChild('videosSelection') videosSelection: VideosSelectionComponent
-  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+  @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
+  @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent

  titlePage: string
  selection: SelectionType = {}
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@ -13,7 +13,7 @@ import { VideoOwnershipService } from '@app/shared/video-ownership'
  styleUrls: [ './video-change-ownership.component.scss' ]
 })
 export class VideoChangeOwnershipComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  usernamePropositions: string[]

--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@ -10,7 +10,7 @@ import { Notifier } from '@app/core'
  styleUrls: [ './actor-avatar-info.component.scss' ]
 })
 export class ActorAvatarInfoComponent {
-  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>

  @Input() actor: VideoChannel | Account

--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@ -15,7 +15,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
  styleUrls: [ './video-channels.component.scss' ]
 })
 export class VideoChannelsComponent implements OnInit, OnDestroy {
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent

  videoChannel: VideoChannel
  hotkeys: Hotkey[]
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@ -8,31 +8,31 @@ import { CustomReuseStrategy } from '@app/core/routing/custom-reuse-strategy'
 const routes: Routes = [
  {
    path: 'admin',
-    loadChildren: './+admin/admin.module#AdminModule'
+    loadChildren: () => import('./+admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'my-account',
-    loadChildren: './+my-account/my-account.module#MyAccountModule'
+    loadChildren: () => import('./+my-account/my-account.module').then(m => m.MyAccountModule)
  },
  {
    path: 'verify-account',
-    loadChildren: './+signup/+verify-account/verify-account.module#VerifyAccountModule'
+    loadChildren: () => import('./+signup/+verify-account/verify-account.module').then(m => m.VerifyAccountModule)
  },
  {
    path: 'accounts',
-    loadChildren: './+accounts/accounts.module#AccountsModule'
+    loadChildren: () => import('./+accounts/accounts.module').then(m => m.AccountsModule)
  },
  {
    path: 'video-channels',
-    loadChildren: './+video-channels/video-channels.module#VideoChannelsModule'
+    loadChildren: () => import('./+video-channels/video-channels.module').then(m => m.VideoChannelsModule)
  },
  {
    path: 'about',
-    loadChildren: './+about/about.module#AboutModule'
+    loadChildren: () => import('./+about/about.module').then(m => m.AboutModule)
  },
  {
    path: 'signup',
-    loadChildren: './+signup/+register/register.module#RegisterModule'
+    loadChildren: () => import('./+signup/+register/register.module').then(m => m.RegisterModule)
  },
  {
    path: '',
@ -40,7 +40,7 @@ const routes: Routes = [
  },
  {
    path: '**',
-    loadChildren: './+page-not-found/page-not-found.module#PageNotFoundModule'
+    loadChildren: () => import('./+page-not-found/page-not-found.module').then(m => m.PageNotFoundModule)
  }
 ]

--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@ -16,8 +16,8 @@ import { Router } from '@angular/router'
 })

 export class LoginComponent extends FormReactive implements OnInit {
-  @ViewChild('emailInput') input: ElementRef
-  @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef
+  @ViewChild('emailInput', { static: true }) input: ElementRef
+  @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef

  error: string = null
  forgotPasswordEmail = ''
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@ -13,7 +13,7 @@ import { filter } from 'rxjs/operators'
  styleUrls: [ './avatar-notification.component.scss' ]
 })
 export class AvatarNotificationComponent implements OnInit, OnDestroy {
-  @ViewChild('popover') popover: NgbPopover
+  @ViewChild('popover', { static: true }) popover: NgbPopover
  @Input() user: User

  unreadNotifications = 0
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@ -9,7 +9,7 @@ import { sortBy } from '@app/shared/misc/utils'
  styleUrls: [ './language-chooser.component.scss' ]
 })
 export class LanguageChooserComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  languages: { id: string, label: string }[] = []

--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@ -11,7 +11,7 @@ import { HotkeysService } from 'angular2-hotkeys'
  styleUrls: [ './menu.component.scss' ]
 })
 export class MenuComponent implements OnInit {
-  @ViewChild('languageChooserModal') languageChooserModal: LanguageChooserComponent
+  @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent

  user: User
  isLoggedIn: boolean
--- a/client/src/app/shared/confirm/confirm.component.ts
+++ b/client/src/app/shared/confirm/confirm.component.ts
@ -10,7 +10,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
  styleUrls: [ './confirm.component.scss' ]
 })
 export class ConfirmComponent implements OnInit {
-  @ViewChild('confirmModal') confirmModal: ElementRef
+  @ViewChild('confirmModal', { static: true }) confirmModal: ElementRef

  title = ''
  message = ''
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@ -14,7 +14,7 @@ import { User } from '../../../../../shared'
  styleUrls: [ './user-ban-modal.component.scss' ]
 })
 export class UserBanModalComponent extends FormReactive implements OnInit {
-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal
  @Output() userBanned = new EventEmitter<User | User[]>()

  private usersToBan: User | User[]
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@ -13,7 +13,7 @@ import { BlocklistService } from '@app/shared/blocklist'
  templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnChanges {
-  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent

  @Input() user: User
  @Input() account: Account
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@ -17,7 +17,7 @@ import { secondsToTime } from '../../../assets/player/utils'
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent {
-  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
+  @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown

  @Input() playlist: VideoPlaylist
  @Input() video: Video
--- a/client/src/app/shared/video/modals/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@ -16,7 +16,7 @@ import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms
 export class VideoBlacklistComponent extends FormReactive implements OnInit {
  @Input() video: VideoDetails = null

-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal

  @Output() videoBlacklisted = new EventEmitter()

--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@ -10,7 +10,7 @@ import { Notifier } from '@app/core'
  styleUrls: [ './video-download.component.scss' ]
 })
 export class VideoDownloadComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  downloadType: 'direct' | 'torrent' = 'torrent'
  resolutionId: number | string = -1
--- a/client/src/app/shared/video/modals/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@ -17,7 +17,7 @@ import { VideoAbuseService } from '@app/shared/video-abuse'
 export class VideoReportComponent extends FormReactive implements OnInit {
  @Input() video: VideoDetails = null

-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal

  error: string = null

--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@ -29,12 +29,12 @@ export type VideoActionsDisplayType = {
  styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
 export class VideoActionsDropdownComponent implements OnChanges {
-  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent

-  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
+  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent

  @Input() video: Video | VideoDetails

--- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.ts
@ -18,7 +18,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni

  @Output() captionAdded = new EventEmitter<VideoCaptionEdit>()

-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  videoCaptionLanguages: VideoConstant<string>[] = []

--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@ -29,7 +29,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
  @Input() waitTranscodingEnabled = true

-  @ViewChild('videoCaptionAddModal') videoCaptionAddModal: VideoCaptionAddModalComponent
+  @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent

  // So that it can be accessed in the template
  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@ -25,7 +25,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('torrentfileInput', { static: false }) torrentfileInput: ElementRef<HTMLInputElement>

  magnetUri = ''

--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@ -27,7 +27,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
+  @ViewChild('videofileInput', { static: false }) videofileInput: ElementRef<HTMLInputElement>

  // So that it can be accessed in the template
  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@ -11,9 +11,9 @@ import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-c
  styleUrls: [ './video-add.component.scss' ]
 })
 export class VideoAddComponent implements CanComponentDeactivate {
-  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoUpload', { static: false }) videoUpload: VideoUploadComponent
+  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent

  secondStepType: 'upload' | 'import-url' | 'import-torrent'
  videoName: string
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts
@ -27,8 +27,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {

  @Output() commentCreated = new EventEmitter<VideoCommentCreate>()

-  @ViewChild('visitorModal') visitorModal: NgbModal
-  @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+  @ViewChild('textarea', { static: true }) textareaElement: ElementRef

  addingComment = false

--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
  styleUrls: ['./video-comments.component.scss']
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
+  @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef
  @Input() video: VideoDetails
  @Input() user: User

--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@ -27,7 +27,7 @@
      <ngb-tab i18n-title title="QR-Code" id="qrcode">
        <ng-template ngbTabContent>
          <div class="tab-content">
-            <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+            <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
          </div>
        </ng-template>
      </ngb-tab>
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@ -30,7 +30,7 @@ type Customizations = {
  styleUrls: [ './video-share.component.scss' ]
 })
 export class VideoShareComponent {
-  @ViewChild('modal') modal: ElementRef
+  @ViewChild('modal', { static: true }) modal: ElementRef

  @Input() video: VideoDetails = null
  @Input() videoCaptions: VideoCaption[] = []
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@ -11,7 +11,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class VideoSupportComponent {
  @Input() video: VideoDetails = null

-  @ViewChild('modal') modal: NgbModal
+  @ViewChild('modal', { static: true }) modal: NgbModal

  videoHTMLSupport = ''

--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@ -43,10 +43,10 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 export class VideoWatchComponent implements OnInit, OnDestroy {
  private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'

-  @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
+  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent

  player: any
  playerElement: HTMLVideoElement
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@ -8,17 +8,17 @@ import { VideoCommentsComponent } from './comment/video-comments.component'
 import { VideoShareComponent } from './modal/video-share.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 import { VideoWatchComponent } from './video-watch.component'
-import { NgxQRCodeModule } from 'ngx-qrcode2'
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
 import { RecommendationsModule } from '@app/videos/recommendations/recommendations.module'
 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
+import { QRCodeModule } from 'angularx-qrcode'

@NgModule({
  imports: [
    VideoWatchRoutingModule,
    SharedModule,
    NgbTooltipModule,
-    NgxQRCodeModule,
+    QRCodeModule,
    RecommendationsModule
  ],

--- a/client/src/app/videos/videos-routing.module.ts
+++ b/client/src/app/videos/videos-routing.module.ts
@ -77,7 +77,7 @@ const videosRoutes: Routes = [
      },
      {
        path: 'upload',
-        loadChildren: 'app/videos/+video-edit/video-add.module#VideoAddModule',
+        loadChildren: () => import('app/videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
        data: {
          meta: {
            title: 'Upload a video'
@ -86,7 +86,7 @@ const videosRoutes: Routes = [
      },
      {
        path: 'update/:uuid',
-        loadChildren: 'app/videos/+video-edit/video-update.module#VideoUpdateModule',
+        loadChildren: () => import('app/videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
        data: {
          meta: {
            title: 'Edit a video'
@ -95,7 +95,7 @@ const videosRoutes: Routes = [
      },
      {
        path: 'watch',
-        loadChildren: 'app/videos/+video-watch/video-watch.module#VideoWatchModule',
+        loadChildren: () => import('app/videos/+video-watch/video-watch.module').then(m => m.VideoWatchModule),
        data: {
          preload: 3000
        }
--- a/client/src/polyfills.ts
+++ b/client/src/polyfills.ts
@ -11,32 +11,13 @@
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
 */

 /***************************************************************************************************
- * BROWSER POLYFILLS
- */
+* BROWSER POLYFILLS
+*/

-/**
- * IE9, IE10 and IE11 requires all of the following polyfills.
- */
-
-// For Google Bot
-import 'core-js/es6/symbol'
-import 'core-js/es6/object'
-import 'core-js/es6/function'
-import 'core-js/es6/parse-int'
-import 'core-js/es6/parse-float'
-import 'core-js/es6/number'
-import 'core-js/es6/math'
-import 'core-js/es6/string'
-import 'core-js/es6/date'
-import 'core-js/es6/array'
-import 'core-js/es6/regexp'
-import 'core-js/es6/map'
-import 'core-js/es6/weak-map'
-import 'core-js/es6/set'
 import 'core-js/es7/object'

 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
--- a/client/src/tsconfig.app.json
+++ b/client/src/tsconfig.app.json
@ -3,7 +3,6 @@
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
-    "module": "esnext",
    "types": [],
    "lib": [
      "es2017",
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@ -1,6 +1,7 @@
 {
  "compileOnSave": false,
  "compilerOptions": {
+    "downlevelIteration": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
@ -13,7 +14,7 @@
    "suppressImplicitAnyIndexErrors":true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
-    "target": "es5",
+    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
--- a/client/yarn.lock
+++ b/client/yarn.lock