how to set localhost path on iframe in angular 4

Question

Hi please help to solve the code. if I embed static HTML file that is stored in my project directory the iframe is not working when i embed live URL in the iframe the iframe is working fine

here my folder structure

src
|-app
|  |-components
|      |-template
|            |-template.component.html
|            |-template.component.ts
|-assets
|-templates
     |-template1
          |-index.html

template.component.html

<iframe [src]="getIframe()" frameborder="0" ></iframe>

template.component.ts

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css']
})

export class TemplateComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }

  ngOnInit() {
  }

  getIframe(){
    console.log('iframe');
    return this.sanitizer.bypassSecurityTrustResourceUrl('../../../templates/template1/index.html');
  }

}

Answer 1

Make a file in root directory which saves an alias to filepath mappings, then call the function from that file by passing alias which will give you the path of the required file. Example:

    'use strict';
define([    
], function(){

    var baseUrl = '/dashboard/app'; // the url starting with this file

    var html = {
        'file1'     : 'file_1.html',
        'file2'     : 'app2/file_2.html'
    };

    function getHtml(alias) {
        if(html[alias]) {
            return baseUrl + html[alias];
        }
    };

    return {
        getHtml : getHtml
    }; });

Now require this file and call the getHtml function with the required file path , this gives you the accurate file path from home directory.

This should most probably work, try and let me know.