Angular 混合应用程序 - Angular 2 路由器不工作

Posted 2023-02-22

【中文标题】Angular 混合应用程序 - Angular 2 路由器不工作

【英文标题】：Angular hybrid app - angular 2 router not working

【发布时间】：2018-11-16 04:19:37

【问题描述】：

我正在尝试运行具有 angular 2 组件的混合应用程序。以下是我为运行混合应用程序所做的设置，我能够运行应用程序并且“my-app”组件也在这个混合应用程序中初始化，但是当我尝试使用路由访问组件（FirstComponent）时（“ /first")，它会加载 FirstComponent 但会自动重定向到我的默认 angular 1 路由。

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']);
);

我能够从我的 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"

【问题讨论】：

你在使用哪个路由器和 AngularJS 应用程序？

我正在使用 ngRoute

这是How to Divide the routes between the Angular 1 and the Angular 2 routers上的一篇文章

你也可以添加导入语句部分吗？

【参考方案1】：

我正在尝试将我的 ui-router 表单 angularjs 与 angular 5 应用程序一起使用。现在我在使用 http_interceptor 时遇到了一些问题，无论如何，首先我必须降级 app-component，然后插入我的 index.js 文件。其次，我尝试知道 url 处理策略是否有效并且 angular 5 开始管理路由。第三，我必须在 angularjs 模块中从 angular5 注入 angular5 urlHandling 策略和路由。之后，我的 Angular 5 工作了。经过数小时的搜索，我找到了一个关于此的要点。

链接：

Gist

【参考方案2】：

要查看路由器在重定向之前、期间和之后做了什么，请将其添加到您的 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 团队的建议take a look here for more configurations。

【讨论】：

它在开发中发生，因为我第一次这样做，我的路线都没有工作。同样的事情也发生在两种情况下，使用 routerLink 或直接输入 url。

此外，即使我使用这种方法 github.com/manfredsteyer/ngUpgrade-without-preparation 设置我的混合应用程序。我也面临同样的问题。

感谢您提供额外信息。我已经用从路由器获取大量调试信息的方法更新了我的答案，您应该尝试一下。

杰夫，我已经用你的方法用相关日志更新了这个问题。

谢谢。如您所见，在firstNavigationEnd 之后，它会触发另一个firstNavigationStart（现在是id: 9）。如果设置initialNavigation: false 会发生什么？另外，您是否碰巧在路由器中添加了一些守卫或 canActivate，导致重定向到 /auth？