Leveraging $sceDelegateProvider for allowing Youtube in Typescript

I'm currently facing an issue with my app where I am trying to enable users to input Youtube URLs for videos to be displayed on the site. However, before implementing this feature, I need to whitelist Youtube. How can I adjust my typescript file (app.ts) to accommodate this? The documentation suggests the following configuration:

.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',                    // trust all resources from the same origin
        '*://www.youtube.com/**'   // trust all resources from `www.youtube.com`
    ]);
});

The problem I am encountering is that my .config does not include the function keyword, which I suspect is due to using typescript. Currently, my config code looks like this:

angular.module('MyApp', ['ngRoute', 'ngResource']).config(($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider, $sceDelegateProvider: ng.ISCEDelegateProvider ) => {
        $sceDelegateProvider.resourceUrlWhitelist([
            'self',                    
            '*://www.youtube.com/**'   
        ]);

Despite making these adjustments, I am still receiving an error indicating that the URL is not being whitelisted. Should I move the .config block containing the function or is there a way to integrate the Delegate provider within the existing setup alongside route and location providers?

Answer №1

After attempting adjustments to the web configuration without success, I had to pivot and utilize the embed URL directly from the YouTube video to achieve the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The variable "theme" is referenced prior to being initialized

https://i.stack.imgur.com/QL0pa.png One of the variables in my code, theme, is set to be assigned a value from a for loop: let theme: Theme for (const themeObj of themeList) { const [muiThemeName, muiTheme] = Object.entries(themeObj)[0]!; if (muiThem ...

Reposition the selection column to the right side within the UI-Grid

I am currently working with ui-grid and I need help relocating the selection column to the right side. Appreciate any assistance. Thank you! ...

What is the process for waiting on RxJS data and how should it be retrieved?

I am faced with a situation where I need to create a user through a function, but before proceeding with the creation process, I have to verify whether another user with the same userName is already present in the session: public createUser(form: FormGroup ...

Splitting JavaScript files in the "dist" folder based on their source folders can be achieved in Angular by using G

I’m currently utilizing gulp-angular for my project, but I’m facing a challenge due to my limited experience with node and gulp when it comes to modifying the default scripts task. My goal is to generate an optimized JS file for each folder within my ...

The initial update of the view does not occur when a component property changes in Angular 2 RC6

I am currently facing an issue with a component in my project. This component calls a service to retrieve locally stored JSON data, which is then mapped to an array of objects and displayed in the component view. The problem I am encountering is that the v ...

When trying to access a certain class property, I was met with the following error message: TypeError: Unable to read/set property 'x' of

Lately, I've delved into the realm of JavaScript / TypeScript and decided to create a basic React App using TypeScript. Within one of my components, I aim to switch between different components using a "state" (where each component will follow the pre ...

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

Updating the data attribute of an object in HTML using Angular

I am trying to embed a PDF viewer inside a component. In order to dynamically update the PDF document within a sanitizer, I need to use an attribute with []. This works fine with images. <img src="assets/pic.jpg"/> <img [src]="'assets/pi ...

How can I apply angular ng-repeat filter with specific criteria in mind?

I am currently developing an angular application and I need to present customer data in a table using ng-repeat. While I have successfully added ng-filter for searching the results based on user input, I am now looking to incorporate checkboxes to further ...

Tips for presenting a quiz in a random order and preventing duplicate questions in a React Native app

Hello everyone, I am working on creating a Quiz app in React Native that displays questions randomly without any duplication. So far, I have managed to display the Quiz questions randomly, but I'm stuck on preventing duplicates. This is a new learning ...

Are there discrepancies in isolated scopes among browsers, particularly older versions of Chrome, when using AngularJS 1.2rc2?

While testing an application on an outdated version of Chrome (5.0.3), I encountered a strange issue. Essentially, I have a controller set on a directive like this: <div ng-controller="MyController" class="my-directive-with-isolated-scope"> <!-- ...

The test function is not recognized by Cordova when the device is ready

Within my app.component.ts file, I have the following code snippet: export class AppComponent implements OnInit { constructor(private auth: AuthService, private fireBaseService: FirebaseService, ) {} ngOnInit() { this.auth.run(); document.addE ...

Make sure the first character of every sentence is capitalized in AngularJS

As soon as the first sentence is completed and the user presses the dot, the function must capitalize the first letter of the next sentence. However, when the second function starts to work, everything gets mixed up. Once the first letter is capitalized, ...

Modify the value of mat-slide-toggle from TypeScript code

This is the HTML code I have for a mat-slide-toggle element, with a toggleStatus() function: <span class="form-control form-control-plaintext"> <mat-slide-toggle name="status" checked="" ...

The intersection type of an array gets lost when used in the map() function

Running into an issue with my TypeScript code snippet where the mapped type is losing intersection type information inside the map(). type Foo = { foo: number }; type Bar = { bar: string }; const arr: Foo[] & Bar[] = [{ foo: 1, bar: 'bar' }] ...

Utilizing AngularJs to dynamically create input tags with the ng-model directive

How can I create a div and input tag upon button click, where the input tag contains ng-model and the div is bound to that input? Any solutions or suggestions are appreciated. ...

Unclear on the usage of "this" in arrow functions?

After going through various discussions and articles on this topic, I find myself still perplexed about the meaning of this in arrow functions. I've been encountering run-time errors with a code snippet similar to the following: export class Foo imp ...

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

My goal is to display the chart's information without requiring the user to hover over any part of the chart. I am utilizing Chart.js with Angular.js I have the same question as this one posted here: question here! html code: <div class="wrapper ...

The issue of declaration merging and complications with nested node_modules

Here is the structure I am working with: @my/app node_modules @types/angular @types/angular-translate @my/library node_modules @types/angular The issue arises from the fact that @types/angular-translate extends the definitions of @types/angular ...

How can we effectively test arrow functions in unit tests for Angular development?

this.function = () => { -- code statements go here -- } I am looking to write jasmine unit tests in Angular for the function above. Any suggestions on how to achieve this? it("should call service",()=>{ // I want to invoke the arrow funct ...