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，并用这个替换。