Angular-2: Cambiar el ícono de favicon según la configuración

Question

Oct 04, 2016, 07:56 AM

Angular-2: Cambiar el ícono de favicon según la configuración

Estoy representando una página dinámica, un menú y otros elementos en mi aplicación. También quiero cambiar el favicon según lo configurado por el administrador.

Digamos, por ejemplo, si cuando micarga de la página favicon configurado esxyz.png entonces mostraráxyz.png como el favicon

Como en la imagen a continuación, el nuevo favicon debería reemplazar al existente cerca de "Aplicación de prueba". En este momento, muestra el favicon predeterminado como se ve a continuación.

index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/MyFirstAngular2/" >
    <title>Angular 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" id="appIcon" href="/favicon.ico" type="image/x-icon" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/Site.css" rel="stylesheet" />

    <script src="scripts/jquery-2.2.1.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="scripts/main/shim.min.js"></script>
    <script src="scripts/main/zone.js"></script>
    <script src="scripts/main/reflect-metadata.js"></script>
    <script src="scripts/main/system.src.js"></script>
    <script src="scripts/system.config.js"></script>
    <script>

        document.SYSTEMJS_CONFIG.map.app = 'scripts/configs';

        document.SYSTEMJS_CONFIG.packages.app = { main: 'application.ts', defaultExtension: 'ts' };

        System.config(document.SYSTEMJS_CONFIG);

        System.import('app').catch(function (err) {
            console.error(err);
        });        
    </script>

</head>
<body>
        <application></application>
</body>
</html>

Obtengo un nuevo favicon en cada carga de componentes, por lo que solo tiene que cambiar el ícono de favicon de cualquier llamada de componente.