Angular UpgradeModule: невозможно привязать элемент во время начальной загрузки приложения - PullRequest
Новая
       21

Angular UpgradeModule: невозможно привязать элемент во время начальной загрузки приложения

0 голосов
/ 24 июня 2018

У меня есть старое приложение AngularJS, которое я пытаюсь реализовать на месте с помощью Angular 6 UpgradeModule. Я могу заставить весь код выполняться - я выхожу из состояния, как и ожидалось, через приложения Angular 6 и AngularJS.

Проблема в том, что я не могу связать что-либо с DOM.

Вся документация и примеры используют NgDoBootstrap, поэтому внутри основного AppModule нового приложения Angular 6:

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

Я могу выполнить это. Я вижу загрузчик моего приложения AngularJS (через console.logs) через UpgradeModule. Я вижу, что мое приложение Angular 6 загружено (через console.logs). Но ничто не связано с DOM.

Выход document дает мне HTML-документ, который я ожидаю. Я могу вручную проверить это в консоли Chrome и увидеть все элементы, которые я ожидаю. Но все document методы и свойства, кажется, возвращают нуль.

document.body: ноль.

document.getElementById('an-elementId-I-can-see-when-logging-out-document'): ноль.

Скажите мне, что я просто делаю что-то глупое, например, не делаю что-то правильно, так что Angular / TS интерпретирует document иначе, чем ванильный JS.

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);

соответствующий HTML 

    <div id="master">
        <ng6-router-root>
        </ng6-router-root>
    </div>
...