Update angular

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

client/package.json

@@ -31,21 +31,20 @@
     "punycode": "^1.4.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.1",
+    "@angular-devkit/build-angular": "~0.801.2",
-    "@angular/animations": "~7.2.4",
+    "@angular/animations": "~8.1.2",
-    "@angular/cdk": "^7.3.4",
+    "@angular/cdk": "^8.1.1",
-    "@angular/cli": "~7.3.1",
+    "@angular/cli": "~8.1.2",
-    "@angular/common": "~7.2.4",
+    "@angular/common": "~8.1.2",
-    "@angular/compiler": "~7.2.4",
+    "@angular/compiler": "~8.1.2",
-    "@angular/compiler-cli": "~7.2.4",
+    "@angular/compiler-cli": "~8.1.2",
-    "@angular/core": "~7.2.4",
+    "@angular/core": "~8.1.2",
-    "@angular/forms": "~7.2.4",
+    "@angular/forms": "~8.1.2",
-    "@angular/http": "~7.2.4",
+    "@angular/language-service": "~8.1.2",
-    "@angular/language-service": "~7.2.4",
+    "@angular/platform-browser": "~8.1.2",
-    "@angular/platform-browser": "~7.2.4",
+    "@angular/platform-browser-dynamic": "~8.1.2",
-    "@angular/platform-browser-dynamic": "~7.2.4",
+    "@angular/router": "~8.1.2",
-    "@angular/router": "~7.2.4",
+    "@angular/service-worker": "~8.1.2",
-    "@angular/service-worker": "~7.2.4",
     "@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"
   }
 }

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

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
 

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

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

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
 

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

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

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
 

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,

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('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
-  @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
+  @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
 
   titlePage: string
   selection: SelectionType = {}

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[]
 

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
 

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[]

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)
   }
 ]
 

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('emailInput', { static: true }) input: ElementRef
-  @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef
+  @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
 
   error: string = null
   forgotPasswordEmail = ''

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

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 }[] = []
 

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

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

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[]

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

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

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

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

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
 

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('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
 
-  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
 
   @Input() video: Video | VideoDetails
 

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>[] = []
 

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

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

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

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('videoUpload', { static: false }) videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
 
   secondStepType: 'upload' | 'import-url' | 'import-torrent'
   videoName: string

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('visitorModal', { static: true }) visitorModal: NgbModal
-  @ViewChild('textarea') textareaElement: ElementRef
+  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
 
   addingComment = false
 

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
 

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>

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[] = []

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

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('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
+  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement

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
   ],
 

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
         }

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
 */
 
-/**
- * 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 */

client/src/tsconfig.app.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "module": "esnext",
     "types": [],
     "lib": [
       "es2017",

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"
     ],