How to realize website with hundreds of pages in Angular2

All following solutions are tricky. Official Angular team support issue is here.

Thanks to @EricMartinez for pointing me to @alexpods solution:

  toComponent(template, directives), 

function toComponent(template, directives = []) {
  @Component({ selector: 'fake-component' })
  @View({ template, directives })
  class FakeComponent {}

  return FakeComponent;

And another similar (from @jpleclerc):

  new AsyncRoute({
    path: '/article/:id',
    component: ArticleComponent,
    name: 'article'

@Component({ selector: 'base-article', template: '<div id="here"></div>', ... })
class ArticleComponent {
    public constructor(private params: RouteParams, private loader: DynamicComponentLoader, private injector: Injector){


    ngOnInit() {
      var id = this.params.get('id');
      @Component({ selector: 'article-' + id, templateUrl: 'article-' + id + '.html' })
      class ArticleFakeComponent{}


A bit different (from @peter-svintsitskyi):

// Faking class declaration by creating new instance each time I need.
        var component = new (<Type>Function)();
        var annotations = [
            new Component({
                selector: "foo"
            new View({
                template: text,
                directives: [WordDirective]

        // I know this will not work everywhere
        Reflect.defineMetadata("annotations", annotations, component);

        // compile the component
        this.compiler.compileInHost(<Type>component).then((protoViewRef: ProtoViewRef) => {

Leave a Comment