angular 2 app component not loading

Question

I am doing a simple angular 2 tutorial, but i just get 'loading' when trying to run my app. this is my index.html file

 <html>
      <head>
        <title>Angular CV </title>
        <base href="/">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
         <!-- Polyfill for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
      </head>
      <!-- 3. Display the application -->
      <body>
        <my-app>Still Loading...</my-app>
      </body>
    </html>

app.component.ts

    import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: ''
    })
    export class AppComponent {

    }

full code here: https://github.com/trinajoy/angularcv

you should do npm install reflect-metadata and npm install reflect-portfinder. — Rahul Arora
– Rahul Arora, Commented Nov 12, 2016 at 16:20
in chrome developer tools i get the following errors shim.min.js:2 Uncaught SyntaxError: Unexpected token < (for line of code before <html>) and for index.html localhost/:18 Uncaught ReferenceError: System is not defined(…) System.import('app').catch(function(err){ console.error(err); }); and directive_normalizer.js:92 Uncaught Error: Template parse errors:(…) - but im not sure which part of the code its referring to... — user6086008
– user6086008, Commented Nov 12, 2016 at 17:37
From your github repo, i think you are missing systemjs.config.js — Sanket
– Sanket, Commented Nov 12, 2016 at 18:20
ok, i just added systemjs.config.js to the project, but the app still doesnt load properly. It just reads loading, from my index.html file... — user6086008
– user6086008, Commented Nov 12, 2016 at 19:02

Graham · Accepted Answer · 2017-09-22 03:59:09Z

0

Angular-cli changed their system from SystemJS to Webpack since beta.14. It seems you're still using SystemJS, though.

You can migrate to Webpack following these instructions. However, as you're just following a tutorial, I'd recommend to install angular-cli from scratch.

edited Sep 22, 2017 at 3:59

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Nov 12, 2016 at 22:17

brians69

4853 gold badges12 silver badges26 bronze badges

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

4 Comments

user6086008 Over a year ago

well i did the following npm uninstall -g angular-cli, npm cache clean, npm install -g angular-cli@latest, and started again, but from what i see, i have the same info in my json file and also the angular-cli json, i still get to the same point, where my app just displays 'loading' from index file.. full code here: github.com/trinajoy/angulartest.git i have the same problem with a number of tutorials im trying

brians69 Over a year ago

But you're still trying to import SystemJS in your index.html (lines 17-19) (and also trying to load SystemJS scripts).

user6086008 Over a year ago

so im donig - npm uninstall -g angular-cli, npm cache clean, npm install -g angular-cli@latest - and still not getting the beta 14..? am i not doing it right?

user6086008 Over a year ago

actually i think changed the index.html to match the tutorial i was doing.. i guess thats where the problem was..

Collectives™ on Stack Overflow

angular 2 app component not loading

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related