Я работаю над постепенным переносом большого приложения angular.js (которое использует ui-router) на angular, и я выбрал приложение angular.js в качестве основы и перенастраиваю разные маршруты по одному, поэтому что, как только я закончу, я сразу переключу все на угловое.
Вот шаги, которые я выполнил:
Загрузите приложение angular.js в моем файле main.ts:
export function bootstrapAngular(extra: StaticProvider[]): any {
setAngularJSGlobal(angular);
if (environment.production) {
enableProdMode();
}
return platformBrowserDynamic(extra)
.bootstrapModule(AppModule)
.catch(err => console.log(err));
}
const downgraded = angular
.module('downgraded', [downgradeModule(bootstrapAngular)])
.directive('appRoot', downgradeComponent({ component: RootComponent, propagateDigest: false }))
;
angular.bootstrap(document, ['app', downgraded.name]);
Внутри моего index.html
Это отлично работает.
Внутри моего основного компонента angular.js я добавляю тег моего пониженного основного компонента Angular:
Так настроен мой основной модуль
const COMPONENTS = [
TestComponent,
RootComponent,
];
@NgModule({
declarations: COMPONENTS,
imports: [
BrowserModule,
NxModule.forRoot(),
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
useHash: true
})
],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' }
],
entryComponents: COMPONENTS,
exports: COMPONENTS
})
export class AppModule {
ngDoBootstrap(): void { }
}
Все работает нормально до сих пор. Я вижу свой угловой компонент внутри моего приложения angular.js.
Проблема возникает, когда я добавляю к своему основному корневому компоненту, я вижу рендеринг маршрутизатора, но ничего рядом с ним, даже если маршрут совпадает.
export const routes: Route[] = [
{ path: 'dashboard', component: TestComponent }
];
Когда я указываю своему браузеру на / # / dashboard , это трассировка маршрутизатора, которую я вижу:
И тестовый компонент просто не рендерится.
Мне нужна помощь, не могу придумать, что еще попробовать.