无法读取未定义的属性“拆分”
Posted
技术标签:
【中文标题】无法读取未定义的属性“拆分”【英文标题】：Cannot read property 'split' of undefined 【发布时间】：2015-07-04 14:04:11 【问题描述】：我在本地服务器上运行以下代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config(
paths:
'*': '*.js',
'angular2/*': 'angular2/*'
);
System.import('main');
</script>
</body>
</html>
以上是index.html页面。
import Component, View, bootstrap from 'angular2/angular2';
@Component(
selector: 'my-app'
)
@View(
template: '<h1>My first Angular 2 App</h1>'
)
class AppComponent
bootstrap(AppComponent);
以上是main.js文件。
当我在服务器上运行它时，我会在控制台中看到以下内容。
http://localhost:63342/es6/main.js:3:1: Unexpected token @
angular2.dev.js:752 TypeError: Error loading "main" at http://localhost:63342/es6/main.js
Cannot read property 'split' of undefined
angular2.dev.js:753 TypeError: Error loading "main" at http://localhost:63342/es6/main.js
Cannot read property 'split' of undefined
at Zone.longStackTraceZone.getLongStacktrace (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:728:35)
at Zone.longStackTraceZone.onError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:753:19)
at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:92:14)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/es6-module-loader@0.16.5.js:1:7439)
at I (https://jspm.io/es6-module-loader@0.16.5.js:1:7071)
at O.7.O.when (https://jspm.io/es6-module-loader@0.16.5.js:1:10745)
at w.7.w.run (https://jspm.io/es6-module-loader@0.16.5.js:1:9781)
at e.3.e._drain (https://jspm.io/es6-module-loader@0.16.5.js:1:1740)
at 3.e.drain (https://jspm.io/es6-module-loader@0.16.5.js:1:1394)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 738ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at k (https://jspm.io/es6-module-loader@0.16.5.js:1:21515)
at https://jspm.io/es6-module-loader@0.16.5.js:1:22664
at Zone.run (https://code.angularjs.org/2.0.0- alpha.19/angular2.dev.js:89:19)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/es6-module-loader@0.16.5.js:1:7439)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 739ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at x.import (https://jspm.io/es6-module-loader@0.16.5.js:1:22539)
at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/system@0.16.7.js:5:1180)
at http://localhost:63342/es6/index.html:17:18
angular2.dev.js:752 TypeError: Cannot read property '__useDefault' of undefined
angular2.dev.js:753 TypeError: Cannot read property '__useDefault' of undefined
at https://jspm.io/system@0.16.7.js:5:1220
at Zone.run (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:89:19)
at zoneBoundFn (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:66:19)
at D (https://jspm.io/es6-module-loader@0.16.5.js:1:7439)
at I (https://jspm.io/es6-module-loader@0.16.5.js:1:7071)
at O.7.O.when (https://jspm.io/es6-module-loader@0.16.5.js:1:10745)
at w.7.w.run (https://jspm.io/es6-module-loader@0.16.5.js:1:9781)
at e.3.e._drain (https://jspm.io/es6-module-loader@0.16.5.js:1:1740)
at 3.e.drain (https://jspm.io/es6-module-loader@0.16.5.js:1:1394)
at MutationObserver.t (https://jspm.io/es6-module-loader@0.16.5.js:1:3302)
--- Sun Apr 26 2015 08:27:39 GMT+0530 (IST) - 742ms ago
Error
at Function.getStacktraceWithUncaughtError (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:699:32)
at Zone.longStackTraceZone.fork (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:758:43)
at Zone.bind (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:64:21)
at Function.Zone.bindArguments (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:195:22)
at t.fnNames.forEach.obj.(anonymous function) [as then] (https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js:186:42)
at x.$__global.upgradeSystemLoader.e.import (https://jspm.io/system@0.16.7.js:5:1195)
at http://localhost:63342/es6/index.html:17:18
以上代码取自angular 2官方网站angular.io。如果在plunkr 中执行相同的代码，我会得到输出“我的第一个 Angular 2 应用程序”，但不是在我的本地。
我错过了什么吗？
【问题讨论】：
【参考方案1】：看来我们必须导入 traceur-runtime.js 并设置 traceur 选项。
这里是plunker link
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config(
traceurOptions:
annotations: true,
memberVariables: true,
types: true
,
paths:
'*': '*.js',
'angular2/*': 'angular2/*'
);
System.import('main');
</script>
</body>
</html>
【讨论】：
【参考方案2】：问题在于您在其中声明 Angular 应用程序的文件名。
应该是main.es6.js 而不是main.js
文件名格式应始终为System.import('main') 中指定的名称，即main. + es6. + js
Read this article for better uderstanding
【讨论】：
我已经尝试更改文件名。您是在告诉我只需要更改文件名还是 System.import 语句以及它。仅将文件名从 main.js 更改为 main.es6.js 不起作用，出现同样的问题。 @Kaushik 我只是说更改文件名应该可以解决您的问题 @Kaushik 你能在 plunkr 中重现问题吗，请参阅我在此处重现的问题 plnkr.co/edit/Is9U5q3oydB7DY8DKuBE?p=preview，如果将文件重命名为 main.es6.js，它将修复。你确定你使用的是es5/es6？
@pankajparkar sn-p 已经存在于 plunkr 中。我在问题的最后一段中提到它在 plunkr 中运行良好，但在本地服务器中运行良好。我已经提到了那里的链接。您可以尝试从本地服务器运行它并尝试相同的操作吗？
@pankajparkar 我检查了您评论的 plnkr 链接。它在那里工作。 :) 当我在本地服务器上运行时，完全相同的代码不起作用。以上是关于无法读取未定义的属性“拆分”的主要内容，如果未能解决你的问题，请参考以下文章
System.err：TypeError：无法读取未定义的属性“拆分”
反应钩子形式 - 类型错误：无法读取 L 处未定义的属性“拆分”（get.ts：6）
尝试执行 react-native 应用程序时出现“错误无法读取未定义的属性‘拆分’”
无法读取未定义类型错误的属性“推送”：无法读取未定义错误的属性“推送”