4

I'm currently experimenting with upgrading an AngularJS app to Angular. Been following along the tutorial on Angular.io. There are a few differences between that project and mine. I'm using RequireJS, Gulp and Webpack.

My index.html asks for requireJS/main.js, main.js starts

The first step I'm trying to get working is to bootstrap a hybrid application with NgUpgrade.

What I've tried so far from google searching is tweak the tsconfig, changing around to different version of zone.js, re-configuring around the order of things loading.

The error that I can't seem to resolve or find any resolutions to on the internet is:

Error: Uncaught (in promise): Error: The module AppModule was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.

Here is my 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"
    ]
  }

Here is my main.js which is just the 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']
});

Here is my 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",
        ])

and finally, 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);

Please let me know what additional information you all might need to help me.

Thank you in advance.

Solution: ngDoBootstrap() is the correct way of spelling things. I wrote it like ngDoBootStrap() and it couldn't resolve.

my bad.

keyboardr
  • 41
  • 1
  • 4

2 Answers2

3

(First time posting, sorry it's not thorough or well-formatted)

Not sure if this applies to the version of Angular at the time of the original post, but in Angular 9/10, it should work if you include a bootstrap list in app.module.ts.

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

Replace AppComponent with the appropriate overarching component for your application.

hyperplane
  • 31
  • 3
-5

You have to change the code in main.ts file Replace

platformBrowserDynamic().bootstrapModule(AppModule);

with

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

it may help to resolve your issue.

Martin
  • 2,411
  • 11
  • 28
  • 30
Amod Tripathi
  • 1