Replace templateUrl with template in /extensions

Replace templateUrl: UrlInterpolationService.getDirectiveTemplateUrl('somePath') with template: require(somePath) and use webpack for inserting the HTML templates into the generated bundles. This will improve latency and bandwidth of the directives loading since Angular doesn’t need to retrieve the HTML via AJAX request.

Work to be done:

• extensions/objects @rohitkatlaa
• extensions/rich_text_components @sseth99

Steps:

1. Replace the templateUrl: UrlInterpolationService.someFunction('someUrl') with template: require('someUrl') in one of the extensions subfolder (example: https://github.com/oppia/oppia/pull/8503/files#diff-0969d47989e137044b352fbefd9e6476)
2. If UrlInterpolationService is not needed in the directive anymore remove it. Also remove require('domain/utilities/url-interpolation.service.ts'); from the file.

Later when the directive is migrated to Angular 8 we can replace template: require('somePath') with templateUrl: 'somePath' and use @ngtools/webpack

Resources: http://dckesler.github.io/posts/2015/05/12/angular-directives-webpack.html https://medium.com/@frosty/angularjs-template-vs-templateurl-cdde055b7907 https://antjanus.com/blog/web-development-tutorials/switching-from-angular2-template-loader-to-ngtools-webpack/

[jameesjohn]

This issue is currently blocked by the work on Angular 8 migration. However, once all the services have been migrated to Angular 8, we can resume working on this.

[sseth99]

#7643 is this issue. I think you linked to the wrong PR @sseth99 ?

Ah, yes; I am sorry, I the PR is #8632 . As I mentioned before it makes changes to almost all the files in /extensions/rich_text_components except ‘/extensions/rich_text_components/Video/directives/oppia-noninteractive-video.directive.ts’ ; so I’ll be working on this one, right?