'Blank screen displays After running Angular 4 web app project First time

I try to run my first Angular 4 js web project. so I have installed node.js for my npm manager and I am using visual studio code as an editor. After following the below steps. I get the blank screen as a result. kindly help me to solve this Issue.

Steps I followed:

  • npm install -g @angular/cli
  • ng new PROJECT
  • cd PROJECT
  • ng serve

After performing the above steps server is up. but when Navigate to http://localhost:4200/ . it shows blankpage.

app.components.ts

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

enter image description here

enter image description here

Browser Console Browser Console

Chrome Console shows Error

angularjsnode.js


Solution 1:[1]

1 . npm i mdn-polyfills --save

  1. and modify the file under the project src\polyfills.ts, add following code

// or load it before other angular2 & zone.js stuff

import "core-js/client/shim"; 

import "zone.js";

import "reflect-metadata";

3.ng build and then hit enter.

4.ng serve

Solution 2:[2]

If you want to test your production build using the build in dev server you can run.

> ng serve --prod

Solution 3:[3]

I ran through similar problem. I was actually trying to run the Angular app in sub-folder while angular created path for custom JS files and pointed to the root folder.

This got solved 2 ways: 1. I copied only JS files from compiled app to root folder and it started working. 2. Tried to run whole app in root folder and never faced same issue.

Your problem might be different than what I faced, but shared my experience if it could help someone else.

Solution 4:[4]

I had the same problem. But my problem get resolved by performing following steps in command prompt:

  1. ng build and then hit enter.
  2. ng serve

I hope it will help you as well.

Solution 5:[5]

This worked for me. Open angular.json in the root folder. change this line "index": "src/index.html", to "index": "src/app/app.component.html",

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 praveen
Solution 2 dssprakash
Solution 3 kalpesh khule
Solution 4 Varinderjit Kaur
Solution 5 Patrick Dunn

Related Questions