Menu
I'm following the Angular.io documenation to write a simple "Hello World" app with Angular 2. Once the app runs in the browser, Angular 2 throws a TypeError from angular2/src/browser_adapter.js.
Everything seems to be setup correctly. Any idea what the issue is?
Console:
TypeError: Array.from is not a function
at createArrayFromMap (http://localhost:3000/node_modules/angular2/src/facade/collection.js:61:42)
at Function.MapWrapper.values (http://localhost:3000/node_modules/angular2/src/facade/collection.js:100:47)
at _createListOfBindings (http://localhost:3000/node_modules/angular2/src/di/injector.js:769:36)
at Function.Injector.resolve (http://localhost:3000/node_modules/angular2/src/di/injector.js:403:16)
at Function.Injector.resolveAndCreate (http://localhost:3000/node_modules/angular2/src/di/injector.js:420:41)
at _createAppInjector (http://localhost:3000/node_modules/angular2/src/core/application_common.js:291:39)
at http://localhost:3000/node_modules/angular2/src/core/application_common.js:257:31
at Zone.run (http://localhost:3000/node_modules/angular2/bundles/angular2.js:118:17)
at Zone.run (http://localhost:3000/node_modules/angular2/src/core/zone/ng_zone.js:165:42)
at NgZone.run (http://localhost:3000/node_modules/angular2/src/core/zone/ng_zone.js:112:40)BrowserDomAdapter.logError @ :3000/node_modules/angular2/src/dom/browser_adapter.js:71
all.babel.js ( gets complied to es5 all.js):
import {Component, View, bootstrap} from 'angular2/angular2'
@Component({
selector: 'helloworld'
})
@View({
template: `<h1>Hello World!</h1>`
})
class HelloWorld {
}
bootstrap(HelloWorld)
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular 2 Hello World</title>
<script src="./node_modules/rx/dist/rx.all.js" charset="utf-8"></script>
<script src="./node_modules/systemjs/dist/system.js"></script>
<script src="./node_modules/angular2/bundles/angular2.js" charset="utf-8"></script>
<script src="./dist/all.js" charset="utf-8"></script>
</head>
<body>
<helloworld></helloworld>
<script type="text/javascript">
System.config({
baseURL: '/'
, defaultJSExtensions: true
, paths: {
'angular2/*': './node_modules/angular2/*.js' // Angular
, 'rx': './node_modules/rx/dist/rx.all.js'
, 'all': './dist/all.js'
}
})
System.import('all')
</script>
</body>
</html>
Replicate with https://github.com/agconti/angular-2-hello-world.
834
The "some is not a function" error occurs when the some() method is called on a value that is not an array. To solve the error, convert the value to an array before calling the method or make sure to only call the some() method on valid arrays. Here is an example of how the error occurs.
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.
The "forEach is not a function" error occurs when we call the forEach() method on a value that is not of type array, Map , or Set . To solve the error, make sure to only call the forEach method on arrays, Map or Set objects.
Array.from() lets you create Array s from: iterable objects (objects such as Map and Set ); or, if the object is not iterable, array-like objects (objects with a length property and indexed elements).
In order to get Angular 2 to run in the browser I had to include the traceur runtime:
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
This was necessary even after I setup my Systems.js config to use Babel as a transpiler.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With