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 ponent.
I created the angular app using cli mand 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 appponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`,
templateUrl: './appponent.html',
styleUrls: ['./appponent.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 './appponent';
import { CustomersComponent } from './customers/customersponent';
@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>
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 ponent.
I created the angular app using cli mand 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.ponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`,
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.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.ponent';
import { CustomersComponent } from './customers/customers.ponent';
@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>
- 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. – JB Nizet Commented Aug 16, 2019 at 16:43
- That doesn't mean anything. You forgot to finish your sentence apparently. – JB Nizet Commented Aug 16, 2019 at 19:44
- @JBNizet I was trying to learn how the angular ponent 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? – yoonvak 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 ponent and replaces the default, static text "Loading" by the dynamic template of the ponent. 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.ponent.html file contain? What do you expect to see, and what do you see instead? – JB Nizet Commented Aug 16, 2019 at 19:53
3 Answers
Reset to default 4You can't have these 2 at the same time
template: `<h1>{{ title }}</h1>`,
templateUrl: './app.ponent.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
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
I had similar issue (i.e blank page). I upgraded my browser and it worked.