CODEWITHSUNDEEP
angular-cliangular5
tturra
tturra

Reputation: 11

Configure and manually run application in Angular 5

I am starting working with Angular, more specifically v5, but I am stuck in something.

One of my requirements is to have a way to configure and manually bootstrap the application from an HTML page. I have made some researches and I found that Angular v1.x had a way of doing that. Example:

Configuration:

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

And then run the application, inserting it in a specific location on the page:

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

My question is how can I do it in Angular 5? Currently I set up the application with angular-cli, but I did not find anything specifically to the point I mentioned.

Upvotes: 0

Views: 558

Answers (1)

tturra
tturra

Reputation: 11

After a lot of digging and talks I could find out an answer for my question. I am adding here the steps I made to achieve the desired solution:

  1. In the main.ts file import a global configuration class that contains my configuration object and desired logic to set and get attributes:
import { Configuration } from './app/bootstrap/configuration';
  1. Also in the main.ts file, create an object that will handle the configuration and make the Angular bootstrap as follows:
window['myConfigurationFunction'] = {
  config: function (config) {

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

    // Bootstrap Angular
    platformBrowserDynamic().bootstrapModule(myApp);
  }
}
  1. In a component, use the global configuration class with the settings defined on index.html:
import { Injectable } from '@angular/core';
import { Configuration } from './app/bootstrap/configuration';

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

    log() {
        console.log('My property', Configuration.features.myProperty);
    }
}
  1. In the index.html, call the configuration function defined previously in the main.tsfile:
[...]
<my-app></my-app>
<script>
    let configExample = {
        myProperty: 'Hello World!'
    }

    myConfigurationFunction.config(configExample);
</script>

Upvotes: 1

Related Questions