I am trying to run hybrid app wit angular 2 components. Following are the setup i have done to run hybrid app, i am able to run the application and "my-app" component is also initialized in this hybrid app, but when i am trying to access a component (FirstComponent) using route("/first"), it loads the FirstComponent but automatically redirects to my default angular 1 route.
index.html
<base href="/hybridApp/">
<my-app></my-app>
app.component.ts
@Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>' +
'<div ng-view></div>',
})
export class AppComponent {
name = 'Angular';
}
app.module.ts
@NgModule({
imports: [
BrowserModule,
UpgradeModule,
RouterModule,
FirstModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
}
}
first.module.ts
export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: any) {
return url.toString().startsWith("/first");
}
extract(url: any) {
return url;
}
merge(url: any, whole: any) {
return url;
}
}
const routes : Routes = [
{
path :'first',
component: FirstComponent
}
]
@NgModule({
imports:[
RouterModule.forRoot(routes,{ useHash: true, initialNavigation: true, enableTracing: true })
],
exports:[
],
declarations:[
FirstComponent
],
providers:[
{ provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
]
})
export class FirstModule {}
first.component.ts
@Component({
selector:'first-component',
templateUrl:'src/app/first.component.html',
styleUrls:['src/app/first.component.css']
})
export class FirstComponent implements OnInit{
ngOnInit(){
console.log("first component rendered..")
}
constructor(
private route:ActivatedRoute
)
{}
}
main.ts
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['angular1App']);
});
I am able to see logs from my FirstComponent "first component rendered.." but instead of staying on that route it redirects to default route of angular1 app.
Here are the logs as i see through approach suggested by @jeffrey
NavigationStart {id: 8, url: "/first"}
NavigationStart {id: 8, url: "/first"}
RoutesRecognized {id: 8, url: "/first", urlAfterRedirects: "/first", state: RouterStateSnapshot}
RoutesRecognized {id: 8, url: "/first", urlAfterRedirects: "/first", state: RouterStateSnapshot}
GuardsCheckStart {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
GuardsCheckStart {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
GuardsCheckEnd {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
GuardsCheckEnd {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
ResolveStart {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
ResolveStart {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
ResolveEnd {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
ResolveEnd {id: 8, url: "/first", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
NavigationEnd {id: 8, url: "/first", urlAfterRedirects: "/first"}
NavigationEnd {id: 8, url: "/first", urlAfterRedirects: "/first"}
NavigationEnd {id: 8, url: "/first", urlAfterRedirects: "/first"}
NavigationStart {id: 9, url: "/auth"}
NavigationStart {id: 9, url: "/auth"}
NavigationStart {id: 9, url: "/auth"}
GuardsCheckStart {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
GuardsCheckStart {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
GuardsCheckStart {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
GuardsCheckEnd {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
GuardsCheckEnd {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
GuardsCheckEnd {id: 9, url: "/auth", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
NavigationEnd {id: 9, url: "/auth", urlAfterRedirects: "/auth"}
NavigationEnd {id: 9, url: "/auth", urlAfterRedirects: "/auth"}
NavigationEnd {id: 9, url: "/auth", urlAfterRedirects: "/auth"}
I'm tryng to use my ui-router form angularjs with angular 5 application. Now I'm having some problems with http_interceptor, anyway, first I have to downgrade app-component, and insert in my index.js file. second I try to know if the url handling strategy is working and angular 5 starts to manage the routes. Third, I have to inject the angular5 urlHandling strategy and routes from angular5 in angularjs module. After that my angular 5 was worked. I found a gist about this after hours of search.
Link:
To see what the router does, before, during and after redirecting, add this to your FirstComponent:
constructor(
private router: Router
) {
this.router.events.subscribe(e => {
console.log(e)
});
}
You have to dig through the event-logs a bit, but it may give you valuable insights.
If you encounter this problem only for deployment, try the following:
If you are using an apache server, add this to your .htaccess
file:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
If you are using a different server such as NGinx, IIS or Firebase, take a look here for more configurations as recommended by the Angular team.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.