手动引导混合应用程序答案

【问题标题】：Bootstrapping hybrid applications manually手动引导混合应用程序
【发布时间】：2018-07-20 09:55:34
【问题描述】：

如何从 Angular 6 手动引导这个 angularjs 1 应用程序？

作为起点，我有一个工作的 angularjs 1 应用程序：f.e. 和一个使用 angular-cli 创建的纯 angular 6 应用程序。

第一步是在 package.json 中添加必要的依赖项，如 angular、@uirouter/angularjs、@angular/upgrade、@types/angular，并在 angular.cli 中填充脚本部分：

"scripts": [
    "node_modules/angular/angular.min.js",
    "node_modules/@uirouter/angularjs/release/angular-ui-router.min.js",
    "app/app.js"
]

然后我把 angular 1 应用放到 /app/script.js 和 /index.html

我从 index.html 中删除了<body ng-app="helloApp">，所以修改后的 index.html 看起来像这样：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>AngularJS</title>
</head>

<body>
    <div id="hello-app">
        <div ng-controller="HelloController">
            <a ui-sref="hello" ui-sref-active="active">Hello</a>
            <a ui-sref="about" ui-sref-active="active">About</a>
            <ui-view></ui-view>
        </div>
    </div>
    <app-root></app-root>
</body>

</html>

为了从角度 2 引导角度 1，我将 ngDoBootstrap() 添加到 app.module.ts 并删除了 bootstrap[AppModule] 部分：

import {
    BrowserModule
} from '@angular/platform-browser';
import {
    NgModule
} from '@angular/core';
import {
    AppComponent
} from './app.component';
import {
    UpgradeModule
} from '@angular/upgrade/static';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    providers: [],
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {}
    ngDoBootstrap() {
        this.upgrade.bootstrap(document.getElementById('hello-app'), ['helloApp'], {
            strictDi: true
        });
    }
}

很遗憾，这不起作用。我收到错误消息：

“错误错误：”[$injector:modulerr] http://errors.angularjs.org/1.7.2/$injector/modulerr?p0=%24%24UpgradeModule&p1=%5B%24injector%3Amodulerr..."

这个概念有什么问题吗？

【问题讨论】：

你可以使用angular.js 文件而不是angular.min.js 并共享一条可读的error 消息而不是你共享的消息

标签： angularjs angular angular-ui-router angular-upgrade

【解决方案1】：

将 angular.min.js 更改为 angular.min 后，错误消息可见：

ERROR 错误：“[$injector:modulerr] 无法实例化模块 $$UpgradeModule，原因如下： [$injector:modulerr] 无法实例化模块 helloApp 由于： [$injector:strictdi] function($stateProvider) 没有使用显式注解，不能在严格模式下调用

使用显式注解解决了问题：

https://docs.angularjs.org/error/$injector/strictdi

【讨论】：