2016-05-30 26 views
0

Ich versuche, eine angular 2 App als Joomla-Komponente zu implementieren, mit angular2 Release-Kandidat 1. Aber ich habe Probleme, Routing zu arbeiten. Ich denke, das Problem etwas mit der Tatsache zu tun, dass die URL der Winkel AppAngular 2 Routing von Joomla Komponente

localhost/index.php?=com_mycomponent 

ist, ich habe den folgenden Code:

index.html

<html> 
    <head> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!--CSS--> 
    <!--<link rel="stylesheet" href="components/com_mycomponent/app/lib/bootstrap.min.css">--> 
    <link rel="stylesheet" href="components/com_mycomponent/app/styles/styles.css"> 

    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="components/com_mycomponent/app/lib/shim.min.js"></script> 
    <script src="components/com_mycomponent/app/lib/zone.js"></script> 
    <script src="components/com_mycomponent/app/lib/Reflect.js"></script> 

    <script src="components/com_mycomponent/lib/system.src.js"></script> 
    <script src="components/com_mycomponent/app/lib/system.config.js""></script> 

    <script> 
     System.import('components/com_mycomponent/app/scripts/bootstrapper').catch(function(err){ console.error(err); }); 
    </script> 
    <base href="/"> 
</head> 

<!-- 3. Display the application --> 
<body> 
    <body> 
     <my-app>Loading...</my-app> 
    </body> 
</body> 
</html> 

Bootstrap .ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import { ROUTER_PROVIDERS } from '@angular/router'; 
import {ShellComponent} from './shell.component'; 
import {HTTP_PROVIDERS} from '@angular/http'; 

bootstrap(ShellComponent, [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS 
    ]); 

shell.component.ts

import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
import { ROUTER_DIRECTIVES, Routes} from '@angular/router'; 

import {BComponent} from 'b.component'; 
import {AComponent} from 'a.component'; 


@Component({ 
    selector: 'my-app', 
    templateUrl: 'components/com_mycomponent/app/html/shell.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 

@Routes([ 
    { 
     path: '/b', 
     component: BComponent 
    }, 
    { 
     path: '/', 
     component: AComponent 
    } 
]) 
export class ShellComponent{ 
    constructor() { 
    } 

    // ngOnInit() { 
    //  this.router.navigate(['/egendefinertrapport']); 
    // } 
} 

shell.html

<a [routerLink]="['/b']">BComponent</a> 

Und ich die folgende Fehlermeldung erhalten:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'annotations' of undefined 

Ich habe versucht, die bash zu ändern href zu '/index.php?option=com_atkstat', einschließlich der RouterLink und Pfade - aber ohne Erfolg. Irgendwelche Abnehmer?

Antwort

0

Ich denke, Sie müssen eine benutzerdefinierte RouterUrlSerializer (neue RC-Router) und eine benutzerdefinierte LocationStrategy in beta.x (RC-Router-veraltet) zur Verfügung stellen, welcher Teil der URL verwendet wird oder vom Angular-Router ignoriert wird.