I'm starting to learn Angular and therefore want to do their tutorial. However, it just doesn't load the component. I did exactly this:
- git clone https://github.com/angular/quickstart.git quickstart
- cd quickstart
- npm install
- npm start
I haven't modified the code yet and the installation runs fine withouth any errors. However, when starting the app the browser just shows "Loading AppComponent content here ..." instead of the expected "Hello Angular". The browser console gives me the following error:
Error: (SystemJS) in strict mode code, functions may be declared only at top level or immediately within another function
ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:229:17
Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:113:24
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:509:52
ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:262:21
Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:151:28
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:405:25
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:336:25
Evaluating http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js
Error loading http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js as "@angular/compiler" from http://localhost:3000/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
var error = NativeError.apply(this, arguments);
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"pree2e": "webdriver-manager update",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~2.3.0",
"@angular/compiler": "~2.3.0",
"@angular/core": "~2.3.0",
"@angular/forms": "~2.3.0",
"@angular/http": "~2.3.0",
"@angular/platform-browser": "~2.3.0",
"@angular/platform-browser-dynamic": "~2.3.0",
"@angular/router": "~3.3.0",
"angular-in-memory-web-api": "~0.1.17",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.7.2"
},
"devDependencies": {
"concurrently": "^3.1.0",
"lite-server": "^2.2.2",
"typescript": "~2.0.10",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "4.0.9",
"webdriver-manager": "10.2.5",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "^2.5.36",
"@types/selenium-webdriver": "^2.53.33"
},
"repository": {}
}