I am trying to build a project combining Angular 2 and Twig. At a high level the angular app would basically be a site generator. In the project there is a views folder that would contain a number of different site templates, which are Twig files. One of the components makes a request for a JSON file, which provides specific site information like the title, header, content, etc. It also specifies some sort of config variable that tells Angular which template to pull. That template is combined with data in the JSON and the site is compiled. Does something like this sound possible?

I found this project and the developer kindly updated it to support the latest version of Angular. I put together a basic project with the angular cli and am trying to get it to render a Twig file as a template. If I include the Twig file as a template string it renders fine. If I include it as a templateUrl like this:

Component

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Twig } from '@manekinekko/angular-twig';

@Twig({
  selector: 'app-test',
  templateUrl: '../views/test.html.twig',

   context: {
       title: 'Angular2 ❤ Twig',
       content_1: 'blah',
       content_2: 'content 2'
   },
})

export class TestComponent implements OnInit {

 content_1 ='content 1';
 constructor() { }

    ngOnInit() {
    }

}

Template

{{ content_1 }}

I am getting the error that content_1 is not defined, though it works fine as a template string. I am not quite sure what is going on. I know I have the template in a separate director than the component. Could that be the problem? Ideally I would want the app to work that way so I can have all the separate site template files in a separate folder.

I welcome any thoughts to a totally alternative approach as well. Thanks!