Javascript 将AngularJS升级为Angular，AppModule已启动，但未声明@NgModule.bootstrap“；错误

我目前正在尝试将AngularJS应用程序升级到AngularJS。我们一直在关注Angular.io的教程。那个项目和我的有一些不同。我使用的是RequireJS、Gulp和Webpack

My index.html请求requireJS/main.js，main.js启动

我试图开始工作的第一步是用NgUpgrade引导一个混合应用程序

到目前为止，我在谷歌搜索中尝试的是调整tsconfig，改变zone.js的不同版本，重新配置加载顺序

我似乎无法在internet上解决或找到任何解决方案的错误是：

错误：未捕获（承诺中）：错误：模块AppModule已引导，但未声明“@NgModule.bootstrap”组件或“ngDoBootstrap”方法。请定义其中一个

这是我的tsconfig.json

    {
    "compilerOptions": {
      "module": "amd",
      "moduleResolution": "node",
      "sourceMap": true,
      "declaration":false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2017", "dom" ],
      "typeRoots":["node_modules/@types"]
    },
    "include:":["./src/s/**/*"],
    "exclude": [
        "node_modules","sandbox","gulp-tasks","dist","3rdparty",".settings"
    ]
  }

这是我的main.js，它只是requirejs配置：

require.config({
  waitSeconds : 0,
  baseUrl: './s/lib',
  paths: {
    'app': 'app',
    'angular': 'angular',
    'angular-aria': 'angular-aria.min',
    'jquery': 'jquery.min'
    "wa-angular": "wa-angular.min",
    'ui.router.components': 'routeToComponents',

    'reflect-metadata':'Reflect',
    'zone.js':'zone.js/dist/zone',
    'rxjs':'rxjs',    
    '@angular/common':'common.umd',
    '@angular/compiler':'compiler.umd',
    '@angular/core':'core.umd',
    '@angular/upgrade':'upgrade/upgrade.umd',
    '@angular/upgrade/static':'upgrade/upgrade-static.umd',
    '@angular/platform-browser-dynamic':'platform-browser-dynamic.umd',
    '@angular/platform-browser':'platform-browser.umd'
  },
  shim: {
    'angular': {'exports': 'angular'}
  },
  priority: [
    'angular'
  ],
  packages: [
  ],
  deps: ['app']
});

这是我的app.js

"use strict";
var $ = window.$;
define(["angular"], function(angular) { 

  require([

    "jquery",
    "angular-aria",
    "wa-angular-module",
    "ui.router.components",

    "compiler.umd",
    "core.umd",
    "platform-browser.umd",
    "platform-browser-dynamic.umd",
    "upgrade.umd",
    "upgrade-static.umd",
    "reflect-metadata",
    "app.module"

  ], function() {
    require(["angular"], function(angular) {

      var app = angular
        .module(
          "wa-module", [
          "ngRoute",
          "ngAria",
          "ngMessages",
          "ui.router",
          "ui.router.components",
          "ui.bootstrap",
          "matchmedia-ng",
        ])

最后是app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { UpgradeModule } from "@angular/upgrade/static";
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@NgModule({
  imports: [BrowserModule, UpgradeModule]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootStrap() {
    console.log("ngDoBootStrap running");
    this.upgrade.bootstrap(document.body, ["wa"]);
  }
}

platformBrowserDynamic().bootstrapModule(AppModule);

请让我知道你们需要什么额外的信息来帮助我

先谢谢你

解决方案：ngDoBootstrap（）是正确的拼写方法。 我像ngDoBootStrap（）一样编写它，但它无法解析

---

我的错

您必须更改main.ts文件中的代码 替换

与

---

这可能有助于解决您的问题。

您必须更改main.ts文件中的代码 替换

与

这可能有助于解决您的问题。

（第一次发布，很抱歉，内容不全面或格式不好）

不确定这是否适用于原始帖子发布时的Angular版本，但在Angular 9/10中，如果在app.module.ts中包含引导列表，则应该可以使用

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, UpgradeModule],
      bootstrap: [AppComponent]
    })

将AppComponent替换为适用于您的应用程序的适当总体组件。

（第一次发布，很抱歉，内容不完整或格式不正确）

不确定这是否适用于原始帖子发布时的Angular版本，但在Angular 9/10中，如果在app.module.ts中包含引导列表，则应该可以使用

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, UpgradeModule],
      bootstrap: [AppComponent]
    })

---

将AppComponent替换为适用于您的应用程序的适当总体组件。

理由是什么？这什么也做不到。理由是什么？这什么也做不到。小写“s”也为我修复了它：奥洛威尔的案子也帮我解决了O

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, UpgradeModule],
      bootstrap: [AppComponent]
    })