CODEWITHSUNDEEP
javascriptangulartypescript
Sid
Sid

Reputation: 4995

Angular 2 app not working - Blank page

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?

Upvotes: 1

Views: 1060

Answers (2)

Laker
Laker

Reputation: 1822

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.

Upvotes: 1

Devang Naghera
Devang Naghera

Reputation: 706

Please change selector in your component

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

You have typo in selector

Upvotes: 0

Related Questions