Angular 2 app not working - Blank page
Question
I am using Chrome browser, Angular 2 with TypeScript. Following is my code;
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 - Simple Reddit</title>
<script src="node_modules/es6-shim/es6-shim.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>
<link rel="stylesheet" href="resources/vendor/semantic.min.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<script src="systemjs.config.js"></script>
<script>
System.import('app.js')
.then(console.log('app.js Loaded!!'), console.error.bind(console));
</script>
<app-reddit></app-reddit>
</body>
</html>
app.ts:
import { Component } from "@angular/core";
import { NgModule } from '@angular/core';
@Component({
selector: 'app-reddit',
template: "<div>Reddit Clone! ... </div>"
})
export class AppReddit{}
app.module.ts:
import { NgModule } from '@angular/core';
import { AppReddit } from './app';
@NgModule({
declarations: [AppReddit],
bootstrap: [AppReddit]
})
export class AppRedditModule{};
main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppRedditModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppRedditModule);
My code compiles fine with the tsc command. When I run it, I get the app Loaded!! message in console too, but it shows a blank page.
There are no Console errors or warnings.
What am I missing?
2 answers
solution1
0 2017-12-30 17:49:04
Please change selector in your component
@Component({
selector: 'app-reddit',
template: "<div>Reddit Clone! ... </div>"
})
You have typo in selector
solution2
0 2017-12-30 18:02:16
Does it show any error in console? Did you create the project with Angular CLI?
Try to add catch to the main.ts: platformBrowserDynamic().bootstrapModule(AppRedditModule).catch(err => console.log(err));
And try to add <base href="/"> into index.html head tag
Unimportant but I have to say it: In app.ts you don't need import { NgModule } from '@angular/core'; and if you would need it, you can add it to the first import. But you don't need it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.