5

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

5
  • Is there an error in the console?
    – eko
    Commented Nov 12, 2016 at 15:49
  • you should do npm install reflect-metadata and npm install reflect-portfinder. 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... Commented Nov 12, 2016 at 17:37
  • From your github repo, i think you are missing systemjs.config.js
    – 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... Commented Nov 12, 2016 at 19:02

1 Answer 1

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.

4
  • 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 Commented Nov 13, 2016 at 11:28
  • But you're still trying to import SystemJS in your index.html (lines 17-19) (and also trying to load SystemJS scripts).
    – brians69
    Commented Nov 13, 2016 at 16:21
  • 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? Commented Nov 14, 2016 at 10:46
  • 1
    actually i think changed the index.html to match the tutorial i was doing.. i guess thats where the problem was.. Commented Nov 14, 2016 at 15:17

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.