Гибридное приложение Angular 6 не загружает компоненты AngularJS

Я стремлюсь обновить большую версию 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)

person Nizar B.    schedule 22.08.2018    source источник
comment
Я тоже столкнулся с этой проблемой, вы нашли решение?   -  person    schedule 03.01.2020


Ответы (1)


Возможно, мне нужно взглянуть на это: https://github.com/ui-router/angular-hybrid

Я удалю свой старый angular-ui-router и заменю его этим.

person Nizar B.    schedule 22.08.2018
comment
Переход на angular-hybrid для маршрутизации привел к ошибке: StaticInjectorError (AppModule) [UpgradeModule - ›Injector]: StaticInjectorError (Platform: core) [UpgradeModule -› Injector]: NullInjectorError: Нет провайдера для Injector! - person Nizar B.; 22.08.2018
comment
У кого-нибудь была эта проблема при создании гибридного приложения Angular? - person Nizar B.; 23.08.2018
comment
Привет, @Nizar, ты исправишь ошибку? У меня похожая ошибка NullInjectorError: No provider for Injector! при попытке обновить AngularJS 1.6 до Angular 6 - person Alisson Gomes; 06.09.2018
comment
@Alisson Мне кажется, что у вас, вероятно, есть зависимость, введенная где-то одним из ваших компонентов, но вы на самом деле забыли объявить ее в своем app.module.ts. - person Nizar B.; 06.09.2018
comment
Вы заставили его работать? Похоже на ошибку, которую я вижу. В моем случае, хотя мое гибридное приложение angular работает нормально, но возникает ошибка, если я добавляю параметр --aot в команду build / serve. - person Joe; 17.01.2019