Angular getDOM（）为null-从角度2迁移到角度4_Angular

Angular getDOM（）为null-从角度2迁移到角度4

angular

Angular getDOM（）为null-从角度2迁移到角度4,angular,Angular,我正面临一个我无法解决的特殊问题。我发现了，但它的解决方案对我不起作用我把一个项目从角度2移动到角度4。我用最新的angular cli从头开始创建ng项目，安装所需的模块并复制/粘贴我的旧项目结构这是来自app.module.ts的代码： @NgModule({ declarations: [ AppComponent, HomeComponent, LoginComponent, SignupComponent, ForgotComponent

我正面临一个我无法解决的特殊问题。我发现了，但它的解决方案对我不起作用

我把一个项目从角度2移动到角度4。我用最新的angular cli从头开始创建ng项目，安装所需的模块并复制/粘贴我的旧项目结构

这是来自

app.module.ts

的代码：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    SignupComponent,
    ForgotComponent,
    SelectBoxToDownloadFromGeoserverDialog,
    ValidateTokenComponent,
    ChangePasswordTokenComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    ReCaptchaModule,
    LoadingAnimateModule.forRoot(),
    //MaterialModule,
    RouterModule.forRoot(appRoutes, { useHash: true }),
    MaterialModule
  ],
  entryComponents : [LoginComponent, SignupComponent, ForgotComponent, SelectBoxToDownloadFromGeoserverDialog],
  providers: [
    LoadingAnimateService,
    AuthService,
    CanActivateAdmin,
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

成功编译后，我在浏览器中收到以下（奇怪的）错误：

Unhandled Promise rejection: getDOM(...) is null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: getDOM(...) is null
Traza de la pila:
_createNgProbe@http://localhost:3000/vendor.bundle.js:94380:6
anonymous/AppModuleNgFactory</<@ng:///AppModule/module.ngfactory.js:119:58
_callFactory@http://localhost:3000/vendor.bundle.js:10123:26
_createProviderInstance$1@http://localhost:3000/vendor.bundle.js:10052:26
initNgModule@http://localhost:3000/vendor.bundle.js:10003:13
NgModuleRef_@http://localhost:3000/vendor.bundle.js:11111:9
createNgModuleRef@http://localhost:3000/vendor.bundle.js:11095:12
debugCreateNgModuleRef@http://localhost:3000/vendor.bundle.js:13379:12
NgModuleFactory_.prototype.create@http://localhost:3000/vendor.bundle.js:14374:16
PlatformRef_.prototype._bootstrapModuleFactoryWithZone/<@http://localhost:3000/vendor.bundle.js:5032:47
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2758:17
onInvoke@http://localhost:3000/vendor.bundle.js:4409:28
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2757:17
Zone.prototype.run@http://localhost:3000/polyfills.bundle.js:2508:24
NgZone.prototype.run@http://localhost:3000/vendor.bundle.js:4277:51
PlatformRef_.prototype._bootstrapModuleFactoryWithZone@http://localhost:3000/vendor.bundle.js:5030:16
PlatformRef_.prototype._bootstrapModuleWithZone/<@http://localhost:3000/vendor.bundle.js:5072:53
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2758:17
Zone.prototype.run@http://localhost:3000/polyfills.bundle.js:2508:24
scheduleResolveOrReject/<@http://localhost:3000/polyfills.bundle.js:3185:52
ZoneDelegate.prototype.invokeTask@http://localhost:3000/polyfills.bundle.js:2791:17
Zone.prototype.runTask@http://localhost:3000/polyfills.bundle.js:2558:28
drainMicroTaskQueue@http://localhost:3000/polyfills.bundle.js:2951:25
 _createNgProbe@http://localhost:3000/vendor.bundle.js:94380:6
anonymous/AppModuleNgFactory</<@ng:///AppModule/module.ngfactory.js:119:58
_callFactory@http://localhost:3000/vendor.bundle.js:10123:26
_createProviderInstance$1@http://localhost:3000/vendor.bundle.js:10052:26
initNgModule@http://localhost:3000/vendor.bundle.js:10003:13
NgModuleRef_@http://localhost:3000/vendor.bundle.js:11111:9
createNgModuleRef@http://localhost:3000/vendor.bundle.js:11095:12
debugCreateNgModuleRef@http://localhost:3000/vendor.bundle.js:13379:12
NgModuleFactory_.prototype.create@http://localhost:3000/vendor.bundle.js:14374:16
PlatformRef_.prototype._bootstrapModuleFactoryWithZone/<@http://localhost:3000/vendor.bundle.js:5032:47
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2758:17
onInvoke@http://localhost:3000/vendor.bundle.js:4409:28
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2757:17
Zone.prototype.run@http://localhost:3000/polyfills.bundle.js:2508:24
NgZone.prototype.run@http://localhost:3000/vendor.bundle.js:4277:51
PlatformRef_.prototype._bootstrapModuleFactoryWithZone@http://localhost:3000/vendor.bundle.js:5030:16
PlatformRef_.prototype._bootstrapModuleWithZone/<@http://localhost:3000/vendor.bundle.js:5072:53
ZoneDelegate.prototype.invoke@http://localhost:3000/polyfills.bundle.js:2758:17
Zone.prototype.run@http://localhost:3000/polyfills.bundle.js:2508:24
scheduleResolveOrReject/<@http://localhost:3000/polyfills.bundle.js:3185:52
ZoneDelegate.prototype.invokeTask@http://localhost:3000/polyfills.bundle.js:2791:17
Zone.prototype.runTask@http://localhost:3000/polyfills.bundle.js:2558:28
drainMicroTaskQueue@http://localhost:3000/polyfills.bundle.js:2951:25

如何修复此错误以及产生此错误的原因？

我对此问题进行了一些调查，发现它与

ng2加载动画有关
我很惊讶，因为这个repo在它的捆绑包中提供了有角度的源代码。更准确地说，它包括angularBrowserAnimationModule
和BrowserModule
v4.1.3
您在ng2加载动画时出现错误
function _createNgProbe(extraTokens, coreTokens) {
    var /** @type {?} */ tokens = (extraTokens || []).concat(coreTokens || []);
    getDOM().setGlobalVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
    getDOM().setGlobalVar(CORE_TOKENS_GLOBAL_NAME, __assign({}, CORE_TOKENS, _ngProbeTokensToMap(tokens || [])));
    return function () { return inspectNativeElement; };
}

它来自
ng2加载animate.js
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

ng2加载animate.js
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

ng2加载animate.js
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

ng2加载animate.js
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

应用程序模块.ts
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

因此，当您导入加载animatemodule
模块时，angular将读取其元数据并将\u createNgProbe
工厂添加到应用程序初始值设定项
多提供程序。当您的应用程序启动时，angular将在执行后从源@angular/platform browser
执行同一工厂
module.ngfactory.js
var ELEMENT_PROBE_PROVIDERS = [
    {
        provide: _angular_core.APP_INITIALIZER,
        useFactory: _createNgProbe, // this line
        deps: [
            [NgProbeToken$1, new _angular_core.Optional()],
            [_angular_core.NgProbeToken, new _angular_core.Optional()],
        ],
        multi: true,
    },
];

            ||
            \/

BrowserModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                providers: [
                    BROWSER_SANITIZATION_PROVIDERS,
                    { provide: _angular_core.ErrorHandler, useFactory: errorHandler, deps: [] },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true },
                    { provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true },
                    { provide: HAMMER_GESTURE_CONFIG, useClass: HammerGestureConfig },
                    DomRendererFactory2,
                    { provide: _angular_core.RendererFactory2, useExisting: DomRendererFactory2 },
                    { provide: SharedStylesHost, useExisting: DomSharedStylesHost },
                    DomSharedStylesHost,
                    _angular_core.Testability,
                    EventManager,
                    ELEMENT_PROBE_PROVIDERS, // this line
                    Meta,
                    Title,
                ],
                exports: [_angular_common.CommonModule, _angular_core.ApplicationModule]
            },] },
];

           ||
           \/

BrowserAnimationsModule.decorators = [
    { type: _angular_core.NgModule, args: [{
                imports: [_angular_platformBrowser.BrowserModule],
                providers: BROWSER_ANIMATIONS_PROVIDERS,
            },] },
];

           ||
           \/

LoadingAnimateModule = LoadingAnimateModule_1 = __decorate([
    core_1.NgModule({
        declarations: [
            ng2_loading_animate_component_1.LoadingAnimateComponent
        ],
        imports: [common_1.CommonModule, animations_1.BrowserAnimationsModule],
        exports: [ng2_loading_animate_component_1.LoadingAnimateComponent],
        providers: [ng2_loading_animate_service_1.LoadingAnimateService]
    })
], LoadingAnimateModule);

           ||
           \/

imports: [
  LoadingAnimateModule.forRoot(),

jit_InjectionToken_Application_Initializer68,function(p0_0,p0_1,p1_0, p1_1) {
    return [jit__createNgProbe69(p0_0,p0_1),jit__createNgProbe70(p1_0, p1_1)];
                    /\                             /\
                    ||                             ||
           angular/platform-browser          ng2-loading-animate

ng2加载动画的\u createNgProbe
方法与当前版本不匹配
@角度/平台浏览器
function _createNgProbe(extraTokens, coreTokens) {
    var /** @type {?} */ tokens = (extraTokens || []).concat(coreTokens || []);
    exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
    exportNgVar(CORE_TOKENS_GLOBAL_NAME, Object.assign({}, CORE_TOKENS, _ngProbeTokensToMap(tokens || [])));
    return function () { return inspectNativeElement; };
}

您可以使用以下代码解决此问题
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

let metadata =  Reflect.getOwnMetadata('annotations', LoadingAnimateModule);
metadata[0].imports = [CommonModule, BrowserAnimationsModule];

但我建议您在ng2 loading animate
repo中编写错误报告，因为angular library不应在捆绑包中包含angular代码。
您在哪里使用此方法getDOM（）
？我的代码的任何部分都没有使用getDOM（）。也许第三方模块正在使用它。我真的不知道。它指向哪条线？？你试过调试吗？或者您可以在teamviewer中使用？ng2加载动画
是您的问题。凯，非常感谢！！你应该得到赏金，所以我等待你的回答。