Cómo realizar un sitio web con cientos de páginas en Angular2

Estoy preparando el sitio web de SPA que contiene cientos de páginas similares a artículos (aparte de eCommerce, inicio de sesión, etc.). Cada artículo tiene su propia URL. Quiero realizarlo usando Angular2. La única solución que encontré hasta ahora es:

1. para preparar cientos de componentes de Agular2, un componente para cada artículo …

… con templateUrl apuntando al marcado del artículo. Entonces necesitaré cientos de componentes similares a:

@core.Component({ selector: 'article-1', templateUrl: 'article1.html' }) export class Article1 {} 

2. para mostrar un artículo usando AsyncRoute

ver Carga diferida de componentes de ruta en Angular2

 @core.Component({ selector: 'article-wrapper', template: '' }) @router.RouteConfig([ new router.AsyncRoute({ path: '/article/:id', loader: () => { switch (id) { case 1: return Article1; case 2: return Article2; //... repeat it hundreds of times } }, name: 'article' }) ]) class ArticleWrapper { } 

En Angular1 había una directiva ngInclude, que falta en Angular2 debido a problemas de seguridad (ver aquí ).

[Editar 1] No solo hay un problema con el código en sí. El problema también está en la naturaleza estática de esta solución. Si necesito un sitio web con un mapa del sitio y una estructura de página dinámica, es necesario agregar una sola página para recomstackr todo el módulo JavaScript de ES6.

[Editar 2] El concepto “markup x html como datos” (donde el marcado no es solo HTML estático sino también HTML con componentes activos) es un concepto básico de toda la web (cada CMS tiene sus datos de marcado en la base de datos). Si no existe la solución Angular2 para él, niega este concepto básico. Creo que debe existir algún truco.

Todas las siguientes soluciones son engañosas. El problema oficial de soporte del equipo angular está aquí .

Gracias a @EricMartinez por señalarme la solución @alexpods :

 this.laoder.loadIntoLocation( toComponent(template, directives), this.elementRef, 'container' ); function toComponent(template, directives = []) { @Component({ selector: 'fake-component' }) @View({ template, directives }) class FakeComponent {} return FakeComponent; } 

Y otro similar ( de @jpleclerc ):

 @RouteConfig([ new AsyncRoute({ path: '/article/:id', component: ArticleComponent, name: 'article' }) ]) ... @Component({ selector: 'base-article', template: '
', ... }) 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{} this.loader.loadAsRoot( ArticleFakeComponent, '#here' injector ); } }

Un poco diferente ( de @ peter-svintsitskyi ):

 // Faking class declaration by creating new instance each time I need. var component = new (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(component).then((protoViewRef: ProtoViewRef) => { this.viewContainer.createHostView(protoViewRef); });