Я начал разработку гибридного приложения. Итак, я сделал следующие шаги:
- добавить Angular 8 зависимостей
- добавить
polyfills.ts - удалить атрибут
ng-app из моего root индекса . html - сделать руководство bootstrap из AngularJs app
Как выглядит мой Angular модуль инициализации:
@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class HubAngularModule {
ngDoBootstrap() {
}
}
platformBrowserDynamic().bootstrapModule(HubAngularModule)
.then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myAngularJsModule']);
});
Как выглядит мой индекс. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
<main-header></main-header> <!--AngularJS header component-->
<console-menu></console-menu> <!--AngularJS menu component-->
<md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
</body>
</html>
Главный заголовок, консольное меню - это AngularJS компонентов. Конечно, эта конфигурация работает хорошо, когда отображается ng-app.
Что я ожидаю. Гибридное приложение запускается так же, как старое приложение AngularJS, и я могу видеть страницу входа, стартовую страницу и т. Д. c.
Что я на самом деле получил. AngularJS приложение фактически загружается. Я вижу, как выполняется метод app.module (). Run (...). Но ни один компонент не загружается, поэтому я вижу только пустую страницу.