4

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

我的 index.html 要求 requireJS/main.js，main.js 开始

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

到目前为止，我从谷歌搜索中尝试过的是调整 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 配置：

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() 一样写了它，但它无法解决。

我的错。

4

2 回答 2

2

（第一次发帖，写的不是很全面，格式不够好）

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

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

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

于 2020-08-12T21:03:24.797 回答
-5

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

platformBrowserDynamic().bootstrapModule(AppModule);

和

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

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

于 2018-06-30T16:44:36.377 回答