fix(client): fix bad paths in prerender and ssr - still not working with angular-universal

Author: Ks89

package-lock.json

@@ -31,9 +31,9 @@
     "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
     "serve:ssr": "node dist/server",
     "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
-    "serve:prerender": "cd dist/angular-cli-skeleton && http-server",
+    "serve:prerender": "cd dist/client && http-server",
     "generate:prerender": "cd dist && node prerender",
-    "build:client-and-server-bundles": "ng build --prod --aot && ng run angular-cli-skeleton:server:production",
+    "build:client-and-server-bundles": "ng build --prod --aot && ng run client:server:production",
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
     "clean": "npm cache clean --force && npm run clean:dist && npm run clean:sonar && npm run clean:coverage && npm run clean:docs",
     "clean:dist": "rimraf dist",
@@ -82,46 +82,47 @@
     "@angular/platform-browser": "^9.0.0-rc.0",
     "@angular/platform-browser-dynamic": "^9.0.0-rc.0",
     "@angular/platform-server": "^9.0.0-rc.0",
-    "@angular/pwa": "^0.803.17",
+    "@angular/pwa": "^0.803.18",
     "@angular/router": "^9.0.0-rc.0",
     "@angular/service-worker": "^9.0.0-rc.0",
+    "@fortawesome/angular-fontawesome": "^0.5.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@ng-bootstrap/ng-bootstrap": "^5.1.2",
-    "@ngrx/store": "^8.4.0",
+    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
+    "@ngrx/store": "^8.5.0",
     "@nguniversal/express-engine": "^8.1.1",
     "@nguniversal/module-map-ngfactory-loader": "^8.1.1",
     "bootstrap": "^4.1.3",
     "compression": "^1.7.4",
-    "core-js": "^3.3.6",
+    "core-js": "^3.4.0",
     "domino": "^2.1.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
-    "ngx-toastr": "^11.2.0",
+    "ngx-toastr": "^11.2.1",
     "popper.js": "^1.16.0",
     "reflect-metadata": "^0.1.12",
     "rxjs": "^6.5.3",
     "tslib": "^1.10.0",
     "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.0-rc.0",
+    "@angular-devkit/build-angular": "^0.900.0-rc.1",
     "@angular/cli": "^9.0.0-rc.0",
     "@angular/compiler-cli": "^9.0.0-rc.0",
     "@angular/language-service": "^9.0.0-rc.0",
     "@angularclass/hmr": "^2.1.3",
     "@compodoc/compodoc": "^1.1.11",
-    "@ngrx/store-devtools": "^8.4.0",
+    "@ngrx/store-devtools": "^8.5.0",
     "@types/hammerjs": "^2.0.36",
     "@types/jasmine": "^3.4.5",
     "@types/jasminewd2": "^2.0.8",
     "@types/jquery": "^3.3.31",
-    "@types/node": "^12.12.6",
+    "@types/node": "^12.12.7",
     "codelyzer": "^5.2.0",
     "coveralls": "^3.0.7",
     "cross-env": "^6.0.3",
-    "husky": "^1.2.0",
+    "husky": "^3.0.9",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.4.1",
@@ -132,7 +133,7 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-mocha-reporter": "^2.2.5",
-    "prettier": "=1.14.3",
+    "prettier": "^1.19.1",
     "pretty-quick": "=1.8.0",
     "protractor": "~5.4.0",
     "rimraf": "^3.0.0",

package.json

@@ -41,7 +41,7 @@ const domino = require('domino');
 enableProdMode();
 
 // Load the index.html file containing referances to your application bundle.
-const index = readFileSync(join('angular-cli-skeleton', 'index.html'), 'utf8');
+const index = readFileSync(join('client', 'index.html'), 'utf8');
 const win = domino.createWindow(index);
 
 global['window'] = win;
@@ -60,10 +60,10 @@ global['Mousetrap'] = function() {
   this.reset = function() {};
 };
 
-const BROWSER_FOLDER = join(process.cwd(), 'angular-cli-skeletons');
+const BROWSER_FOLDER = join(process.cwd(), 'client');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/angular-cli-skeleton-server/main');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/client-server/main');
 
 import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 

prerender.ts

@@ -1,7 +1,7 @@
 /*
  * MIT License
  *
- * Copyright (c) 2017-2018 Stefano Cappa
+ * Copyright (c) 2017-2019 Stefano Cappa
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal
@@ -40,7 +40,7 @@ const domino = require('domino');
 enableProdMode();
 
 // Our index.html we'll use as our template
-const template = readFileSync(join(process.cwd(), 'dist', 'angular-cli-skeleton', 'index.html')).toString();
+const template = readFileSync(join(process.cwd(), 'dist', 'client', 'index.html')).toString();
 const win = domino.createWindow(template);
 
 global['window'] = win;
@@ -61,10 +61,10 @@ global['Mousetrap'] = function() {
 };
 
 const PORT = process.env.PORT || 3000;
-const DIST_FOLDER = join(process.cwd(), 'dist', 'angular-cli-skeleton');
+const DIST_FOLDER = join(process.cwd(), 'dist', 'client');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/angular-cli-skeleton-server/main');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/client-server/main');
 
 import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 

server.ts

@@ -13,13 +13,7 @@ import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { ROOT_REDUCERS, metaReducers } from './reducers';
 
-// ************************ optional font-awesome 5 ************************
-// to install use both `npm i --save @fortawesome/fontawesome-svg-core` and `npm i --save @fortawesome/free-solid-svg-icons`
-import { library, dom } from '@fortawesome/fontawesome-svg-core';
-import { faExternalLinkAlt, faPlus, faTimes, faDownload } from '@fortawesome/free-solid-svg-icons';
-library.add(faExternalLinkAlt, faPlus, faTimes, faDownload);
-dom.watch(); // Kicks off the process of finding <i> tags and replacing with <svg>
-// *************************************************************************
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { environment } from '../environments/environment';
 
@@ -39,7 +33,7 @@ import { AppComponent } from './app.component';
     BrowserAnimationsModule,
 
     HttpClientModule,
-    HttpClientXsrfModule.withOptions(),
+    HttpClientXsrfModule,
 
     FormsModule,
     ReactiveFormsModule,
@@ -48,6 +42,8 @@ import { AppComponent } from './app.component';
     NgbModule,
     ToastrModule.forRoot(), // ToastrModule added
 
+    FontAwesomeModule,
+
     // if you enabled service workers inside .angular-cli.json,
     // I suggest to use it, only for the production build
     // TO TEST SERVICE WORKERS IN YOUR BROWSER YOU MUST:

src/app/app.module.ts

@@ -37,7 +37,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { StoreModule } from '@ngrx/store';
 import { reducers } from './reducers';
-import { mainReducers } from '../../reducers';
+import { metaReducers } from '../../reducers';
 import { GithubOrg, GithubService, GithubUser } from '../../core/services/github.service';
 import { ExampleService, MessageResponse } from '../../core/services/example.service';
 
@@ -49,7 +49,7 @@ describe('LazyComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [NgbModule, SharedModule, CoreModule, HttpClientTestingModule,
-        StoreModule.forRoot(mainReducers, {reducerFactory: undefined}), StoreModule.forFeature('pageNum', reducers)],
+        StoreModule.forRoot(metaReducers, {reducerFactory: undefined}), StoreModule.forFeature('pageNum', reducers)],
       declarations: [LazyComponent]
     }).overrideComponent(LazyComponent, {
       set: {

src/app/pages/lazy/lazy.component.spec.ts

@@ -30,6 +30,7 @@ import { Observable, Subscription, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
 import { ToastrService } from 'ngx-toastr';
+import { faAddressBook } from '@fortawesome/free-solid-svg-icons';
 
 import { Store, select } from '@ngrx/store';
 import { sayByeBye, sayHello } from '../../core/actions/hello-example.actions';
@@ -64,6 +65,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
   helloExample$: Observable<string>;
   elementsObs: Observable<any> = of(this.elements).pipe(delay(1000));
 
+  faAddressBook = faAddressBook;
+
   // TODO Socket.io integration is working for client side rendering (both dev and prod),
   // but when you switch to SSR there are some problems, so I decided to remove it
   // I'll restore these features in future releases

src/app/pages/profile/profile.component.ts

@@ -39,7 +39,7 @@
     <br>
 
     <div class="row">
-      <span>FontAwesome 5 example:   <i class="fas fa-address-book fa-3x"></i></span>
+      <span>FontAwesome 5 example:   <fa-icon [icon]="faAddressBook"></fa-icon></span>
     </div>
     <br>
     <br>

src/app/pages/profile/profile.html

@@ -15,7 +15,7 @@
 
   <base href="/">
 
-  <link rel="manifest" href="src/manifest.webmanifest">
+  <link rel="manifest" href="manifest.webmanifest">
   <meta name="theme-color" content="#252525">
 
   <style>