3

I was wondering if anyone had a similar issue like what Im having now?

I was following the angular course on Scrimba, its lecture 7, angular component.

I created the angular app using cli command and tried to load and change the "loading..." section with "hello world" like the lecture, even copied the whole code and paste it in my local files and refresh the index.html but still didnt work!

I wonder if anyone knows or had a similar problem? Mucho thanks for any help!

this is what my app.component

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

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
  title: string;
  constructor(){ }

  ngOnInit() {
    this.title = 'hello';
  }
}

and this is what my app.module

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomersComponent } from './customers/customers.component';

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

and this is my index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularProject</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>
      Loading...
  </app-root>
</body>
</html>
Improve this question
4
  • We don't know what changes you made (we have no idea of what this lecture is), and we don't know what "doesn't work" means. Tell precisely what you're doing, what you expect to happen, and what happens instead. Post the relevant code. Commented Aug 16, 2019 at 16:43
  • That doesn't mean anything. You forgot to finish your sentence apparently. Commented Aug 16, 2019 at 19:44
  • @JBNizet I was trying to learn how the angular component works and how to use the ngOnInit function, and what I expected to happen was that in the "app-root", the default text is "Loading..." but I wanted to add the "hello" text when the ngOnInit function is triggered. But currently, it does not add the "hello" in the browser/html. Hope this is clear now? Could you maybe help me? Commented Aug 16, 2019 at 19:49
  • The default text is not Loading. Loading is what appears between the moment when the page is loaded by the browser and the moment when the JavaScript code has been parsed and executed by the browser. At this time, Angular instantiates the component and replaces the default, static text "Loading" by the dynamic template of the component. As you were told already, you can't have both template and templateUrl. Which one do you want to keep? if it's templateUrl, what the the app.component.html file contain? What do you expect to see, and what do you see instead? Commented Aug 16, 2019 at 19:53

3 Answers 3

Reset to default
4

You can't have these 2 at the same time

  template: `<h1>{{ title }}</h1>`,
  templateUrl: './app.component.html',

You can remove one of those

By the way your project is setup I must say you are missing some config file. You should follow these step to get your app running

npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve

Note this is the error I have so you need to follow above step

enter image description here

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

4 Comments

here is the stackblitz link - stackblitz.com/edit/angular-oyrcq3 what is crazy is that on stackblitz, it works but when I test with my local browser, it only shows the <p> part and not the "helloComponent". When I check the inspect element, the hello component is added in the "elements" but it has 0x0 width and height. When I hardcode it, such as background-color, it does show that color but not the hello component data. It drives me crazy help :((((
this is the repository - github.com/jjyoon7/angular-newbie Thank you so much for looking into it!
Seem like you dont have tsconfig.json and tsconfig.app.json. Just update my answer.
hello! you were right, I did not follow those steps before so now I have tried that. But when I test locally, still has the same issue where in the inspect element it does not have any width and height property. Also now it throws error in the stackblitz as well, where it says it cannot find "index.html" and "main.ts" under src folder, where it does exist. :(((
1

I had similar issue (i.e blank page). I followed the simple steps given for demo Angular app given in https://angular.io/guide/setup-local (also similar steps are given in other sites for demo app), however it was not showing anything. I tried to view the source and could not spot any issue. After long try, i thought it could be issue with my Firefox browser (I was having ubuntu 16.04, Firefox v51). So, I upgrade Firefox latest version v71 and it displayed text from App module (As expected). Please try to check your web browser, it might be similar issue. Good luck

Improve this answer

1 Comment

thnks bro its browser issue bcz i was using IE but when i used chrome , my problem resolved
-2

I had similar issue (i.e blank page). I upgraded my browser and it worked.

Improve this answer

1 Comment

The answer should be in detail. stackoverflow.com/help/how-to-answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.