Geek Answers Handbook

Angular 2 Quickstart - my-app component does not load

Trying to learn angular, so I started with a quickstart tutorial for TypeScript on my website ( https://angular.io/guide/quickstart )

I am working on ubuntu 14.04.

I followed every step, and in the end I get no errors, but the component does not load. Instead, the only thing I see is “Loading ...” instead of the main component “my-app”.

what i see in my browser

index.html :

<html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) 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>Loading...</my-app> </body> </html>

application /app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }

I see no reason to show the rest of the configuration files, because they are exactly the same as in the tutorial. The only change is that I changed tsconfig.json to

"target": "es6",

because it didn’t work.

What could be the problem? Why is this not loading my main component?

Edit: these are errors in my browser console:

  2 http://localhost:3000/node_modules/systemjs/dist/system.src.js Failed to load resource: the server responded with a status of 404 (Not Found) systemjs.config.js:46 Uncaught TypeError: System.config is not a function http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found) app:18 Not Found: http://localhost:3000/app Error loading http://localhost:3000/app(anonymous function) @ app:18 http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found)
+5
source share
2 answers

I had a similar problem and finally managed to find where the problem is.

In my case, when I ran npm start in the browser, the error was XHR error (404 Not Found) loading http://localhost:3000/app/main.js I realized that I am missing main.js , but I have /app/main.ts .

Typescript files (.ts) were not compiled into JS files (.js). Then it was discovered that an extra character "\" was added at the end of the tsconfig.json file. It was not visible in Explorer or in Atom, until it typed tsconfig in the terminal and pressed the Tab key to end automatically. He showed that there is an extra character at the end of the file name. Then using this command $ mv tsconfig.json\ tsconfig.json name was changed. And then with the launch of npm, it just worked perfectly.

So, check all the file names in the console. Hope yours will work perfectly.

+1
source

I think you forgot to add main.ts (see step 3 from the tutorial - https://angular.io/guide/quickstart )

0
source

More articles:


All Articles