Menu
Trying to learn angular so I've started with the quickstart tutorial for TypeScript in their website (https://angular.io/guide/quickstart)
I'm working on ubuntu 14.04.
I've followed through each step, and at the end I'm not getting any errors, but the component does not load. Instead, the only thing I am seeing is "Loading..." instead of the main component "my-app".
what i see in my browser
the 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>
app/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 point in showing the rest of the configuration files because they are exactly like the ones in the tutorial. The only change is that I've changed tsconfig.json to
"target": "es6",
because it didn't work otherwise.
What can be the problem? Why is it not loading my main component?
Edit: these are the 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)
993
I had kind of similar problem and was finally able to find where the problem is.
In my case, when I ran npm start in browser console 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 to JS(.js) files. Then it was found that an additional character "\" at the end of tsconfig.json file. It was not visible in explorer or in Atom, untill in Terminal typed tsconfig and pressed Tab key for auto completion. It shown that there is an additional character at the end of the file name. Then with this command $ mv tsconfig.json\ tsconfig.json, the name was changed. And then with npm start, it just worked fine.
So please check all your file names in console. Hope your one will also work fine.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
