Feature: Use @ngtools for build & scss (#279)

* wip

* aot/jit client and jit universal working

* wip

* add server only commands

* set to work in all modes

* cleanup

* improve sass config

* update yarn and bump version

Author: qdouble

constants.d.ts

@@ -22,9 +22,7 @@ export declare const MY_VENDOR_DLLS: any[];
 export declare const MY_CLIENT_PLUGINS: any[];
 export declare const MY_CLIENT_PRODUCTION_PLUGINS: any[];
 export declare const MY_CLIENT_RULES: any[];
-export declare const MY_SERVER_RULES: any[];
 export declare const MY_TEST_PLUGINS: any[];
 export declare const MY_TEST_RULES: any[];
-export declare const MY_SERVER_INCLUDE_CLIENT_PACKAGES: any[];
 
 export declare const EXCLUDE_SOURCE_MAPS: any[];

constants.js

@@ -82,18 +82,10 @@ exports.MY_CLIENT_RULES = [
   // use this to import your own rules for Client webpack config.
 ]
 
-exports.MY_SERVER_RULES = [
-  // use this to import your own rules for Universal Server webpack config.
-]
-
 exports.MY_TEST_RULES = [
   // use this to import your own rules for Test webpack config.
 ]
 
 exports.MY_TEST_PLUGINS = [
   // use this to import your own Test webpack config plugins.
 ]
-
-exports.MY_SERVER_INCLUDE_CLIENT_PACKAGES = [
-  // include these client packages so we can transform their source with webpack loaders
-]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-webpack2-starter",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Angular and Webpack 2 Starter",
   "author": "Qdouble <[email protected]>",
   "repository": {
@@ -13,18 +13,18 @@
     "webdev": "webpack-dev-server",
     "webdev:hmr": "npm run webdev -- --inline --hot",
     "webpack": "webpack",
-    "ngc": "./node_modules/.bin/ngc -p tsconfig.aot.json",
+    "ngc": "./node_modules/.bin/ngc -p src/tsconfig.server.aot.json",
     "webdriver-manager": "webdriver-manager",
     "webdriver:update": "npm run webdriver-manager update",
     "webdriver:start": "npm run webdriver-manager start",
     "protractor": "protractor",
     "pree2e:only": "npm run webdriver:update -- --standalone",
     "e2e": "npm run sass && npm-run-all -p -r e2e:server e2e:only",
     "e2e:testall": "npm run e2e:jit && npm run e2e:aot && npm run e2e:universal && npm run e2e:universal:aot",
-    "e2e:aot": "npm run compile:e2e && npm run e2e",
+    "e2e:aot": "npm run build:aot:prod:e2e && npm run e2e",
     "e2e:jit": "npm run build:prod:e2e && npm run e2e",
     "e2e:universal": "npm run build:universal:prod:e2e && npm-run-all -p -r server:universal e2e:only:universal",
-    "e2e:universal:aot": "npm run compile:universal:e2e && npm-run-all -p -r server:universal e2e:only:universal",
+    "e2e:universal:aot": "npm run build:universal:aot:e2e && npm-run-all -p -r server:universal e2e:only:universal",
     "e2e:only:universal": "npm run protractor -- --universal",
     "e2e:only": "npm run protractor",
     "e2e:live": "npm run e2e -- --elementExplorer",
@@ -43,21 +43,13 @@
     "clean:dist": "npm run rimraf -- dist .awcache",
     "clean:dll": "npm run rimraf -- dll",
     "clean:compile": "npm run rimraf -- \"compiled\" ",
-    "compile": "npm run compile:aot",
-    "compile:aot": "npm run sass && npm run clean:compile && npm run ngc && npm run build:aot",
-    "compile:e2e": "npm run sass && npm run clean:compile && npm run ngc && npm run build:aot:prod:e2e",
-    "compile:universal": "npm run sass && npm run clean:compile && npm run ngc && npm run build:universal:aot",
-    "compile:universal:e2e": "npm run sass && npm run clean:compile && npm run ngc && npm run build:universal:aot:prod:e2e",
-    "compile:dev": "npm run sass && npm run clean:compile && npm run ngc && npm run build:aot:dev",
-    "compile:only": "npm run clean:compile && npm run sass && npm run ngc",
-    "compile:watch": "watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only",
     "prodserver": "node prodserver",
-    "sass": "node-sass src -o src --include-path node_modules --output-style compressed -q",
+    "sass": "node-sass \"src/app/styles.scss\" \"src/app/styles.css\" \"src/app/main.scss\" \"src/app/main.css\" --include-path node_modules --output-style compressed -q",
     "sass:watch": "node-sass -w src -o src --include-path node_modules --output-style compressed -q",
     "start": "npm run server:dev",
     "start:hmr": "npm run server:hmr",
     "serve80": "sudo PORT=80 node prodserver",
-    "server:dev": "npm-run-all -p -r webdev sass:watch",
+    "server:dev": "npm run webdev",
     "server:hmr": "npm-run-all -p -r webdev:hmr sass:watch",
     "server:prod": "npm-run-all -p -r watch:prod prodserver",
     "server:prod80": "npm-run-all -p -r serve80 watch:prod",
@@ -68,24 +60,30 @@
     "build:aot:prod": "npm run clean:dist && npm run sass && webpack",
     "build:aot:prod:e2e": "npm run clean:dist && npm run sass && webpack",
     "build:aot:dev": "npm run clean:dist && npm run sass && webpack",
-    "build:dev": "npm run clean:dist && npm run sass && webpack",
+    "build:dev": "npm run clean:dist && webpack",
     "build:dll": "npm run clean:dll && npm run sass && webpack",
     "build:prod": "npm run clean:dist && npm run sass && webpack",
     "build:prod:e2e": "npm run clean:dist && npm run sass && webpack",
+    "build:server": "npm run build:server:prod",
+    "build:server:aot": "npm run build:server:aot:prod",
+    "build:server:aot:dev": "npm run sass && webpack",
+    "build:server:aot:prod": "npm run sass && webpack",
+    "build:server:aot:prod:e2e": "npm run sass && webpack",
+    "build:server:dev": "npm run clean:dist && npm run sass && webpack",
+    "build:server:prod": "npm run clean:dist && npm run sass && webpack",
     "build:universal": "npm run build:universal:prod",
-    "build:universal:aot": "npm run build:universal:aot:prod",
-    "build:universal:aot:dev": "npm run clean:dist && npm run sass && webpack",
-    "build:universal:aot:prod": "npm run clean:dist && npm run sass && webpack",
-    "build:universal:aot:prod:e2e": "npm run clean:dist && npm run sass && webpack",
+    "build:universal:aot": "npm-run-all -p build:aot build:server:aot",
+    "build:universal:aot:dev": "npm-run-all -p build:aot:dev build:server:aot:dev",
+    "build:universal:aot:e2e": "npm-run-all -p build:aot:prod:e2e build:server:aot:prod:e2e",
     "build:universal:dev": "npm run clean:dist && npm run sass && webpack",
     "build:universal:prod": "npm run clean:dist && npm run sass && webpack",
     "build:universal:prod:e2e": "npm run clean:dist && npm run sass && webpack",
     "watch": "npm run watch:dev",
+    "watch:aot": "npm-run-all -p -r \"build:aot:dev -- --watch\" sass:watch",
     "watch:dev": "npm-run-all -p -r \"build:dev -- --watch\" sass:watch",
-    "watch:prod": "npm-run-all -p -r \"build:prod -- --watch\" sass:watch",
     "watch:universal": "npm-run-all -p -r \"build:universal -- --watch\" sass:watch",
     "universal": "npm run build:universal && npm run server:universal",
-    "universal:aot": "npm run compile:universal && npm run server:universal",
+    "universal:aot": "npm run build:universal:aot && npm run server:universal",
     "universal:watch": "npm run build:universal && npm-run-all -p -r watch:universal server:universal"
   },
   "dependencies": {
@@ -171,6 +169,7 @@
     "protractor": "~4.0.8",
     "raw-loader": "~0.5.1",
     "rimraf": "~2.6.1",
+    "sass-loader": "^6.0.5",
     "source-map-loader": "~0.2.1",
     "string-replace-loader": "~1.2.0",
     "to-string-loader": "~1.1.5",

src/app/app-nav-views.ts

@@ -8,11 +8,6 @@ export const views: Object[] = [
     name: 'Lazy',
     icon: 'file_download',
     link: ['lazy']
-  },
-    {
-    name: 'Sync',
-    icon: 'done',
-    link: ['sync']
   },
   {
     name: 'Bad Link',

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TransferState } from '../modules/transfer-state/transfer-state';
 
@@ -7,8 +7,9 @@ import { MOBILE } from './services/constants';
 
 @Component({
   selector: 'my-app',
-  styleUrls: ['./app.component.css'],
-  templateUrl: './app.component.html'
+  styleUrls: ['main.scss', './app.component.scss'],
+  templateUrl: './app.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
   showMonitor = (ENV === 'development' && !AOT &&

src/app/app.imports.ts

@@ -10,7 +10,6 @@ import { useLogMonitor } from '@ngrx/store-log-monitor';
 
 import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
 
-import { routes } from './app.routing';
 import { rootReducer } from './reducers';
 import { StoreDevToolsModule } from './features/store-devtools.module';
 import { UserEffects } from './user/user.effects';
@@ -31,7 +30,6 @@ export const APP_IMPORTS = [
   EffectsModule.run(UserEffects),
   // MaterialModule,
   ReactiveFormsModule,
-  RouterModule.forRoot(routes, { useHash: false, preloadingStrategy: PreloadAllModules }),
   RouterStoreModule.connectRouter(),
   StoreModule.provideStore(rootReducer),
   STORE_DEV_TOOLS_IMPORTS,

src/app/app.module.ts

@@ -7,9 +7,10 @@
  */
 
 import { ApplicationRef, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
+import { RouterModule, PreloadAllModules } from '@angular/router';
 
 import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
 
@@ -24,7 +25,10 @@ import { APP_ENTRY_COMPONENTS } from './app.entry-components';
 import { APP_IMPORTS } from './app.imports';
 import { APP_PROVIDERS } from './app.providers';
 
+import { routes } from './app.routing';
+
 import { AppComponent } from './app.component';
+import { DashboardComponent } from './features/dashboard.component';
 
 import { AppState } from './reducers';
 
@@ -35,12 +39,14 @@ import { AppState } from './reducers';
   ],
   entryComponents: [APP_ENTRY_COMPONENTS],
   imports: [
-    APP_IMPORTS,
-    BrowserModule,
+    CommonModule,
     DEV_SERVER ? [BrowserAnimationsModule, BrowserTransferStateModule] : [],
     HttpModule,
+    APP_IMPORTS,
+    RouterModule.forRoot(routes, { useHash: false, preloadingStrategy: PreloadAllModules }),
   ],
   bootstrap: [AppComponent],
+  exports: [AppComponent],
   providers: [APP_PROVIDERS]
 })
 

src/app/app.routing.ts

@@ -7,6 +7,5 @@ import { NotFound404Component } from './not-found404.component';
 export const routes: Routes = [
   { path: '', component: DashboardComponent, pathMatch: 'full' },
   { path: 'lazy', loadChildren: './features/lazy/index#LazyModule' },
-  { path: 'sync', loadChildren: './features/sync/index#SyncModule?sync=true' },
   { path: '**', component: NotFound404Component }
 ];

src/app/features/sync/index.ts

@@ -1,3 +1,2 @@
-/* main.css will be extracted to main dist folder and is imported in index.html */
 /* This file is for setting global styles  */
 @import 'variables';

src/app/features/sync/sync.component.html

@@ -10,7 +10,6 @@
 	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
 	<link rel="stylesheet" href="styles.css" />
-	<link rel="stylesheet" href="main.css" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 	<style>#str-dlls { display: none }</style>
 </head>

src/app/features/sync/sync.component.ts

@@ -6,7 +6,7 @@ import './rxjs.imports';
 import * as express from 'express';
 import * as path from 'path';
 import { platformServer, renderModuleFactory } from '@angular/platform-server';
-import { ServerAppModuleNgFactory } from '../compiled/src/app/server.app.module.ngfactory';
+import { ServerAppModuleNgFactory } from './ngfactory/app/server.app.module.ngfactory';
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import { routes } from './server.routes';
 import { App } from './mock-api/app';

src/app/features/sync/sync.routing.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.webpack.json",
+  "angularCompilerOptions": {
+    "entryModule": "./app/browser.app.module#BrowserAppModule"
+  },
+  "exclude": [
+    "./server.aot.ts"
+  ]
+}

src/app/main.scss

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.server.json",
+  "angularCompilerOptions": {
+    "genDir": "ngfactory",
+    "entryModule": "./app/server.app.module#ServerAppModule"
+  },
+  "exclude": []
+}

src/index.html

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.webpack.json",
+  "angularCompilerOptions": {
+    "entryModule": "./app/server.app.module#ServerAppModule"
+  },
+  "exclude": [
+    "./server.aot.ts"
+  ]
+}