2

我有一个旧的 AngularJS 应用程序，我正在尝试使用 Angular 6 UpgradeModule 实现就地升级。我可以让所有代码执行——我正在通过 Angular 6 和 AngularJS 应用程序按预期注销状态。

问题是我完全无法将任何东西绑定到 DOM。

因此，在新 Angular 6 应用程序的核心 AppModule 中，所有文档和示例都使用 NgDoBootstrap：

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

我可以执行那个。我可以通过 UpgradeModule 看到我的 AngularJS 应用程序引导（通过 console.logs）。我可以看到我的 Angular 6 应用程序被引导（通过 console.logs）。但是没有任何东西与 DOM 绑定。

注销document给了我我期望的 HTML 文档。我可以在 Chrome 控制台中手动检查它，并查看我期望的所有元素。但所有document方法和属性似乎都返回 null。

document.body： 无效的。

document.getElementById('an-elementId-I-can-see-when-logging-out-document')： 无效的。

告诉我我只是在做一些愚蠢的事情，比如没有正确注入一些东西，因此 Angular/TS 的解释document与 vanilla JS 的解释不同。

主应用程序.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>

4

0 回答 0