Angular 6 Hybrid應用程序不加載AngularJS組件

Question

我打算使用Angular 6將大型AngularJS 1.7.3版升級到混合應用程序。我完成了准備階段，在該階段中，我必須將所有控制器/指令都轉換為AngularJS組件。 我用命令行創建了一個新的Angular 6項目框架：

 ng new hybrid-app

我將Angular 6應用程序中的AngularJS舊代碼復制粘貼到src / ng1文件夾中。

這是我的app.module.ts的外觀，以便從Angular 6引導AngularJS 1.x應用程序：

 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});
 }
}

當我提供服務時，沒有錯誤，我可以看到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>'

並且它將正確顯示。 任何人都知道為什么Angular 6不會加載我的AngularJS組件，這與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)

Answer 1

我可能需要看看這個： https : //github.com/ui-router/angular-hybrid

我將刪除我的舊的angular-ui-router，並用這個替換。