1

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:

  1. git clone https://github.com/angular/quickstart.git quickstart
  2. cd quickstart
  3. npm install
  4. 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": {}
}
3
  • Can you show your package.json file ? Commented Dec 12, 2016 at 3:00
  • @H.Herzl I've added the package.json to my question. Commented Dec 12, 2016 at 5:32
  • Check the index.html file and find the line : System.import(). Check for the file, mentioned inside the import. In that file, check the component which is been bootstraped. Commented Dec 12, 2016 at 12:11

2 Answers 2

1

I have same issue, and I've found this: angular2 quickstart ReferenceError: angular is not defined new angular.Component({

It seems that it is a problem with Firefox browser, no issue with Chrome...

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! I actually think the mistake is violating the strict mode in zone.js. However, it seems that Chrome doesn't care about it and it works fine there.
0

i had the same problem, and i fixed it by : installing [email protected] and uninstalling the component that made errors like zone.js, core.js, cleaning cache and reinstalling them and systemjs too.

when you uninstalled the zone.js, the errors you get from the browser's console and the cmd log can guide you more or less on the next steps.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.