Angular-2: Altere o ícone favicon conforme a configuração

Question

Oct 04, 2016, 07:56 AM

Angular-2: Altere o ícone favicon conforme a configuração

Estou renderizando uma página dinâmica, menu e outros itens no meu aplicativo. Eu também quero mudar o favicon conforme configurado pelo admin.

Digamos, por exemplo, se quando meucarregamento da página o favicon configurado éxyz.png então ele vai mostrarxyz.png como o favicon.

Como na imagem abaixo, o novo favicon deve substituir o existente próximo por "Test Application". No momento, ele mostra o favicon padrão, como visto abaixo.

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>

Eu recebo um novo favicon em cada carregamento de componente, então você precisa alterar o ícone favicon de qualquer chamada de componente.