Angular 2 TypeError:无法读取null的属性'animate'
问题描述:
我正在使用Chrome 51和Angular 2.rc4,并在加载我的角度应用程序时在控制台中弹出以下错误消息。Angular 2 TypeError:无法读取null的属性'animate'
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
的文档似乎为null
,文件platform-browser.umd.js
。
BrowserDomAdapter.prototype.supportsWebAnimation = function() {
return isFunction(document.body['animate']);
};
我使用systemjs建设者对岸线的角度成分,就像这样:
//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);
此问题仅发生在铬。
编辑
这里是角引导文件:
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头部分的内部,而是你应该转移到那些在身体部分在你的应用程序下
为了在将应用程序转移到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>
+0
同样的问题在这里,你的解决方案解决了这个问题,谢谢! –
你可以添加你的角度引导文件? – n00dl3
@ n00dl3我已经添加了引导文件 – xmaestro