Fix typescript errors and add a new config file for compilation checks (

oppia#7293)

* Fix errors

* Remove extra conversion

* Fix lint

* Disable frontend test

* Enable test

* Add default imports

* Enable webpack to halt in case of errors

* Add async for only prod mode

* Fix import issues

* Fix subsequent var dec issue

* Add semicolon

* Fix test

* Test that webpack fails on compilation errors

* Webpack fails, revert test commit

* Remove new errors

.github/CODEOWNERS

@@ -14,6 +14,7 @@
 # Angular Migration team
 /typings/ @ankita240796
 /tsconfig.json @ankita240796
+/tsconfig-for-compile-check.json @ankita240796
 
 
 # Answer classification team.

core/templates/dev/head/App.ts

@@ -65,8 +65,8 @@ require('domain/utilities/UrlInterpolationService.ts');
 
 require('app.constants.ajs.ts');
 
-// The following file uses constants in app.constants.ts and hence needs to be
-// loaded after app.constants.ts
+// The following file uses constants in app.constants and hence needs to be
+// loaded after app.constants
 require('I18nFooter.ts');
 
 angular.module('oppia').config([

core/templates/dev/head/AppInit.ts

@@ -58,8 +58,6 @@ const bootstrapFn = (extraProviders: StaticProvider[]) => {
 };
 const downgradedModule = downgradeModule(bootstrapFn);
 
-declare var angular: any;
-
 angular.module('oppia', [
   'dndLists', 'headroom', 'infinite-scroll', 'ngAnimate',
   'ngAudio', 'ngCookies', 'ngImgCrop', 'ngJoyRide', 'ngMaterial',

core/templates/dev/head/AppSpec.ts

@@ -19,12 +19,12 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // App.ts is upgraded to Angular 8.
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 // ^^^ This block is to be removed.
 
 describe('Constants Generating', function() {

core/templates/dev/head/app.constants.ajs.ts

@@ -18,7 +18,7 @@
 
 // TODO(#7092): Delete this file once migration is complete and these AngularJS
 // equivalents of the Angular constants are no longer needed.
-import { AppConstants } from 'app.constants.ts';
+import { AppConstants } from 'app.constants';
 
 for (var constantName in constants) {
   angular.module('oppia').constant(constantName, constants[constantName]);

core/templates/dev/head/components/forms/custom-forms-directives/audio-file-uploader.directive.ts

@@ -68,7 +68,7 @@ angular.module('oppia').directive('audioFileUploader', [
           'audio-file-uploader-form' + IdGenerationService.generateNewId());
         angular.element(document).on(
           'change', '.' + scope.inputFieldClassName, function(evt) {
-            var file = evt.currentTarget.files[0];
+            var file = (<HTMLInputElement>evt.currentTarget).files[0];
             if (!file) {
               scope.onFileCleared();
               return;

core/templates/dev/head/components/forms/custom-forms-directives/image-uploader.directive.ts

@@ -103,8 +103,9 @@ angular.module('oppia').directive('imageUploader', [
           'image-uploader-file-input' + IdGenerationService.generateNewId());
         angular.element(document).on(
           'change', '.' + scope.fileInputClassName, function(evt) {
-            var file = evt.currentTarget.files[0];
-            var filename = evt.target.value.split(/(\\|\/)/g).pop();
+            var file = (<HTMLInputElement>evt.currentTarget).files[0];
+            var filename = (<HTMLInputElement>evt.target).value.split(
+              /(\\|\/)/g).pop();
             scope.errorMessage = validateUploadedFile(file, filename);
             if (!scope.errorMessage) {
               // Only fire this event if validations pass.

core/templates/dev/head/components/question-directives/question-player/question-player.directive.ts

@@ -420,8 +420,8 @@ angular.module('oppia').directive('questionPlayer', [
                       WRONG_ANSWER_PENALTY_FOR_MASTERY;
                   }
                 } else {
-                  for (var skillId in masteryChangePerQuestion) {
-                    masteryChangePerQuestion[skillId] -=
+                  for (var masterySkillId in masteryChangePerQuestion) {
+                    masteryChangePerQuestion[masterySkillId] -=
                       WRONG_ANSWER_PENALTY_FOR_MASTERY;
                   }
                 }

core/templates/dev/head/components/question-directives/question-player/services/question-player-state.service.spec.ts

@@ -19,12 +19,12 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // question-player-state.service.ts is upgraded to Angular 8.
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 // ^^^ This block is to be removed.
 
 require(

core/templates/dev/head/components/ratings/rating-computation/rating-computation.service.spec.ts

@@ -17,7 +17,7 @@
  */
 
 import { RatingComputationService } from
-  'components/ratings/rating-computation/rating-computation.service.ts';
+  'components/ratings/rating-computation/rating-computation.service';
 
 describe('Rating computation service', () => {
   let ratingComputationService: RatingComputationService;

core/templates/dev/head/components/score-ring/score-ring.directive.ts

@@ -31,16 +31,19 @@ angular.module('oppia').directive('scoreRing', [
       controller: ['$scope', '$timeout', '$window', 'COLORS_FOR_PASS_FAIL_MODE',
         function($scope, $timeout, $window, COLORS_FOR_PASS_FAIL_MODE) {
           var ctrl = this;
+
+          const circle = <SVGCircleElement>(
+            document.querySelector('.score-ring-circle'));
+          const radius = circle.r.baseVal.value;
+          const circumference = (radius * 2 * Math.PI);
+
           var setScore = function(percent) {
             const offset = circumference - percent / 100 * circumference;
-            circle.style.strokeDashoffset = offset;
+            circle.style.strokeDashoffset = offset.toString();
           };
 
-          const circle = document.querySelector('.score-ring-circle');
-          const radius = circle.r.baseVal.value;
-          const circumference = radius * 2 * Math.PI;
           circle.style.strokeDasharray = `${circumference} ${circumference}`;
-          circle.style.strokeDashoffset = circumference;
+          circle.style.strokeDashoffset = circumference.toString();
           $scope.$watch(function() {
             return ctrl.getScore();
           }, function(newScore) {

core/templates/dev/head/components/state-editor/state-editor-properties-services/state-editor.service.spec.ts

@@ -18,7 +18,7 @@
 
 /* eslint-disable max-len */
 import { SolutionValidityService } from
-  'pages/exploration-editor-page/editor-tab/services/solution-validity.service.ts';
+  'pages/exploration-editor-page/editor-tab/services/solution-validity.service';
 /* eslint-enable max-len */
 
 require(

core/templates/dev/head/components/state-editor/state-editor-properties-services/state-property.service.spec.ts

@@ -20,7 +20,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // state-property.service.ts is upgraded to Angular 8.
 import { ExplorationDraftObjectFactory } from
-  'domain/exploration/ExplorationDraftObjectFactory.ts';
+  'domain/exploration/ExplorationDraftObjectFactory';
 // ^^^ This block is to be removed.
 
 require('pages/exploration-editor-page/services/change-list.service.ts');

core/templates/dev/head/components/state-editor/state-interaction-editor/state-interaction-editor.directive.spec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // state-interaction-editor.directive.ts is upgraded to Angular 8.
 import { ExplorationFeaturesService } from
-  'services/ExplorationFeaturesService.ts';
+  'services/ExplorationFeaturesService';
 // ^^^ This block is to be removed.
 
 require(

core/templates/dev/head/domain/classifier/AnswerClassificationResultObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { AnswerClassificationResultObjectFactory } from
-  'domain/classifier/AnswerClassificationResultObjectFactory.ts';
+  'domain/classifier/AnswerClassificationResultObjectFactory';
 
 require('domain/exploration/OutcomeObjectFactory.ts');
 require(

core/templates/dev/head/domain/classifier/ClassifierObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ClassifierObjectFactory } from
-  'domain/classifier/ClassifierObjectFactory.ts';
+  'domain/classifier/ClassifierObjectFactory';
 
 describe('Classifier Object Factory', () => {
   let classifierObjectFactory: ClassifierObjectFactory;

core/templates/dev/head/domain/collection/CollectionPlaythroughObjectFactory.ts

@@ -17,7 +17,7 @@
  * collection playthrough domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/collection/CollectionRightsObjectFactory.ts

@@ -17,7 +17,7 @@
  * collection rights domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/collection/CollectionRightsObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { CollectionRightsObjectFactory } from
-  'domain/collection/CollectionRightsObjectFactory.ts';
+  'domain/collection/CollectionRightsObjectFactory';
 
 describe('Collection rights object factory', () => {
   let collectionRightsObjectFactory: CollectionRightsObjectFactory = null;

core/templates/dev/head/domain/collection/CollectionUpdateServiceSpec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // CollectionUpdateService.ts is upgraded to Angular 8.
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionObjectFactory.ts');

core/templates/dev/head/domain/collection/CollectionValidationServiceSpec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // CollectionValidationService.ts is upgraded to Angular 8.
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionNodeObjectFactory.ts');

core/templates/dev/head/domain/collection/GuestCollectionProgressObjectFactory.ts

@@ -17,7 +17,7 @@
  * represents the progress of a guest playing through a collection.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/collection/GuestCollectionProgressObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { GuestCollectionProgressObjectFactory } from
-  'domain/collection/GuestCollectionProgressObjectFactory.ts';
+  'domain/collection/GuestCollectionProgressObjectFactory';
 
 describe('Guest collection progress object factory', () => {
   let guestCollectionProgressObjectFactory:

core/templates/dev/head/domain/collection/GuestCollectionProgressServiceSpec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // GuestCollectionProgressService.ts is upgraded to Angular 8.
 import { GuestCollectionProgressObjectFactory } from
-  'domain/collection/GuestCollectionProgressObjectFactory.ts';
+  'domain/collection/GuestCollectionProgressObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/collection/CollectionNodeObjectFactory.ts');

core/templates/dev/head/domain/creator_dashboard/CreatorDashboardBackendApiServiceSpec.ts

@@ -21,7 +21,7 @@ import { HttpClientTestingModule, HttpTestingController } from
 import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 
 import { CreatorDashboardBackendApiService } from
-  'domain/creator_dashboard/CreatorDashboardBackendApiService.ts';
+  'domain/creator_dashboard/CreatorDashboardBackendApiService';
 
 describe('Creator Dashboard backend API service', () => {
   let creatorDashboardBackendApiService:

core/templates/dev/head/domain/editor/undo_redo/ChangeObjectFactory.ts

@@ -21,7 +21,7 @@
 // TODO(bhenning): Consolidate the backend ExplorationChange and
 // CollectionChange domain objects.
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { downgradeInjectable } from '@angular/upgrade/static';
 import { Injectable } from '@angular/core';

core/templates/dev/head/domain/editor/undo_redo/ChangeObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 
 describe('Factory for Change domain objects', function() {
   let changeObjectFactory: ChangeObjectFactory = null;

core/templates/dev/head/domain/editor/undo_redo/UndoRedoServiceSpec.ts

@@ -19,7 +19,7 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // UndoRedoService.ts is upgraded to Angular 8.
 import { ChangeObjectFactory } from
-  'domain/editor/undo_redo/ChangeObjectFactory.ts';
+  'domain/editor/undo_redo/ChangeObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/editor/undo_redo/ChangeObjectFactory.ts');

core/templates/dev/head/domain/exploration/AnswerStatsObjectFactory.ts

@@ -17,7 +17,7 @@
  * particular answer from some particular state.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { Injectable } from '@angular/core';
 import { downgradeInjectable } from '@angular/upgrade/static';

core/templates/dev/head/domain/exploration/ExplorationDraftObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ExplorationDraftObjectFactory, ExplorationDraft } from
-  'domain/exploration/ExplorationDraftObjectFactory.ts';
+  'domain/exploration/ExplorationDraftObjectFactory';
 
 describe('ExplorationDraftObjectFactory', () => {
   describe('exploration draft object factory', () => {

core/templates/dev/head/domain/exploration/ExplorationObjectFactorySpec.ts

@@ -19,14 +19,14 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // ExplorationObjectFactory.ts is upgraded to Angular 8.
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
 import { ParamTypeObjectFactory } from
-  'domain/exploration/ParamTypeObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/ParamTypeObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/exploration/ExplorationObjectFactory.ts');

core/templates/dev/head/domain/exploration/InteractionObjectFactorySpec.ts

@@ -18,7 +18,7 @@
 
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // InteractionObjectFactory.ts is upgraded to Angular 8.
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/exploration/AnswerGroupObjectFactory.ts');

core/templates/dev/head/domain/exploration/ParamChangeObjectFactory.ts

@@ -17,7 +17,7 @@
  * domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { Injectable } from '@angular/core';
 import { downgradeInjectable } from '@angular/upgrade/static';

core/templates/dev/head/domain/exploration/ParamSpecsObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ParamTypeObjectFactory } from
-  'domain/exploration/ParamTypeObjectFactory.ts';
+  'domain/exploration/ParamTypeObjectFactory';
 
 require('domain/exploration/ParamSpecObjectFactory.ts');
 require('domain/exploration/ParamSpecsObjectFactory.ts');

core/templates/dev/head/domain/exploration/ParamTypeObjectFactory.ts

@@ -17,7 +17,7 @@
  * domain objects.
  */
 
-import * as cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { Injectable } from '@angular/core';
 import { downgradeInjectable } from '@angular/upgrade/static';

core/templates/dev/head/domain/exploration/ParamTypeObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { ParamTypeObjectFactory, ParamType } from
-  'domain/exploration/ParamTypeObjectFactory.ts';
+  'domain/exploration/ParamTypeObjectFactory';
 
 describe('ParamType objects', () => {
   let paramType: ParamTypeObjectFactory = null;

core/templates/dev/head/domain/exploration/RecordedVoiceoversObjectFactorySpec.ts

@@ -17,7 +17,7 @@
  */
 
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 
 require('domain/exploration/RecordedVoiceoversObjectFactory.ts');
 require('domain/exploration/VoiceoverObjectFactory.ts');

core/templates/dev/head/domain/exploration/StatesObjectFactorySpec.ts

@@ -19,12 +19,12 @@
 // TODO(#7222): Remove the following block of unnnecessary imports once
 // StatesObjectFactory.ts is upgraded to Angular 8.
 import { ParamChangeObjectFactory } from
-  'domain/exploration/ParamChangeObjectFactory.ts';
-import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory.ts';
+  'domain/exploration/ParamChangeObjectFactory';
+import { RuleObjectFactory } from 'domain/exploration/RuleObjectFactory';
 import { VoiceoverObjectFactory } from
-  'domain/exploration/VoiceoverObjectFactory.ts';
+  'domain/exploration/VoiceoverObjectFactory';
 import { WrittenTranslationObjectFactory } from
-  'domain/exploration/WrittenTranslationObjectFactory.ts';
+  'domain/exploration/WrittenTranslationObjectFactory';
 // ^^^ This block is to be removed.
 
 require('domain/exploration/StatesObjectFactory.ts');