In angular cli wie können Sie Metadaten zu Routen hinzufügen, z. title und description tags

In angular cli wie können Sie Metadaten zu Routen hinzufügen, z. Titel und Beschreibung Tags?In angular cli wie können Sie Metadaten zu Routen hinzufügen, z. title und description tags

Das sind meine Routen:

import { Route} from '@angular/router'; 
import { HomeComponent } from './home.component'; 

export const HomeRoutes: Route[] = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'home', 
    component: HomeComponent 
    } 
];

I Titel und eine Beschreibung zu diesen Routen hinzufügen wollen, so dass sie im Browser zu sehen sind z.B. Titel für jede Route.

Darüber hinaus möchte ich, dass sie von Bots, z. Google SEO-Bots.

Ich benutze angular cli mit Webpack, eckige Version 4 und Typoskript.

Aktuelle Fehler:

Quelle

2017-04-13 AngularM

Route hat eine 'data' Eigenschaft. Es kann sich lohnen, genauer hinzusehen. Es ist definiert als: * Daten sind zusätzliche Daten, die der Komponente über ActivatedRoute * zur Verfügung gestellt werden. Was auch immer das heißt. :) Auf angular.io kein gutes Beispiel finden. –

Es gibt eine npm Modul NG2-Metadaten [https://www.npmjs.com/package/ng2-metadata] es wird die Notwendigkeit dienen.

Beispielcode.

export const routes = [ 
    { 
    path: 'home', 
    component: HomeComponent, 
    data: { 
     metadata: { 
     title: 'Sweet home', 
     description: 'Home, home sweet home... and what?' 
     } 
    } 
    }, 
    { 
    path: 'duck', 
    component: DuckComponent, 
    data: { 
     metadata: { 
     title: 'Rubber duckie', 
     description: 'Have you seen my rubber duckie?' 
     } 
    } 
    }, 
    { 
    path: 'toothpaste', 
    component: ToothpasteComponent, 
    data: { 
     metadata: { 
     title: 'Toothpaste', 
     override: true, // prevents appending/prepending the application name to the title attribute 
     description: 'Eating toothpaste is considered to be too healthy!' 
     } 
    } 
    } 
    ... 
];

Fügen Sie diese in app.module.ts

imports: [ 
    ... 
    RouterModule.forRoot(routes), 
    MetadataModule.forRoot() 
    ],

Und es in der Komponente Konstruktor injizieren.

constructor(private metadataService: MetadataService) { }

Quelle

2017-04-13 16:26:08

Danke, was ist der Link, den ich der angularen CLI-JSON-Datei dafür hinzufügen muss? – AngularM

der Link ist in Antwort erwähnt, enthalten diese js 'node_modules/ng2-Metadaten/Bundles/ng2-metadata.umd.min.js' in eckigen-cli.json –

Ich habe diesen Link hinzugefügt: node_modules/ng2-Metadaten /bundles/ng2-metadata.umd.min.js zum Abschnitt scripts des angular-cli.json. Aber wenn ich diesen Bash Befehl mache: "ng build --prod --aot --output-hashing = none" bekomme ich diesen Fehler: "Fehler im Multi-Skript Loader" – AngularM

Als Autor ng2-metadata und @ngx-meta/core Projekte, würde ich Ihnen vorschlagen, einen Blick auf die Paketbeschreibung haben (Readme-Datei), als Readme Dateien enthalten up-to-date Informationen in den meisten Fällen.

Es gibt eine Abschreibung Warnung auf dem npm page von ng2-metadata und sagte, dass das Projekt ist veraltet, nicht mehr aufrecht erhalten und weiter jetzt bei @ngx-meta/core.

Wenn Sie mit @ngx-meta/core wechseln, werden Sie feststellen, dass die aktuellen Probleme, die Sie hier beschrieben haben, bereits gelöst wurden.

Über @ngx-meta/core: @ngx-meta/core ist der Nachfolger von ng2-metadata und die tatsächlichen Versionen sind v0.4.x und v0.2.x.

If you're using @angular v4.x.x , use the latest release of v0.4.x ([master] branch).

Die neueste Version für Angular 4 ist v0.4.0-rc.1 ab sofort.

If you're using @angular v2.x.x , use the latest release of v0.2.x ([v0.2.x] branch).

Die neueste Version für Angular 2 ist v0.2.0-rc.5 ab sofort.

Quelle

2017-04-14 11:50:58

In angular cli wie können Sie Metadaten zu Routen hinzufügen, z. title und description tags

Antwort

Verwandte Themen