Angular-2 : Change favicon icon as per configuration

问题

I am rendering a dynamic page, menu and other items in my application. I also want to change favicon as per configured by admin.

Say, for example, if when my page load configured favicon is xyz.png then it will show xyz.png as the favicon.

As in the below image, new favicon should replace existing one near by "Test Application". Right now, it shows the default favicon as seen below.

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>

I get a new favicon on every component load, so you have to just change favicon icon from any component call.

回答1:

app.module.ts

import {NgModule} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './path/to/app.component';
import {AppService} from './path/to/app.service';
// ....

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        // ...
    ],
    bootstrap: [AppComponent],
    providers: [AppService]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

app.service.ts

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';


@Injectable()
export class AppService {

    constructor(@Inject(DOCUMENT) private _document: HTMLDocument, private http:Http) 
    getAppDetails(appId: string) {

            return this.http.post(url, appId)
                .map((response: Response) => {
                    let details = response.json();
                    return details;
                })
                .do(data => console.log(data))
                .catch(this.handleError);
    }

     private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

    setAppFavicon(id: string, basepath: string, icon: string){
       this._document.getElementById('appFavicon').setAttribute('href', basepath+"/"+ icon);
    }
}

app.component.ts:

import {Component} from "@angular/core";
import {AppService} from "../path/to/app.service";


@Component({
    selector: 'application',
    templateUrl: './path/to/app.component.html'
})
export class ApplicationComponent {

    details: any;

    constructor(private appService: AppService) {

        this.details = appService.getAppDetails(id);
        appService.setAppFavicon(id,basepath,this.details.icon);

    }


}

回答2:

In index.html set link tag

<link id="appFavicon" rel="icon" type="image/x-icon" href="favicon.ico">

and somewhere in your code import

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private _document: HTMLDocument) {}

and use it like this

this._document.getElementById('appFavicon').setAttribute('href', '/your/icon/path.ico');

Angular 5.0 >

import { DOCUMENT } from '@angular/platform-browser';

回答3:

We have nodejs running in the back-end, we have URL specific favicon to display as a requirement.

In app.js we implemented a resolveConfig() function which will help us to get the url specific configuration.

The return value of above function is used in get favicon call as below.

app.js

app.get('/favicon.ico',(req,res)=> {
   let key = resolveConfig(req.hostname);
   switch (key) {
     case 'a':
       res.sendFile(__dirname + '/dist/assets/a.ico');
       break;
     case 'b':
       res.sendFile(__dirname + '/dist/assets/b.ico');
       break;
   }
});

index.html

<link rel="icon" type="image/x-icon" href="favicon.ico"/>

*this might be useful if you have a nodejs in backend.

回答4:

Then you can use javascript to set favicon per configuration by adding following function to your <script> block:

 <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);
        });        

//here favicon is set
(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '../path/to/xyz.png'; //path to selected favicon file
    document.getElementsByTagName('head')[0].appendChild(link);
}());

    </script>

回答5:

Outside <application></application>, you can to use only Title class:

import {Title} from '@angular/platform-browser';

export class YourClass(){

  constructor(private title: Title){}

  yourNameMethod(){
    this.title.setTitle('your title');
  }
}

来源：https://stackoverflow.com/questions/39845082/angular-2-change-favicon-icon-as-per-configuration

标签

angular

favicon