Угловое гибридное приложение - угловой маршрутизатор 2 не работает

Question

Я пытаюсь запустить гибридное приложение с угловыми 2 компонентами.Ниже приведены настройки, которые я выполнил для запуска гибридного приложения, я могу запустить приложение, и компонент «my-app» также инициализируется в этом гибридном приложении, но когда я пытаюсь получить доступ к компоненту (FirstComponent) с помощью route (»/ 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"}

Answer 1

Чтобы увидеть, что делает маршрутизатор, до, во время и после перенаправления , добавьте это в свой 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.

Answer 2

Я пытаюсь использовать свой ui-маршрутизатор в форме angularjs с приложением angular 5.Теперь у меня есть некоторые проблемы с http_interceptor, во-первых, сначала я должен понизить компонент приложения и вставить в мой файл index.js.во-вторых, я пытаюсь узнать, работает ли стратегия обработки URL, и angular 5 начинает управлять маршрутами.В-третьих, мне нужно ввести стратегию angular5 urlHandling и маршруты из angular5 в модуль angularjs.После этого мой угловой 5 работал.Я нашел суть об этом после нескольких часов поиска.

Ссылка:

Суть