add untracked files

README.md

@@ -1,28 +1,7 @@
-# Ang4Seo
+# Angular 4+ SEO Starter Template
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.3.
+This project is based on the [Angular SEO Tutorial](https://coursetro.com/posts/code/68/Make-your-Angular-App-SEO-Friendly-(Angular-4-+-Universal)) found at [Coursetro.com](https://coursetro.com)
 
-## Development server
+Feel free to clone this repo as a quick way to get up and running with an SEO-ready, Angular CLI-ready, Angular 4+ project.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Simply clone the repo, run `npm install` in the project directory, then `npm run start`

package.json

@@ -3,22 +3,20 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "prestart": "ng build --prod && ngc",
+    "start": "ts-node src/server.ts"
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^4.1.3",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/platform-server": "^4.1.3",
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",

src/app/about/about.component.html

@@ -0,0 +1 @@
+<p>And this is my lovely description that I want the Google to see!</p>

src/app/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/about/about.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor(meta: Meta, title: Title) { 
+
+    title.setTitle('My about page');
+
+    meta.addTags([ 
+      {
+        name: 'author', content: 'Gary Simon'
+      },
+      {
+        name: 'keywords', content: 'kws'
+      },
+      {
+        name: 'description', content: 'aaaaaaaaaaaaaaaaaaaaaa.'
+      },
+    ])
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -1,10 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AboutComponent } from './about/about.component';
+import { HomeComponent } from './home/home.component';
 
 const routes: Routes = [
   {
     path: '',
-    children: []
+    component: HomeComponent
+  },
+  {
+    path: 'about',
+    component: AboutComponent
   }
 ];
 

src/app/app.component.html

@@ -1,4 +1,6 @@
-<h1>
-  {{title}}
-</h1>
+<ul>
+  <li><a routerLink="/">Home</a></li>
+  <li><a routerLink="about">About</a></li>
+</ul>
+
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -5,13 +5,17 @@ import { HttpModule } from '@angular/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { AboutComponent } from './about/about.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    AboutComponent
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({appId: 'ang4-seo'}),
     FormsModule,
     HttpModule,
     AppRoutingModule

src/app/app.server.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+imports: [
+    ServerModule,
+    AppModule
+],
+bootstrap: [AppComponent]
+})
+export class AppServerModule { }

src/app/home/home.component.html

@@ -0,0 +1,3 @@
+<p>
+  home works!
+</p>

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor(meta: Meta, title: Title) { 
+
+    title.setTitle('My Spiffy Home Page');
+
+    meta.addTags([ 
+      {
+        name: 'author', content: 'Coursetro.com'
+      },
+      {
+        name: 'keywords', content: 'angular 4 tutorial, angular seo'
+      },
+      {
+        name: 'description', content: 'This is my great description.'
+      },
+    ])
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/server.ts

@@ -0,0 +1,36 @@
+import 'reflect-metadata';
+import 'zone.js/dist/zone-node';
+import { platformServer, renderModuleFactory } from '@angular/platform-server'
+import { enableProdMode } from '@angular/core'
+import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
+import * as express from 'express';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const PORT = 4000;
+
+enableProdMode();
+
+const app = express();
+
+let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
+
+app.engine('html', (_, options, callback) => {
+  const opts = { document: template, url: options.req.url };
+
+  renderModuleFactory(AppServerModuleNgFactory, opts)
+    .then(html => callback(null, html));
+});
+
+app.set('view engine', 'html');
+app.set('views', 'src')
+
+app.get('*.*', express.static(join(__dirname, '..', 'dist')));
+
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+app.listen(PORT, () => {
+  console.log(`listening on http://localhost:${PORT}!`);
+});

src/tsconfig.app.json

@@ -7,6 +7,7 @@
     "types": []
   },
   "exclude": [
+    "server.ts",
     "test.ts",
     "**/*.spec.ts"
   ]

tsconfig.json

@@ -16,5 +16,9 @@
       "es2016",
       "dom"
     ]
-  }
+  },
+  "angularCompilerOptions": {                         
+      "genDir": "./dist/ngfactory",
+      "entryModule": "./src/app/app.module#AppModule"
+  }  
 }