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?

can you create a plunker for your code?

Niladri
– Niladri

2017-12-30 17:53:42 +00:00
Commented Dec 30, 2017 at 17:53 — Niladri
– Niladri, Commented Dec 30, 2017 at 17:53
Let me try to create one.

Sid
– Sid

2017-12-30 17:54:22 +00:00
Commented Dec 30, 2017 at 17:54 — Sid
– Sid, Commented Dec 30, 2017 at 17:54

Laker · Accepted Answer · 2017-12-30 18:02:16Z

1

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.

answered Dec 30, 2017 at 18:02

Laker

1,8624 gold badges21 silver badges32 bronze badges

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

5 Comments

Sid Over a year ago

No errors in Console before and after trying the above steps. Didn't work either.

Laker Over a year ago

Can you inspect the app and make a screenshot of the element tree?

Laker Over a year ago

Hm:\ try this please: @Component({ selector: 'app-reddit', template: <div>Reddit Clone! ... </div>, styles: [``:host() { display: block; height: 50px; background: red; }] }) Will it show something?

Laker Over a year ago

Sorry, one typo:/ <div>Reddit Clone! ... </div>, styles: [':host() { display: block; height: 50px; background: red; }'] }) But I guess that you don't have and Angular CLI project, right?

Laker Over a year ago

Let us continue this discussion in chat.

Devang Naghera · Accepted Answer · 2017-12-30 17:49:04Z

0

Please change selector in your component

@Component({
    selector: 'app-reddit',
    template: "<div>Reddit Clone! ... </div>"
})

You have typo in selector

answered Dec 30, 2017 at 17:49

Devang Naghera

7066 silver badges13 bronze badges

2 Comments

Sid Over a year ago

Sorry, it was a typo in the question I posted. I have corrected it. Thanks for noticing.

Devang Naghera Over a year ago

Ohh sorry.,I answered too early @Sid.Can you create fiddle of this?

Collectives™ on Stack Overflow

Angular 2 app not working - Blank page

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related