个人中心
gpt4 book ai didi

javascript - Angular 2 类型错误 : Cannot read property 'animate' of null

转载 作者：行者123 更新时间：2023-11-29 17:56:39 25 4
gpt4 key购买 nike

我使用的是 Chrome 51 和 Angular 2.rc4，当加载我的 Angular 应用程序时，控制台会弹出以下错误消息。

TypeError: Cannot read property 'animate' of null
at e.supportsWebAnimation (platform-browser.umd.js:2232)
at st (platform-browser.umd.js:2896)
at t._instantiate (core.umd.js:6370)
at t._instantiateProvider (core.umd.js:6311)
at t._new (core.umd.js:6300)
at t.getObjByKeyId (core.umd.js:5954)
at t._getByKeyDefault (core.umd.js:6480)
at t._getByKey (core.umd.js:6452)
at t._getByReflectiveDependency (core.umd.js:6442)
at t._instantiate (core.umd.js:6342)
at c (vendors.js:3)
at vendors.js:3
at t.invokeTask (vendors.js:3)
at Object.onInvokeTask (core.umd.js:9091)
at t.invokeTask (vendors.js:3)
at t.runTask (vendors.js:3)
at s (vendors.js:3)
at XMLHttpRequest.invoke (vendors.js:3)

如果我再次刷新它，它就会消失并且应用程序加载正常。当我深入研究它时，我发现了以下有问题的代码，其中文档的 body 在文件 platform-b​​rowser.umd 中似乎是 null .js.

BrowserDomAdapter.prototype.supportsWebAnimation = function () {
        return isFunction(document.body['animate']);
};

我正在使用 systemjs-builder 来捆绑 Angular 组件，如下所示:

//Bundle auth module to a single script file
gulp.task('bundle_auth', ['bundle_vendors'], function() {
var builder_auth = new Builder('', 'assets/js/dependencies/config/auth.system.js');
return builder_auth
    .buildStatic('assets/app/auth/main.js', 'assets/dist/js/auth/bundle.js', { minify: true, sourceMaps: true })
    .then(function() {
        //console.log('Build complete for auth module');
    })
    .catch(function(err) {
        console.log(err);
    });
});

这是我的 systemjs 配置，如果需要的话:

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app' : 'assets/app/auth',
    '@angular': 'node_modules/@angular',
    'ng2-translate': 'node_modules/ng2-translate',
    'rxjs': 'node_modules/rxjs', // added this map section
    'primeng': 'node_modules/primeng',
    'angular2-recaptcha': 'node_modules/angular2-recaptcha'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'assets/app/auth/main.js',  defaultExtension: 'js'},
    'rxjs': { defaultExtension: 'js' },
    'primeng': {defaultExtension: 'js'},
    'angular2-recaptcha': {defaultExtension: 'js'}
};

var packageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'forms',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
];

// Individual files (~300 requests):
function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}

// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages
packageNames.forEach(setPackageConfig);

var config = {
    defaultJSExtensions: true,
    map: map,
    packages: packages
};

System.config(config);

})(this);

此问题仅在 chrome 中发生。

编辑

这是 Angular Bootstrap 文件:

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './component/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import {HttpService} from '../common/service/http.service';
import {enableProdMode} from '@angular/core';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {APP_ROUTER_PROVIDERS} from '../routes/auth.routes';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

enableProdMode();
bootstrap(AppComponent,[
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    TRANSLATE_PROVIDERS,
    HttpService,
    disableDeprecatedForms(),
    provideForms()
]).catch(err => console.error(err));

最佳答案

我认为您将捆绑的 js 文件包含在 index.html 的 head 部分内，但您应该将它们转移到应用程序下的正文部分。

在我将我的应用程序转移到 webpack 之后，为了更加清楚，我遇到了完全相同的问题。

例如，

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</head>

<body>
    <app-one>
        Loading...
    </app-one>
</body>

</html>

我是这样传输脚本的

<!DOCTYPE html>
<html>
<head>
    <base href="">

    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <app-one>
        Loading...
    </app-one>
  
    <script src="prod/vendor.js"></script>
    <script src="prod/app.js"></script>
</body>

</html>

关于javascript - Angular 2 类型错误 : Cannot read property 'animate' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38519834/

25 4 0
文章推荐： javascript - 取消选中复选框时 AJAX 不起作用
文章推荐： android - 不从 Sqlite 数据库表中获取数据
文章推荐： javascript - 从 Struts 2 获取值到 AngularJS
文章推荐： android - Linphone Android 导入和构建
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com