Question

我目前正在尝试将AngularJS应用升级到Angular。一直关注Angular.io的教程。该项目与我的项目之间存在一些差异。我正在使用RequireJS，Gulp和Webpack。

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

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

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

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

错误：未捕获（在承诺中）：错误：模块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 config：

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

使用

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

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

Answer 2

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

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

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

用适合您的应用程序的总体组件替换AppComponent。

将AngularJS升级为Angular，AppModule是自举的，但它没有声明“@ NgModule.bootstrap”错误

2 个答案: