Konfigurieren und manuell Anwendung in Angular ausführen 5

Question

Ich fange an, mit Angular, genauer gesagt v5 zu arbeiten, aber ich bin in etwas stecken.

Eine meiner Anforderungen ist eine Möglichkeit, die Anwendung von einer HTML-Seite zu konfigurieren und manuell zu starten. Ich habe einige Nachforschungen angestellt und festgestellt, dass Angular v1.x eine Möglichkeit hatte, dies zu tun. Beispiel:

Konfiguration:

var config = { //my configuration object } 
myApp.config(['myConfigProvider', 'myBaseFeaturesProvider', function(myConfigProvider, myBaseFeaturesProvider) { 
    //make the necessary configuration with the config object 
}]); 

Und dann die Anwendung ausführen, es in einer bestimmten Position auf der Seite einfügen:

myApp.run(['$templateCache', function($templateCache) { 
    angular.element('#myId').html($templateCache.get('path/to/app/html/app.html')); 
}]); 

Meine Frage ist, wie kann ich es in Angular 5? Momentan habe ich die Anwendung mit angular-cli eingerichtet, aber zu dem von mir genannten Punkt habe ich nichts gefunden.

Answer 1

Nach viel Graben und Gesprächen konnte ich eine Antwort auf meine Frage finden. Ich füge hier die Schritte, die ich gemacht die gewünschte Lösung zu erreichen:

1. In dem main.ts Datei-Import eine globale Konfigurationsklasse, die mein Konfigurationsobjekt enthält und die gewünschte Logik zu setzen und erhalten Attribute:

import { Configuration } from './app/bootstrap/configuration'; 

2. auch in der main.ts Datei, erstellen Sie ein Objekt, das die Konfiguration und macht den Winkel Bootstrap behandelt wie folgt:

window['myConfigurationFunction'] = { 
    config: function (config) { 

    // Set the configuration as a class attribute 
    Configuration.features = config; 

    // Bootstrap Angular 
    platformBrowserDynamic().bootstrapModule(myApp); 
    } 
} 

3. In einer Komponente, verwenden Sie die globale Konfigurationsklasse mit den auf index.html definierten Einstellungen:

import { Injectable } from '@angular/core'; 
import { Configuration } from './app/bootstrap/configuration'; 

@Injectable() 
export class MyService { 
    constructor() { } 

    log() { 
     console.log('My property', Configuration.features.myProperty); 
    } 
} 

4. In der index.html, rufen die Funktion Konfiguration definiert die zuvor in der main.ts Datei:

[...] 
<my-app></my-app> 
<script> 
    let configExample = { 
     myProperty: 'Hello World!' 
    } 

    myConfigurationFunction.config(configExample); 
</script>