При обновлении AngularJS до Angular AppModule был загружен, но он не объявляет ошибку "@NgModule.bootstrap"

Question

В настоящее время я экспериментирую с обновлением приложения AngularJS до Angular. Следуйте инструкциям на Angular.io. Есть несколько различий между этим проектом и моим. Я использую RequireJS, Gulp и Webpack.

Мой index.html запрашивает requireJS/main.js, main.js запускается

Первый шаг, который я пытаюсь получить, - это запустить гибридное приложение с помощью NgUpgrade.

То, что я до сих пор пробовал в поиске в Google, - это настроить tsconfig, перейти на другую версию zone.js, переконфигурировать в порядке загрузки.

Ошибка, которую я не могу устранить или найти какие-либо решения в Интернете:

Ошибка: Uncaught (в обещании): Ошибка: модуль 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(), и он не может разрешить.

моя вина.

Answer 1

(Публикация впервые, извините, она недостаточно тщательна или не отформатирована)

Не уверен, что это относится к версии Angular на момент публикации исходного сообщения, но в Angular 9/10 это должно работать, если вы включите список начальной загрузки в app.module.ts.

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

Замените AppComponent соответствующим всеобъемлющим компонентом для вашего приложения.

Answer 2

Вы должны изменить код в файле main.ts Заменить

platformBrowserDynamic().bootstrapModule(AppModule);

с

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

это может помочь решить вашу проблему.