title: Angular is not rendering app.component.html page
body: <p>I am new to Angular and I am trying to create a sample project using Angular4.
  I have created project using <code>ng new MyApp</code>. When I run command <code>ng serve -o</code> it is showing blank page. When checked console it is showing <code>Uncaught TypeError: undefined is not a function</code> in <code>core.js</code> file.
  I am using <code>typescript 2.7.2</code> and <code>@angular/cli 6.0.8</code> and <code>nodejs v8.11.3</code> .
  I have gone through some solutions on internet but none is working.
  I have referred the article : </p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/questions/47725378/why-doesnt-app-component-html-render?rq=1">Why doesn&#39;t app.component.html render?</a></p>
  </blockquote>
  
  <p>and few other articles but none is working.
  Also when I am creating Angular4 application <code>angular-cli.json</code> file is not getting created. I have tried adding the <code>angular-cli.json</code> file also but no luck.
  Can any one please help me on this?
  Please let me know if more inputs are required from my side.</p>
  
  <p>Code for Index.html :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Ng4Playground&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code for app.component.ts : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Code for app.component.html :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--The content below is only a placeholder and can be replaced.--&gt;
  &lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Welcome to {{ title }}!
    &lt;/h1&gt;
    &lt;img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="&gt;
  &lt;/div&gt;
  &lt;h2&gt;Here are some links to help you start: &lt;/h2&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;h2&gt;&lt;a target="_blank" rel="noopener" href="https://angular.io/tutorial"&gt;Tour of Heroes&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h2&gt;&lt;a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki"&gt;CLI Documentation&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h2&gt;&lt;a target="_blank" rel="noopener" href="https://blog.angular.io/"&gt;Angular blog&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Package.json : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "ng4-playground",
    "version": "0.0.0",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.0.3",
      "@angular/forms": "^6.0.3",
      "@angular/http": "^6.0.3",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.0.3",
      "@angular/router": "^6.0.3",
      "core-js": "^2.5.4",
      "rxjs": "^6.0.0",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^6.0.3",
      "@angular-devkit/build-angular": "~0.6.8",
      "typescript": "~2.7.2",
      "@angular/cli": "~6.0.8",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Polyfills.ts :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * This file includes polyfills needed by Angular and is loaded before the app.
   * You can add your own extra polyfills to this file.
   *
   * This file is divided into 2 sections:
   *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
   *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
   *      file.
   *
   * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
   * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
   * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
   *
   * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
   */
  
  /***************************************************************************************************
   * BROWSER POLYFILLS
   */
  
  /** IE9, IE10 and IE11 requires all of the following polyfills. **/
  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  
  /** IE10 and IE11 requires the following for NgClass support on SVG elements */
   import 'classlist.js';  // Run `npm install --save classlist.js`.
  
  /** IE10 and IE11 requires the following for the Reflect API. */
   import 'core-js/es6/reflect';
  
  
  /** Evergreen browsers require these. **/
  // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
  import 'core-js/es7/reflect';
  
  /**
   * Web Animations `@angular/platform-browser/animations`
   * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
   * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
   **/
   import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  
  /**
   * By default, zone.js will patch all possible macroTask and DomEvents
   * user can disable parts of macroTask/DomEvents patch by setting following flags
   */
  
   // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
   // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
   // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  
   /*
   * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
   * with the following flag, it will bypass `zone.js` patch for IE/Edge
   */
  // (window as any).__Zone_enable_cross_context_check = true;
  
  /***************************************************************************************************
   * Zone JS is required by default for Angular itself.
   */
  import 'zone.js/dist/zone';  // Included with Angular CLI.
  
  
  
  /***************************************************************************************************
   * APPLICATION IMPORTS
   */</code></pre>
  </div>
  </div>
  </p>