I'm doing the Angular2 5 minute quick start.
About half way through the tutorial now, I have the following files setup correctly:
- index.html,
- app.component.ts
- app/boot.ts
- package.json
- tconfig.json
Ran npm start and am getting this error:
Uncaught ReferenceError: require is not defined(anonymous function) @ boot.js:1
angular2-polyfills.js:143
Uncaught TypeError: Cannot read property 'split' of undefinedreadMemberExpression @ system.src.js:1456(anonymous function) @ system.src.js:3224(anonymous function) @ system.src.js:3749complete @ system.src.js:2487run @ angular2-polyfills.js:138zoneBoundFn @ angular2-polyfills.js:111
I found this link about using the es6 shim and I included <script src=node_modules/es6-shim/es6-shim.js></script>.
However I'm still getting the Uncaught ReferenceError: require is not defined error.
app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
(app/boot.ts)
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src=node_modules/es6-shim/es6-shim.js></script>
<script src=node_modules/angular2/bundles/angular2-polyfills.js></script>
<script src=node_modules/systemjs/dist/system.src.js></script>
<script src=node_modules/rxjs/bundles/Rx.js></script>
<script src=node_modules/angular2/bundles/angular2.dev.js></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
{
name: angular2-quickstart,
version: 1.0.0,
scripts: {
tsc: tsc,
tsc:w: tsc -w,
lite: lite-server,
start: concurrent npm run tsc:w npm run lite
},
license: ISC,
dependencies: {
angular2: 2.0.0-beta.0,
systemjs: 0.19.6,
es6-promise: ^3.0.2,
es6-shim: ^0.33.3,
reflect-metadata: 0.1.2,
rxjs: 5.0.0-beta.0,
zone.js: 0.5.10
},
devDependencies: {
concurrently: ^1.0.0,
lite-server: ^1.3.1,
typescript: ^1.7.3
}
}
tconfig.json
{
compilerOptions: {
target: ES5,
module: system,
moduleResolution: node,
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
removeComments: false,
noImplicitAny: false
},
exclude: [
node_modules
]
}
The compiled app/boot.js
Last log from npm start
