3

I have an old AngularJS app I'm trying to implement an upgrade-in-place using the Angular 6 UpgradeModule. I can get all the code to execute -- I'm logging out states as expected through both the Angular 6 and AngularJS apps.

The problem is that I'm failing utterly to bind anything to the DOM.

All the documentation and examples use NgDoBootstrap thus, inside the core AppModule of the new Angular 6 app:

this.upgrade.bootstrap(document.body, ['angularJS-app-name'], {strictDi: true});

I can execute that. I can see my AngularJS app bootstrapping (via console.logs) via the UpgradeModule. I can see my Angular 6 app bootstrapped (via console.logs). But nothing is bound to the DOM.

Logging out document gives me the HTML document I'd expect. I can manually examine that in the Chrome console, and see all the elements I would expect to. But all document methods and properties seem to be returning null.

document.body: null.

document.getElementById('an-elementId-I-can-see-when-logging-out-document'): null.

Tell me I'm just doing something dumb like not injecting something properly so that Angular/TS is interpreting document differently than vanilla JS does.

master.app.ts

import {APP_BASE_HREF} from "@angular/common";
 
import {Component, NgModule, Inject} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {RouterModule, Routes, UrlHandlingStrategy} from '@angular/router';
 
@Component({
    selector: 'ng6-router-root',
    template: '<router-outlet></router-outlet><div class="ng-view"></div>'
})
export class Ng6RouterRoot{}
 
export class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
    shouldProcessUrl(url: any) {return false;}
    extract(url:any) {return url;}
    merge(url:any, whole:any) {return url;}
}
 
@NgModule({
    declarations: [
        Ng6RouterRoot
    ],
    imports: [
        BrowserModule,
        UpgradeModule,
        RouterModule.forRoot([])
    ],
    providers: [
        { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
        { provide: APP_BASE_HREF, useValue: '/' }
    ]
})
 
export class AppModule {
    constructor (private upgrade: UpgradeModule) {
    }
 
    ngDoBootstrap() {
        console.log('master.app.ts ngDoBootstrap start', document);
        console.log('document.body', document.body);
        this.upgrade.bootstrap(document.getElementById('master'), ['angularJsApp'], {strictDi: true});
        console.log('master.app.ts bootstrap end');
    }
}
 
platformBrowserDynamic().bootstrapModule(AppModule);
console.log('master.app.ts end readyState', document.readyState);

relevant html

    <div id="master">
        <ng6-router-root>
        </ng6-router-root>
    </div>
hastypudding
  • 66
  • 1
  • 3
  • Further info: logging out `document` lies, at least in Chrome. It's not reliably logging the state of `document` when the console.log statement is executed. Using breakpoints, it turns out the was loaded but didn't exist. I've gotten around this for now by hiding my `ngDoBootstrap` inside a `document.onreadystate` callback that only executes it when readyState is "interactive". Still not seeing my content on the DOM, but at this point it could be a routing thing? – hastypudding Jun 24 '18 at 15:18
  • Post code to the question instead of a link. Questions without visible code are less useful to other readers and are less likely to get answers. – georgeawg Jun 24 '18 at 16:33
  • Sorry. Edited to replace pastebin links with code snippets. – hastypudding Jun 24 '18 at 18:29

0 Answers0