Я стремлюсь обновить большую версию AngularJS 1.7.3 до гибридного приложения с использованием Angular 6. Я закончил подготовительный этап, на котором мне пришлось преобразовать все мои контроллеры / директивы в компонент AngularJS. Я создал новый скелет проекта Angular 6 с командной строкой:
ng new hybrid-app
Я скопировал устаревший код AngularJS в приложение Angular 6 в папку src / ng1.
Вот как выглядит мой app.module.ts для загрузки приложения AngularJS 1.x из Angular 6:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {UpgradeModule} from '@angular/upgrade/static';
import {AppComponent} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UpgradeModule
],
providers: [],
// bootstrap: [AppComponent] // No Bootstrap-Component
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['myAngularJsModule'], {strictDi:
true});
}
}
Когда я выполняю ng serve, ошибки не возникает, и я вижу, как приложение Angular 6 перенаправляется на маршрутизацию AngularJS по умолчанию, то есть / login. Это мой файл маршрута AngularJS:
angular.module('myAngularJsModule').config(["$locationProvider", function ($locationProvider) {
$locationProvider.html5Mode(false);
}])
.config(
['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider) {
/**
* Default route.
*/
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
params: {message: null},
component: 'loginComponent',
template: '<login-component></login-component>'
});
Как видите, у меня есть маршрут по умолчанию к / login, и приложение Angular 6 знает, как туда добраться. Проблема, которая у меня есть сейчас:
В консоли нет ошибки, но у меня пустая страница, похоже, что компонент из AngularJS не загружен должным образом и поэтому ничего не показывает в браузере. Я попробовал заменить шаблон на простой:
template: '<h1>Hello World!<h1>'
И это будет правильно отображаться. Кто-нибудь знает, почему мой компонент AngularJS не загружается Angular 6, это как-то связано с UIRouter?
Ошибка, которая у меня сейчас:
Error: StaticInjectorError(AppModule)[UpgradeModule -> Injector]:
StaticInjectorError(Platform: core)[UpgradeModule -> Injector]:
NullInjectorError: No provider for Injector!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8376)
at _createClass (core.js:8423)
at _createProviderInstance (core.js:8393)