I'm new in web development and i am following this tutorial, and up til i before back-end code i tried to build it but there is nothing in the page, i tried ng serve and ng build (then served it to my local IIS). here are the codes
index.html (build)
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="utf-8">
<title>NewApp</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>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>
</html>
app-routing.module.ts
import { NgModule, Component } from "#angular/core";
import { RouterModule,Routes } from '#angular/router';
import {AuthGuard} from './helpers/canActivateAuthGuard';
import { LoginComponent } from './components/login/login.component';
import { LogoutComponent } from './components/login/logout.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { UsersComponent } from './components/users/users.component';
import {AppComponent} from './layout/app.component'
const routes: Routes = [
{path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard]},
{path: 'login', component: LoginComponent},
{path: 'logout', component: LogoutComponent},
{path: 'dashboard', component: DashboardComponent},
{path: 'users', component: UsersComponent},
]
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.module.ts
import {MatButtonModule} from '#angular/material/button';
import {MatCheckboxModule} from '#angular/material/checkbox'
import {MatInputModule} from '#angular/material/input';
import {MatFormFieldModule} from '#angular/material/form-field';
import {MatSidenavModule, MatSidenav} from '#angular/material/sidenav';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule} from '#angular/common/http';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatInputModule,
MatFormFieldModule,
MatSidenavModule,
AppRoutingModule,
HttpClientModule],
})
export class AppModule{}
app.component.html
<div *ngIf="authentication">
<app-head></app-head>
<button type="button" mat-button (click)="drawer.toggle()">
Menu
</button>
<mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="example=sidenav" mode="slide">
<app-left-panel></app-left-panel>
</mat-drawer>
<div>
<router-outlet></router-outlet>
</div>
</mat-drawer-container>
</div>
<div *ngIf="!authentication"><app-login></app-login></div>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'new-app';
}
Your AppComponent is never declared. You are missing the following in the AppModule
#NgModule({
declarations : [AppComponent],
bootstrap: [AppComponent],
imports: [
...
This should have been indicated in your browsers developer tools.
As it was already described here you should add AppComponent to declarations and bootstrap array inside of AppModule
#NgModule({
declarations : [AppComponent],
bootstrap: [AppComponent],
imports: [...]
})
You are also using authentication property inside of *ngIf in app.component.html but this property is not defined inside of app.component.ts
Try to add it to the app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'new-app';
authentication = true;
}
This actually didn't cause any error message in console when I tested it on Stackblitz
It's also described in the tutorial you provided
Basically we will have an authentication property in the component
which will allow us to remove the header and the menu if the user is
not logged in, and instead, show a simple login page.
Related
I am very new in angular and I tried to write project that have two input field.
and I have a problem that I cant see those field on the website but they are clickable and I can write text in them. it happend to me after I added mat-error to those two field.
Someone know what is my problem.
this is my app.component.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yooz application</title>
<link rel="stylesheet" href="app.component.css">
</head>
<body>
<!-- website title -->
<h1 class="title">
Welcome to my Website
</h1>
<form [formGroup]="form">
<mat-form-field class="emailFormField">
<mat-label>Email</mat-label>
<input matInput formControlName="email" type="text" name="none">
<mat-error *ngIf="this.form.controls['email'].hasError('required')">
It is required field
</mat-error>
</mat-form-field>
</form>
<form [formGroup]="form">
<mat-form-field class="passwordFormField">
<mat-label>Password</mat-label>
<input matInput formControlName="password" type="text" name="none">
<mat-error *ngIf="this.form.controls['password'].hasError('required')">
It is required field
</mat-error>
</mat-form-field>
</form>
</body>
</html>
this is my app.component.ts:
import { Component } from '#angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validator,
Validators,
} from '#angular/forms'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'yoozProject';
form: FormGroup;
constructor (private fb: FormBuilder) {
this.form = this.fb.group({
name: new FormControl('', [Validators.required]),
lastName: new FormControl('', [Validators.required]),
});
}
}
and this is my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent} from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {MatInputModule} from '#angular/material/input';
import { MatFormFieldModule } from '#angular/material/form-field';
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatInputModule,
MatFormFieldModule,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Your DevTools console will probably tell you exactly what is wrong. Open your Angular app, press F12 and check out the console tab.
I think the issue is a mismatch in your form. In the HTML your referencing to 'email' and 'password' while in the formbuilder you're using 'name' and 'lastName'.
I am new to Angular, I am trying to define a component and use it in my main page.
The thing is that when using the component in index.html all I can see is my <custom-component></custom-component> empty, nothing inside it.
So what I did is:
in Angular cli: ng generate component custom.
in custom.component.html I have just a text inside paragraph tag.
in index.html I inserted the selector found in custom.component.ts (app-custom) as tag.
in app.module.ts I imported the custom component.
ng serve outputs only app-custom tag without the paragraph tag that should be inside it.
What did I miss?
Update:
Code of my component:
custom.component.html
<p>
component works!
</p>
custom.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-custom',
templateUrl: './custom.component.html',
styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TestApp</title>
<base href="/">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-custom></app-custom>
</body>
</html>
app.module.ts:
import { CustomComponent } from './custom/custom.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { FlexLayoutModule } from '#angular/flex-layout';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
CustomComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
FlexLayoutModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Try to add exports after declarations => [AppComponent, CustomComponent] ? in app.module. Or create a new cli project with the last version
In NgModule.bootstrap, add your own component.
#NgModule({
declarations: [
AppComponent,
CustomComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [
AppComponent,
CustomComponent
]
})
export class AppModule { }
Try this in index.html add the Appcomponent selector tag and inside Appcomponent template refer your custom component selector and don't forgot to import and declare the custom component in app module and bootstrap the Appcomponent so it renders the app component on load which internally refers your custom component. There are many tutorials outside just start with a single component if you are using AngularCli everything is made easy for you.
I have made an Angular4 component and the page that it generates has a button to navigate to another page. I don't get any errors and the pageUrl changes but the content of the page stays the same.
Here is my code:
app.component.ts
import { Component } from '#angular/core';
import { Router } from "#angular/router";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private router: Router){}
username = "";
password = "";
log = function () {
if (this.username != "" && this.password != "") {
console.log(this.username + " " + this.password);
this.router.navigate(['/dashboard']);
}
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
#NgModule({
declarations: [
AppComponent,
DashboardComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{
path: 'dashboard',
component: DashboardComponent
}
]
)
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
}
app.component.html
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<div class="center"><img src="../favicon.png"></div>
<label class="addText"> Username: </label><input [(ngModel)]
="username" class="addText"><br>
<label class="addText"> Password: </label><input [(ngModel)]
="password" type="password" class="addText"><br>
<div class="center"><button (click) ="log()">Log in</button></div>
</div>
</div>
</div>
To achieve what you want, have the app.component only to include the router-outlet:
#Component({
selector: 'app-root',
template: `
<!-- Views go here-->
<router-outlet></router-outlet>
`,
})
export class AppComponent { }
And then have a separate component for each view you want. So in your case you'd want to create a LoginComponent, which would then route to the DashboardComponent from there.
PS Of course this is expandable and you could add a header component tag in the AppComponent html, or whatever else and so on and so on. But just to showcase this simple use case.
you need to specify where to display the DashboardComponent
add this tag to tell angular the location where to display the component results from router
<router-outlet></router-outlet>
I want to run my app instead of http://localhost:4200 at http://localhost:4200/pilot/.
I'm trying to change the base href at index.html but I get Uncaught SyntaxError: Unexpected token <
This is my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrimengQuickstartCli</title>
<base href="pilot/"/>
<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>
And my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { MessagesModule } from 'primeng/primeng';
import { InputTextModule } from 'primeng/primeng';
import { PasswordModule } from 'primeng/primeng';
import { ButtonModule } from 'primeng/primeng';
import { DataTableModule, SharedModule } from 'primeng/primeng';
import { DialogModule } from 'primeng/primeng';
import { CarService } from './service/carservice';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ButtonModule,
MessagesModule,
InputTextModule,
PasswordModule,
ReactiveFormsModule,
DataTableModule,
SharedModule,
DialogModule
],
providers: [CarService],
bootstrap: [AppComponent]
})
export class AppModule { }
Should I change the folder structure?
I appreciate any help.
At the end with this was enough in my index.html:
<base href="/pilot/">
you cam make use of routing module in angular 2 and redirect the user to /pilot when no path is set in the url
SO you will have code like this in app.routing.ts
{path: '',redirectTo: '/pilot',pathMatch: 'full'},
still need to see if this can be done without routing.
I learning how to use angular2 with electron.Currently i am using the the latest angular rc5 and the latest version of electron.I decided to use the official angular tutorial (Tour of heroes). I had no major problems till i got to routing.I had to make some little changes for routing to work eg in index.html instead of using for support with electron i had to use .I am also using webpack and angular2-materialize.
My problem is when i click one of the heroes it shows the error stated in the title, here is a picture :
error image
here is the code for this particular component (dashboard.component)
html (dashboard.component.html): `
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1- 4">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</div>
</div>
`
typescript(dashboard.component.ts):
import {Component, OnInit} from '#angular/core';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Router} from '#angular/router';
#Component({
selector: 'my-dashboard',
templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
constructor(private router: Router,private heroService: HeroService){}
ngOnInit(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
}
gotoDetail (hero: Hero): void
{
let link = ['/detail',hero.id];
this.router.navigate(link);
}
}
app.module.ts :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import {MaterializeDirective} from "angular2-materialize";
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {HeroesComponent} from './heroes.component';
import {routing} from './app.routing';
import {DashboardComponent} from './dashboard.component';
#NgModule({
imports: [
BrowserModule,
FormsModule,
routing,
],
declarations: [
AppComponent,HeroDetailComponent,MaterializeDirective,HeroesComponent,DashboardComponent
],
providers: [HeroService],
bootstrap: [ AppComponent ],
})
export class AppModule { }
index.html:
<html>
<head>
<base href="">
<title>First App</title>
<!--<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link href="../icons/icon.css" rel="stylesheet">
<link href="../node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet" />
<link href="../css/styles.css" rel="stylesheet">
</head>
<body>
<myapp></myapp>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
</body>
main.ts:
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.routing.ts:
import {ModuleWithProviders} from '#angular/core';
import {Routes, RouterModule} from '#angular/router';
import {HeroesComponent} from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';
const appRoutes: Routes = [
{
path: 'heroes',
component: HeroesComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'detail/:id',
component:'HeroDetailComponent'
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'myapp',
template: `
<nav>
<div class="nav-wrapper">
{{title}}
<ul id="nav-mobile" class="left">
<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {
title = 'Tour of Heroes';
}
hero-detail.component.ts :
import {Component, Input, OnInit} from '#angular/core';
import {ActivatedRoute, Params} from '#angular/router';
import {HeroService} from './hero.service';
import {Hero} from './hero';
#Component({
selector: 'my-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent implements OnInit {
#Input()
hero: Hero;
constructor(private heroService: HeroService, private route: ActivatedRoute)
{
}
ngOnInit(): void
{
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
});
}
goBack(): void {
window.history.back();
}
}
hero-detail.component.html
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
<button (click)="goBack()">Back</button>
</div>
Thank You
You should be have your component name without '(single quote) in component option of route. As you already have imported HeroDetailComponent there in app.routing.ts(rotue configuration).
{
path: 'detail/:id',
component: HeroDetailComponent //<-- removed quote from here
}
I observed that you are having file protocol while asking for template, it means you haven't hosted your application on server.
Please host your application on server(lite server would also work), so that template would ask
over http protocol instead of file.