Question

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

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

第一步是将必需的依赖项（例如angular，@ uirouter / angularjs，@ angular / upgrade，@ types / angular）添加到package.json中，并将脚本部分填充到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
        });
    }
}

不幸的是，这不起作用。我收到错误消息：

“ ERROR错误：” [$ injector：modulerr] http://errors.angularjs.org/1.7.2/ $ injector / modulerr？p0 =％24％24UpgradeModule＆p1 =％5B％24injector％3Amodulerr ...“

这个概念有什么问题吗？

Answer 1

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

错误错误：“ [$ injector：modulerr]无法实例化模块$$ UpgradeModule，原因是： [$ injector：modulerr]由于以下原因，无法实例化模块helloApp。 [$ injector：strictdi]函数（$ stateProvider）未使用显式注释，因此无法在严格模式下调用

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

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

手动引导混合应用程序

1 个答案: