Skip to content

Instantly share code, notes, and snippets.

import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule.withServerTransition({appId: 'app-root'}),
AppModule,
]
curl localhost:4200
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularSeo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
import { Component } from '@angular/core';
@Component({
selector: 'app-menu',
template: `
<ul>
<li><a routerLink="firstComponent">First component</a></li>
<li><a routerLink="secondComponent">Second component</a></li>
</ul>
`,
styles: [`
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
@NgModule({
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: '/firstComponent', pathMatch: 'full' },
{ path: 'firstComponent', component: FirstComponent },
{ path: 'secondComponent', component: SecondComponent }
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { MenuComponent } from './menu/menu.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class EchoService {
constructor(private httpClient: HttpClient) {}
public makeCall(): Observable<any> {
return this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/1');
import { Component, OnInit } from '@angular/core';
import { EchoService } from '../echo.service';
import { Observable } from 'rxjs';
@Component({
templateUrl: `second.component.html`,
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
public response: Observable<any>;
constructor(private echoService: EchoService) {}
body {
margin: 0 auto;
max-width: 1000px;
background: url('assets/img/sandbox.png') no-repeat center;
display: flex;
flex-direction: column;
height: 100%;
font-family: 'Source Sans Pro', calibri, Arial, sans-serif !important;
min-height: 550px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularSeo</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>
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "app",
data: () => {
return {