getDOM（）爲null - 從Angular 2遷移到Angular 4

我正面臨着一個我無法解決的特定問題。我發現similar problems，但其解決方案不適合我。getDOM（）爲null - 從Angular 2遷移到Angular 4

我正在將項目從Angular 2移動到Angular 4.我開始從零開始創建一個ng項目，使用最新的angular-cli，安裝所需的模塊並複製/粘貼我的舊項目結構。

這是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: 
[email protected]://localhost:3000/vendor.bundle.js:94380:6 
anonymous/AppModuleNgFactory</<@ng:///AppModule/module.ngfactory.js:119:58 
[email protected]://localhost:3000/vendor.bundle.js:10123:26 
[email protected]://localhost:3000/vendor.bundle.js:10052:26 
[email protected]://localhost:3000/vendor.bundle.js:10003:13 
[email protected]://localhost:3000/vendor.bundle.js:11111:9 
[email protected]://localhost:3000/vendor.bundle.js:11095:12 
[email protected]://localhost:3000/vendor.bundle.js:13379:12 
[email protected]://localhost:3000/vendor.bundle.js:14374:16 
PlatformRef_.prototype._bootstrapModuleFactoryWithZone/<@http://localhost:3000/vendor.bundle.js:5032:47 
[email protected]://localhost:3000/polyfills.bundle.js:2758:17 
[email protected]://localhost:3000/vendor.bundle.js:4409:28 
[email protected]://localhost:3000/polyfills.bundle.js:2757:17 
[email protected]://localhost:3000/polyfills.bundle.js:2508:24 
[email protected]://localhost:3000/vendor.bundle.js:4277:51 
[email protected]://localhost:3000/vendor.bundle.js:5030:16 
PlatformRef_.prototype._bootstrapModuleWithZone/<@http://localhost:3000/vendor.bundle.js:5072:53 
[email protected]://localhost:3000/polyfills.bundle.js:2758:17 
[email protected]://localhost:3000/polyfills.bundle.js:2508:24 
scheduleResolveOrReject/<@http://localhost:3000/polyfills.bundle.js:3185:52 
[email protected]://localhost:3000/polyfills.bundle.js:2791:17 
[email protected]://localhost:3000/polyfills.bundle.js:2558:28 
[email protected]://localhost:3000/polyfills.bundle.js:2951:25 
[email protected]://localhost:3000/vendor.bundle.js:94380:6 
anonymous/AppModuleNgFactory</<@ng:///AppModule/module.ngfactory.js:119:58 
[email protected]://localhost:3000/vendor.bundle.js:10123:26 
[email protected]://localhost:3000/vendor.bundle.js:10052:26 
[email protected]://localhost:3000/vendor.bundle.js:10003:13 
[email protected]://localhost:3000/vendor.bundle.js:11111:9 
[email protected]://localhost:3000/vendor.bundle.js:11095:12 
[email protected]://localhost:3000/vendor.bundle.js:13379:12 
[email protected]://localhost:3000/vendor.bundle.js:14374:16 
PlatformRef_.prototype._bootstrapModuleFactoryWithZone/<@http://localhost:3000/vendor.bundle.js:5032:47 
[email protected]://localhost:3000/polyfills.bundle.js:2758:17 
[email protected]://localhost:3000/vendor.bundle.js:4409:28 
[email protected]://localhost:3000/polyfills.bundle.js:2757:17 
[email protected]://localhost:3000/polyfills.bundle.js:2508:24 
[email protected]://localhost:3000/vendor.bundle.js:4277:51 
[email protected]://localhost:3000/vendor.bundle.js:5030:16 
PlatformRef_.prototype._bootstrapModuleWithZone/<@http://localhost:3000/vendor.bundle.js:5072:53 
[email protected]://localhost:3000/polyfills.bundle.js:2758:17 
[email protected]://localhost:3000/polyfills.bundle.js:2508:24 
scheduleResolveOrReject/<@http://localhost:3000/polyfills.bundle.js:3185:52 
[email protected]://localhost:3000/polyfills.bundle.js:2791:17 
[email protected]://localhost:3000/polyfills.bundle.js:2558:28 
[email protected]://localhost:3000/polyfills.bundle.js:2951:25

也許有幫助，這是我的package.json ：

{ 
    "name": "test1", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/material": "^2.0.0-beta.6", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "angular-pipes": "^6.5.2", 
    "angular2-highcharts": "^0.5.5", 
    "angular2-recaptcha": "^0.6.0", 
    "core-js": "^2.4.1", 
    "hammerjs": "^2.0.8", 
    "jquery": "^3.2.1", 
    "ng2-ckeditor": "^1.1.8", 
    "ng2-dragula": "^1.5.0", 
    "ng2-loading-animate": "0.0.17", 
    "ng2-md-datatable": "^1.4.0", 
    "ng2-truncate": "^1.3.7", 
    "openlayers": "^4.2.0", 
    "proj4": "^2.4.3", 
    "rxjs": "^5.1.0", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.0.6", 
    "@angular/compiler-cli": "^4.0.0", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~2.0.0", 
    "jasmine-core": "~2.5.2", 
    "jasmine-spec-reporter": "~3.2.0", 
    "karma": "~1.4.1", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "karma-coverage-istanbul-reporter": "^0.2.0", 
    "protractor": "~5.1.0", 
    "ts-node": "~2.0.0", 
    "tslint": "~4.5.0", 
    "typescript": "~2.2.0" 
    } 
}

我該如何解決這個錯誤，什麼是produci恩？

來源

2017-06-17 Jose Hermosilla Rodrigo

你在哪裏使用這個方法'getDOM（）'？ – Aravind

我沒有在代碼的任何部分使用getDOM（）。也許第三方模塊正在使用它。我不知道。 –

它指向哪一行？你嘗試過調試嗎？或者你在teamviewer中可用？ – Aravind

我調查了一下這個問題，發現它與ng2-loading-animate有關。

我很驚訝，因爲這個回購在其捆綁包中發送角度源代碼。更確切地說，它包括角BrowserAnimationModule和BrowserModule v4.1.3。

您有錯誤在此代碼ng2-loading-animate

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, 
    }, 
];

NG2加載，animate.js來到

  || 
      \/ 

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] 
      },] }, 
];

NG2加載-animate.js

  || 
      \/ 

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

NG2加載-animate.js

  || 
      \/ 

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

app.module.ts

  || 
      \/ 

imports: [ 
    LoadingAnimateModule.forRoot(),

因此，當您導入LoadingAnimateModule模塊角讀取其元數據並將_createNgProbe工廠增加到APP_INITIALIZER多提供商。而當你的應用程序開始角度執行這個工廠後執行相同的工廠從原始@angular/platform-browser代碼。

module.ngfactory。JS

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-loading-animate的_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回購庫中編寫錯誤報告，因爲角庫不應該包含角碼。

來源

2017-06-20 05:06:16 yurzui

getDOM（）爲null - 從Angular 2遷移到Angular 4

回答

相關問題