Leon Gaban Leon Gaban - 7 months ago 2118
Javascript Question

Angular2 5 minute install bug - require is not defined

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



enter image description here

Last log from
npm start



enter image description here

Answer

OK finally got my 'basic' app to work.

First my problem was that npm start was not compiling my typescript .ts files.

From this post, I found an answer here Cannot find external module 'angular2/angular2' - Angular2 w/ Typescript

I needed to run npm install -g tsd@latest to update my TypeScript definition. Right after that I needed to update the TypeScript Definition (TSD) for Angular2 tsd install angular2.

After this was done I was still getting errors from my boot.js file.

Instead of this import {AppComponent} from './app.component'

I needed to write it like this import {AppComponent} from '../app.component.js'


Now it works! https://github.com/leongaban/angular2quickstart

enter image description here


One annoying problem is that npm start still isn't auto compiling the typescript files, so I still have to manually compile each .ts file by hand tsc app.component.ts --module system

Comments