1

我的目标是使用 Angular 6 将大型 AngularJS 版本 1.7.3 升级到混合应用程序。我完成了准备阶段，我必须将所有控制器/指令转换为 AngularJS 组件。我用命令行创建了一个新的 Angular 6 项目框架：

 ng new hybrid-app

我将 AngularJS 遗留代码复制粘贴到 src/ng1 文件夹中的 Angular 6 应用程序中。

这就是我的 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)
4

1 回答 1

-1

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

我将删除我的旧 angular-ui-router 并用这个替换它。

于 2018-08-22T10:40:17.660 回答