我正在尝试运行混合应用程序与角度 2 组件。以下是我为运行混合应用程序所做的设置，我能够运行该应用程序，并且"my-app"组件也在此混合应用程序中初始化，但是当我尝试使用 route("/first"( 访问组件(FirstComponent(时，它会加载 FirstComponent，但会自动重定向到我的默认角度 1 路由。
索引.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
)
{}
}
主目录
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['angular1App']);
});
我能够看到来自我的FirstComponent"第一个组件渲染......"的日志，但它不是停留在该路由上，而是重定向到angular1应用程序的默认路由。
这是我看到的日志 @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"}
我正在尝试使用我的 ui-router 表单 angularjs 和 angular 5 应用程序。现在我在http_interceptor方面遇到了一些问题，无论如何，首先我必须降级应用程序组件，并插入我的索引.js文件。其次，我尝试知道 url 处理策略是否有效，并且 angular 5 开始管理路由。第三，我必须在 angularjs 模块中注入 angular5 url 处理策略和来自 angular5 的路由。之后，我的角度 5 被工作了。经过数小时的搜索，我找到了这方面的要点。
链接：
要点
要查看路由器在重定向之前、期间和之后的功能，请将其添加到您的 FirstComponent：
constructor(
private router: Router
) {
this.router.events.subscribe(e => {
console.log(e)
});
}
您必须稍微挖掘一下事件日志，但它可能会为您提供有价值的见解。
如果仅在部署时遇到此问题，请尝试以下操作：
如果您使用的是 apache 服务器，请将以下内容添加到您的.htaccess文件中：
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
如果您使用的是其他服务器，例如NGinx，IIS或Firebase，请查看此处以获取Angular团队建议的更多配置。