From a019c9b9f01c22e66e1b75538bb6f39991ad698c Mon Sep 17 00:00:00 2001 From: Bill Date: Sat, 19 May 2018 09:56:10 -0700 Subject: [PATCH 01/48] feat(rxjs6): added modifications to support updates to ngx-bootstrap and get translation functioning with RXJS 6. --- ClientApp/app/app.component.ts | 20 +++++---- ClientApp/app/app.module.ts | 4 +- ClientApp/app/shared/user.service.ts | 4 +- ClientApp/polyfills/polyfills.ts | 9 +--- ClientApp/polyfills/rx-imports.ts | 30 ------------- package.json | 67 ++++++++++++++-------------- 6 files changed, 50 insertions(+), 84 deletions(-) delete mode 100644 ClientApp/polyfills/rx-imports.ts diff --git a/ClientApp/app/app.component.ts b/ClientApp/app/app.component.ts index d8b28150..614cba3e 100644 --- a/ClientApp/app/app.component.ts +++ b/ClientApp/app/app.component.ts @@ -1,7 +1,9 @@ -import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, Injector } from '@angular/core'; + +import {mergeMap, map, filter} from 'rxjs/operators'; +import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, Injector } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router'; import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser'; -import { Subscription } from 'rxjs/Subscription'; +import { Subscription } from 'rxjs'; import { isPlatformServer } from '@angular/common'; import { LinkService } from './shared/link.service'; @@ -60,15 +62,15 @@ export class AppComponent implements OnInit, OnDestroy { private _changeTitleOnNavigation() { - this.routerSub$ = this.router.events - .filter(event => event instanceof NavigationEnd) - .map(() => this.activatedRoute) - .map(route => { + this.routerSub$ = this.router.events.pipe( + filter(event => event instanceof NavigationEnd), + map(() => this.activatedRoute), + map(route => { while (route.firstChild) route = route.firstChild; return route; - }) - .filter(route => route.outlet === 'primary') - .mergeMap(route => route.data) + }), + filter(route => route.outlet === 'primary'), + mergeMap(route => route.data),) .subscribe((event) => { this._setMetaAndLinks(event); }); diff --git a/ClientApp/app/app.module.ts b/ClientApp/app/app.module.ts index 5394d67d..c0fa0985 100644 --- a/ClientApp/app/app.module.ts +++ b/ClientApp/app/app.module.ts @@ -7,7 +7,7 @@ import { FormsModule } from '@angular/forms'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { TransferHttpCacheModule } from '@nguniversal/common'; -import { Ng2BootstrapModule } from 'ngx-bootstrap'; +import { AccordionModule } from 'ngx-bootstrap'; // i18n support import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; @@ -57,7 +57,7 @@ export function createTranslateLoader(http: HttpClient, baseHref) { FormsModule, - Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported + AccordionModule.forRoot(), // You could also split this up if you don't want the Entire Module imported // i18n support TranslateModule.forRoot({ diff --git a/ClientApp/app/shared/user.service.ts b/ClientApp/app/shared/user.service.ts index 6a3d7cb7..31110e7e 100644 --- a/ClientApp/app/shared/user.service.ts +++ b/ClientApp/app/shared/user.service.ts @@ -1,10 +1,10 @@ -import { Injectable, Inject, Injector } from '@angular/core'; +import { Injectable, Inject, Injector } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Http, URLSearchParams } from '@angular/http'; import { APP_BASE_HREF } from '@angular/common'; import { ORIGIN_URL } from '@nguniversal/aspnetcore-engine/tokens'; import { IUser } from '../models/User'; -import { Observable } from 'rxjs/Observable'; +import { Observable } from 'rxjs'; @Injectable() diff --git a/ClientApp/polyfills/polyfills.ts b/ClientApp/polyfills/polyfills.ts index 4382a0e1..fd43e294 100644 --- a/ClientApp/polyfills/polyfills.ts +++ b/ClientApp/polyfills/polyfills.ts @@ -1,4 +1,4 @@ - + /*************************************************************************************************** * BROWSER POLYFILLS */ @@ -28,10 +28,3 @@ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; -/** - * Date, currency, decimal and percent pipes. - * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 - */ -// import 'intl'; // Run `npm install --save intl`. - -import './rx-imports'; diff --git a/ClientApp/polyfills/rx-imports.ts b/ClientApp/polyfills/rx-imports.ts deleted file mode 100644 index 506f102b..00000000 --- a/ClientApp/polyfills/rx-imports.ts +++ /dev/null @@ -1,30 +0,0 @@ - -/* -=- RxJs imports -=- - * - * Here you can place any RxJs imports so you don't have to constantly - * import them throughout your App :) - * - * This file is automatically imported into `polyfills.ts` (which is imported into browser/server modules) - */ - -// General Operators -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/do'; -import 'rxjs/add/operator/throttleTime'; -import 'rxjs/add/operator/distinctUntilChanged'; -import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/take'; -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/operator/filter'; -import 'rxjs/add/operator/mergeMap'; -import 'rxjs/add/operator/concat'; -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/first'; - -// Observable operators -import 'rxjs/add/observable/fromEvent'; -import 'rxjs/add/observable/interval'; -import 'rxjs/add/observable/fromPromise'; -import 'rxjs/add/observable/of'; -import 'rxjs/add/observable/concat'; - diff --git a/package.json b/package.json index 86dacd20..848a12a2 100644 --- a/package.json +++ b/package.json @@ -28,65 +28,66 @@ "@angular/router": "^5.0.0", "@nguniversal/aspnetcore-engine": "^5.0.0-beta.8", "@nguniversal/common": "^5.0.0-beta.8", - "@ngx-translate/core": "^8.0.0", - "@ngx-translate/http-loader": "^2.0.0", + "@ngx-translate/core": "^9.1.1", + "@ngx-translate/http-loader": "^2.0.1", "@types/node": "^7.0.12", "angular2-router-loader": "^0.3.5", "angular2-template-loader": "^0.6.2", "aspnet-prerendering": "^3.0.1", - "aspnet-webpack": "^2.0.1", - "awesome-typescript-loader": "^3.0.0", - "bootstrap": "^3.3.7", + "aspnet-webpack": "^2.0.3", + "awesome-typescript-loader": "^3.2.3", + "bootstrap": "^4.1.1", "bootstrap-sass": "^3.3.7", - "core-js": "^2.5.1", - "css": "^2.2.1", - "css-loader": "^0.28.7", - "event-source-polyfill": "^0.0.9", - "expose-loader": "^0.7.3", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^0.11.2", - "html-loader": "^0.5.1", + "core-js": "^2.5.6", + "css": "^2.2.3", + "css-loader": "^0.28.11", + "event-source-polyfill": "^0.0.12", + "expose-loader": "^0.7.5", + "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^1.1.11", + "html-loader": "^0.5.5", "isomorphic-fetch": "^2.2.1", - "jquery": "^2.2.1", - "json-loader": "^0.5.4", + "jquery": "^3.3.1", + "json-loader": "^0.5.7", "moment": "2.18.1", - "ngx-bootstrap": "2.0.0-beta.6", - "node-sass": "^4.5.2", + "ngx-bootstrap": "2.0.5", + "node-sass": "^4.9.0", "preboot": "^5.0.0", "raw-loader": "^0.5.1", "rimraf": "^2.6.2", - "rxjs": "^5.5.6", + "rxjs": "^6.1.0", + "rxjs-compat": "^6.1.0", "sass-loader": "^6.0.6", "style-loader": "^0.18.2", "to-string-loader": "^1.1.5", - "typescript": "~2.5.0", - "url-loader": "^0.5.7", + "typescript": "~2.7.2", + "url-loader": "^1.0.1", "webpack": "^3.6.0", - "webpack-hot-middleware": "^2.19.1", + "webpack-hot-middleware": "^2.22.1", "webpack-merge": "^4.1.0", - "zone.js": "^0.8.17" + "zone.js": "^0.8.26" }, "devDependencies": { "@angular/cli": "^1.7.0-beta.1", "@angular/compiler-cli": "^5.2.1", "@ngtools/webpack": "^1.9.0", - "@types/chai": "^3.4.34", - "@types/jasmine": "^2.5.37", - "chai": "^3.5.0", - "codelyzer": "^3.0.0", - "istanbul-instrumenter-loader": "^3.0.0", + "@types/chai": "^4.1.3", + "@types/jasmine": "^2.8.7", + "chai": "^4.1.2", + "codelyzer": "^3.1.2", + "istanbul-instrumenter-loader": "^3.0.1", "jasmine-core": "^2.5.2", "karma": "^1.7.1", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^2.2.0", "karma-coverage": "^1.1.1", - "karma-jasmine": "^1.1.0", - "karma-mocha-reporter": "^2.2.4", + "karma-jasmine": "^1.1.2", + "karma-mocha-reporter": "^2.2.5", "karma-phantomjs-launcher": "^1.0.4", - "karma-remap-coverage": "^0.1.4", + "karma-remap-coverage": "^0.1.5", "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.3", - "tslint": "^5.7.0", - "webpack-bundle-analyzer": "^2.9.0" + "karma-webpack": "^2.0.4", + "tslint": "^5.10.0", + "webpack-bundle-analyzer": "^2.12.0" } } From 0360ad5a8ef1830dd88d6c76aceae4a0f1879bf3 Mon Sep 17 00:00:00 2001 From: Robert Zeni Date: Mon, 28 May 2018 13:40:45 -0400 Subject: [PATCH 02/48] feat(angular6): upgrade .net core 2.1, bootstrap 4, ngx-bootsrap 3, rxjs 6, etc closes #619 --- .vscode/launch.json | 6 +- Asp2017.csproj | 12 ++-- Asp2017.sln | 25 ++++++++ ClientApp/app/app.module.browser.ts | 4 +- ClientApp/app/app.module.server.ts | 4 +- .../app/containers/home/home.component.html | 2 +- .../app/containers/users/users.component.ts | 11 +++- README.md | 8 +-- package.json | 64 ++++++++++--------- webpack.config.js | 47 ++++++++++---- webpack.config.vendor.js | 40 ++++++++++-- 11 files changed, 152 insertions(+), 71 deletions(-) create mode 100644 Asp2017.sln diff --git a/.vscode/launch.json b/.vscode/launch.json index 08d4edf9..c26ab807 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -20,7 +20,7 @@ "type": "coreclr", "request": "launch", "preLaunchTask": "build", - "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll", + "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll", "args": [], "cwd": "${workspaceRoot}", "stopAtEntry": false, @@ -51,7 +51,7 @@ "type": "coreclr", "request": "launch", "preLaunchTask": "build", - "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll", + "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll", "args": [], "cwd": "${workspaceRoot}", "stopAtEntry": false, @@ -82,7 +82,7 @@ "type": "coreclr", "request": "launch", "preLaunchTask": "build", - "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/Asp2017.dll", + "program": "${workspaceRoot}/bin/Debug/netcoreapp2.1/Asp2017.dll", "args": [], "cwd": "${workspaceRoot}", "stopAtEntry": false, diff --git a/Asp2017.csproj b/Asp2017.csproj index efb619c0..fe12d77e 100644 --- a/Asp2017.csproj +++ b/Asp2017.csproj @@ -1,17 +1,17 @@  - netcoreapp2.0 + netcoreapp2.1 true Latest false - - - - - + + + + + diff --git a/Asp2017.sln b/Asp2017.sln new file mode 100644 index 00000000..56a99822 --- /dev/null +++ b/Asp2017.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio 15 +VisualStudioVersion = 15.0.27703.2018 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Asp2017", "Asp2017.csproj", "{BC28E9F7-E6EC-447D-AABD-17683BEAD625}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Debug|Any CPU.Build.0 = Debug|Any CPU + {BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Release|Any CPU.ActiveCfg = Release|Any CPU + {BC28E9F7-E6EC-447D-AABD-17683BEAD625}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {DE341460-9041-458F-99D5-43FC7572CFA6} + EndGlobalSection +EndGlobal diff --git a/ClientApp/app/app.module.browser.ts b/ClientApp/app/app.module.browser.ts index fa983b67..f7371e80 100644 --- a/ClientApp/app/app.module.browser.ts +++ b/ClientApp/app/app.module.browser.ts @@ -7,7 +7,7 @@ import { ORIGIN_URL, REQUEST } from '@nguniversal/aspnetcore-engine/tokens'; import { AppModuleShared } from './app.module'; import { AppComponent } from './app.component'; import { BrowserTransferStateModule } from '@angular/platform-browser'; -import { BrowserPrebootModule } from 'preboot/browser'; +import { PrebootModule } from 'preboot'; export function getOriginUrl() { return window.location.origin; @@ -21,7 +21,7 @@ export function getRequest() { @NgModule({ bootstrap: [AppComponent], imports: [ - BrowserPrebootModule.replayEvents(), + PrebootModule.withConfig({ appRoot: 'app-root' }), BrowserAnimationsModule, // Our Common AppModule diff --git a/ClientApp/app/app.module.server.ts b/ClientApp/app/app.module.server.ts index 25711851..642a774c 100644 --- a/ClientApp/app/app.module.server.ts +++ b/ClientApp/app/app.module.server.ts @@ -7,7 +7,7 @@ import { AppModuleShared } from './app.module'; import { AppComponent } from './app.component'; import { ServerTransferStateModule } from '@angular/platform-server'; -import { ServerPrebootModule } from 'preboot/server'; +import { PrebootModule } from 'preboot'; @NgModule({ bootstrap: [AppComponent], @@ -16,7 +16,7 @@ import { ServerPrebootModule } from 'preboot/server'; AppModuleShared, ServerModule, - ServerPrebootModule.recordEvents({ appRoot: 'app-root' }), + PrebootModule.withConfig({ appRoot: 'app-root' }), NoopAnimationsModule, // HttpTransferCacheModule still needs fixes for 5.0 diff --git a/ClientApp/app/containers/home/home.component.html b/ClientApp/app/containers/home/home.component.html index 3a4db63b..3c08c588 100644 --- a/ClientApp/app/containers/home/home.component.html +++ b/ClientApp/app/containers/home/home.component.html @@ -12,7 +12,7 @@

{{ 'HOME_FEATURE_LIST_TITLE' | translate }}

  • ASP.NET Core 2.0 :: ( Visual Studio 2017 )
  • - Angular 5.* front-end UI framework + Angular 6.* front-end UI framework
    • Angular **platform-server** (aka: Universal) - server-side rendering for SEO, deep-linking, and incredible performance.
    • diff --git a/ClientApp/app/containers/users/users.component.ts b/ClientApp/app/containers/users/users.component.ts index 6bca6a73..f6a0aa2d 100644 --- a/ClientApp/app/containers/users/users.component.ts +++ b/ClientApp/app/containers/users/users.component.ts @@ -1,8 +1,13 @@ import { - Component, OnInit, - // animation imports - trigger, state, style, transition, animate, Inject + Component, OnInit, Inject } from '@angular/core'; +import { + trigger, + state, + style, + animate, + transition +} from '@angular/animations'; import { IUser } from '../../models/User'; import { UserService } from '../../shared/user.service'; diff --git a/README.md b/README.md index 8cffbc2f..d2b1db31 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# ASP.NET Core 2.0 & Angular 5(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! +# ASP.NET Core 2.0 & Angular 6(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! ## By [DevHelp.Online](http://www.DevHelp.Online) -> Updated to the latest Angular 5.x +> Updated to the latest Angular 6.x > Note ServerTransferModule still in the works - fix coming soon @@ -81,7 +81,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual - Codelyzer (for Real-time static code analysis) - VSCode & Atom provide real-time analysis out of the box. -- **ASP.NET Core 2.0** +- **ASP.NET Core 2.1** - Integration with NodeJS to provide pre-rendering, as well as any other Node module asset you want to use. @@ -113,7 +113,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual ### Visual Studio 2017 -Make sure you have .NET Core 2.0 installed and/or VS2017 15.3. +Make sure you have .NET Core 2.1 installed and/or VS2017 15.3. VS2017 will automatically install all the neccessary npm & .NET dependencies when you open the project. Simply push F5 to start debugging ! diff --git a/package.json b/package.json index 848a12a2..9765601e 100644 --- a/package.json +++ b/package.json @@ -16,26 +16,26 @@ "clean": "rimraf wwwroot/dist clientapp/dist" }, "dependencies": { - "@angular/animations": "^5.0.0", - "@angular/common": "^5.0.0", - "@angular/compiler": "^5.0.0", - "@angular/core": "^5.0.0", - "@angular/forms": "^5.0.0", - "@angular/http": "^5.0.0", - "@angular/platform-browser": "^5.0.0", - "@angular/platform-browser-dynamic": "^5.0.0", - "@angular/platform-server": "^5.0.0", - "@angular/router": "^5.0.0", - "@nguniversal/aspnetcore-engine": "^5.0.0-beta.8", - "@nguniversal/common": "^5.0.0-beta.8", - "@ngx-translate/core": "^9.1.1", - "@ngx-translate/http-loader": "^2.0.1", - "@types/node": "^7.0.12", + "@angular/animations": "^6.0.3", + "@angular/common": "^6.0.3", + "@angular/compiler": "^6.0.3", + "@angular/core": "^6.0.3", + "@angular/forms": "^6.0.3", + "@angular/http": "^6.0.3", + "@angular/platform-browser": "^6.0.3", + "@angular/platform-browser-dynamic": "^6.0.3", + "@angular/platform-server": "^6.0.3", + "@angular/router": "^6.0.3", + "@nguniversal/aspnetcore-engine": "^6.0.0", + "@nguniversal/common": "^6.0.0", + "@ngx-translate/core": "^10.0.2", + "@ngx-translate/http-loader": "^3.0.1", + "@types/node": "^10.1.2", "angular2-router-loader": "^0.3.5", "angular2-template-loader": "^0.6.2", "aspnet-prerendering": "^3.0.1", "aspnet-webpack": "^2.0.3", - "awesome-typescript-loader": "^3.2.3", + "awesome-typescript-loader": "^5.0.0", "bootstrap": "^4.1.1", "bootstrap-sass": "^3.3.7", "core-js": "^2.5.6", @@ -43,38 +43,38 @@ "css-loader": "^0.28.11", "event-source-polyfill": "^0.0.12", "expose-loader": "^0.7.5", - "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "isomorphic-fetch": "^2.2.1", "jquery": "^3.3.1", "json-loader": "^0.5.7", - "moment": "2.18.1", - "ngx-bootstrap": "2.0.5", + "moment": "2.22.1", + "ngx-bootstrap": "^3.0.0", "node-sass": "^4.9.0", - "preboot": "^5.0.0", + "preboot": "^6.0.0-beta.4", "raw-loader": "^0.5.1", "rimraf": "^2.6.2", - "rxjs": "^6.1.0", - "rxjs-compat": "^6.1.0", - "sass-loader": "^6.0.6", - "style-loader": "^0.18.2", + "rxjs": "^6.2.0", + "rxjs-compat": "^6.2.0", + "sass-loader": "^7.0.1", + "style-loader": "^0.21.0", "to-string-loader": "^1.1.5", "typescript": "~2.7.2", "url-loader": "^1.0.1", - "webpack": "^3.6.0", - "webpack-hot-middleware": "^2.22.1", - "webpack-merge": "^4.1.0", + "webpack": "^4.9.1", + "webpack-hot-middleware": "^2.22.2", + "webpack-merge": "^4.1.2", "zone.js": "^0.8.26" }, "devDependencies": { - "@angular/cli": "^1.7.0-beta.1", - "@angular/compiler-cli": "^5.2.1", - "@ngtools/webpack": "^1.9.0", + "@angular/cli": "^6.0.5", + "@angular/compiler-cli": "6.0.3", + "@ngtools/webpack": "^6.0.5", "@types/chai": "^4.1.3", "@types/jasmine": "^2.8.7", "chai": "^4.1.2", "codelyzer": "^3.1.2", + "extract-text-webpack-plugin": "^4.0.0-beta.0", "istanbul-instrumenter-loader": "^3.0.1", "jasmine-core": "^2.5.2", "karma": "^1.7.1", @@ -88,6 +88,8 @@ "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.4", "tslint": "^5.10.0", - "webpack-bundle-analyzer": "^2.12.0" + "uglifyjs-webpack-plugin": "^1.2.5", + "webpack-bundle-analyzer": "^2.13.1", + "webpack-cli": "^2.1.4" } } diff --git a/webpack.config.js b/webpack.config.js index a54d3135..d55cb8de 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,6 +21,7 @@ module.exports = (env) => { // Configuration in common to both client-side and server-side bundles const isDevBuild = !(env && env.prod); const sharedConfig = { + mode: isDevBuild ? "development" : "production", stats: { modules: false }, context: __dirname, resolve: { extensions: [ '.js', '.ts' ] }, @@ -64,16 +65,26 @@ module.exports = (env) => { tsConfigPath: './tsconfig.json', entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'), exclude: ['./**/*.server.ts'] - }), - new webpack.optimize.UglifyJsPlugin({ - output: { - ascii_only: true, - } - }), + }) ]), devtool: isDevBuild ? 'cheap-eval-source-map' : false, node: { fs: "empty" + }, + optimization: { + minimizer: [].concat(isDevBuild ? [] : [ + // we specify a custom UglifyJsPlugin here to get source maps in production + new UglifyJsPlugin({ + cache: true, + parallel: true, + uglifyOptions: { + compress: false, + ecma: 6, + mangle: true + }, + sourceMap: true + }) + ]) } }); @@ -105,13 +116,6 @@ module.exports = (env) => { {} ) ] : [ - new webpack.optimize.UglifyJsPlugin({ - mangle: false, - compress: false, - output: { - ascii_only: true, - } - }), // Plugins that apply in production builds only new AngularCompilerPlugin({ mainPath: path.join(__dirname, 'ClientApp/boot.server.PRODUCTION.ts'), @@ -126,7 +130,22 @@ module.exports = (env) => { }, target: 'node', // switch to "inline-source-map" if you want to debug the TS during SSR - devtool: isDevBuild ? 'cheap-eval-source-map' : false + devtool: isDevBuild ? 'cheap-eval-source-map' : false, + optimization: { + minimizer: [].concat(isDevBuild ? [] : [ + // we specify a custom UglifyJsPlugin here to get source maps in production + new UglifyJsPlugin({ + cache: true, + parallel: true, + uglifyOptions: { + compress: false, + ecma: 6, + mangle: true + }, + sourceMap: true + }) + ]) + } }); return [clientBundleConfig, serverBundleConfig]; diff --git a/webpack.config.vendor.js b/webpack.config.vendor.js index 6d35d3ba..9a63c583 100644 --- a/webpack.config.vendor.js +++ b/webpack.config.vendor.js @@ -27,10 +27,11 @@ const nonTreeShakableModules = [ const allModules = treeShakableModules.concat(nonTreeShakableModules); module.exports = (env) => { - console.log(`env = ${JSON.stringify(env)}`) + console.log(`env = ${JSON.stringify(env)}`) const extractCSS = new ExtractTextPlugin('vendor.css'); const isDevBuild = !(env && env.prod); const sharedConfig = { + mode: isDevBuild ? "development" : "production", stats: { modules: false }, resolve: { extensions: [ '.js' ] }, module: { @@ -70,8 +71,23 @@ module.exports = (env) => { name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ - new webpack.optimize.UglifyJsPlugin() - ]) + + ]), + optimization: { + minimizer: [].concat(isDevBuild ? [] : [ + // we specify a custom UglifyJsPlugin here to get source maps in production + new UglifyJsPlugin({ + cache: true, + parallel: true, + uglifyOptions: { + compress: false, + ecma: 6, + mangle: true + }, + sourceMap: true + }) + ]) + } }); const serverBundleConfig = merge(sharedConfig, { @@ -91,8 +107,22 @@ module.exports = (env) => { name: '[name]_[hash]' }) ].concat(isDevBuild ? [] : [ - new webpack.optimize.UglifyJsPlugin() - ]) + ]), + optimization: { + minimizer: [].concat(isDevBuild ? [] : [ + // we specify a custom UglifyJsPlugin here to get source maps in production + new UglifyJsPlugin({ + cache: true, + parallel: true, + uglifyOptions: { + compress: false, + ecma: 6, + mangle: true + }, + sourceMap: true + }) + ]) + } }); return [clientBundleConfig, serverBundleConfig]; From eff67f28a986be7fb36b16d002649e6ea37622e2 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Thu, 31 May 2018 14:56:48 -0400 Subject: [PATCH 03/48] fix(uglify, dotnetcore): update to 2.1, fix uglify issue, prod build fixed closes #632 --- .angular-cli.json | 25 -------------- Asp2017.csproj | 8 ++--- ClientApp/tsconfig.spec.json | 1 + angular.json | 63 ++++++++++++++++++++++++++++++++++++ package.json | 4 ++- webpack.config.js | 1 + webpack.config.vendor.js | 2 ++ 7 files changed, 74 insertions(+), 30 deletions(-) delete mode 100644 .angular-cli.json create mode 100644 angular.json diff --git a/.angular-cli.json b/.angular-cli.json deleted file mode 100644 index 4e8d017d..00000000 --- a/.angular-cli.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "project": { - "name": "AspnetCore-Angular-Universal" - }, - "apps": [ - { - "root": "ClientApp" - } - ], - "defaults": { - "styleExt": "scss", - "component": { - "spec": false - } - }, - "lint":[ - { - "project": "ClientApp/tsconfig.app.json" - }, - { - "project": "ClientApp/tsconfig.spec.json" - } - ] -} diff --git a/Asp2017.csproj b/Asp2017.csproj index fe12d77e..c8975b88 100644 --- a/Asp2017.csproj +++ b/Asp2017.csproj @@ -7,15 +7,15 @@ - + - - + + - + diff --git a/ClientApp/tsconfig.spec.json b/ClientApp/tsconfig.spec.json index 584cb0a4..de4e2a75 100644 --- a/ClientApp/tsconfig.spec.json +++ b/ClientApp/tsconfig.spec.json @@ -11,6 +11,7 @@ ] }, "files": [ + "polyfills.ts" ], "include": [ "**/*.spec.ts", diff --git a/angular.json b/angular.json new file mode 100644 index 00000000..42179045 --- /dev/null +++ b/angular.json @@ -0,0 +1,63 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "AspnetCore-Angular-Universal": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/", + "index": "ClientApp/index.html", + "main": "ClientApp/main.ts", + "tsConfig": "ClientApp/tsconfig.app.json", + "assets": [], + "styles": [], + "scripts": [] + }, + "configurations": {} + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "AspnetCore-Angular-Universal:build" + }, + "configurations": {} + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "AspnetCore-Angular-Universal:build" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "ClientApp/tsconfig.app.json", + "ClientApp/tsconfig.spec.json" + ], + "exclude": [] + } + } + } + }, + "AspnetCore-Angular-Universal-e2e": { + "root": "", + "sourceRoot": "", + "projectType": "application" + } + }, + "defaultProject": "AspnetCore-Angular-Universal", + "schematics": { + "@schematics/angular:component": { + "spec": false, + "styleext": "scss" + }, + "@schematics/angular:directive": {} + } +} \ No newline at end of file diff --git a/package.json b/package.json index 9765601e..61767b74 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "angular4-aspnetcore-universal", "version": "1.0.0-rc3", "scripts": { + "clean:install": "npm run clean && rimraf ./node_modules ./bin ./obj ./package-lock.json && dotnet restore && npm i", "lint": "tslint -p tsconfig.json", "test": "npm run build:vendor && karma start ClientApp/test/karma.conf.js", "test:watch": "npm run test -- --auto-watch --no-single-run", @@ -90,6 +91,7 @@ "tslint": "^5.10.0", "uglifyjs-webpack-plugin": "^1.2.5", "webpack-bundle-analyzer": "^2.13.1", - "webpack-cli": "^2.1.4" + "webpack-cli": "^2.1.4", + "@angular-devkit/build-angular": "~0.6.6" } } diff --git a/webpack.config.js b/webpack.config.js index d55cb8de..029207ac 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,6 +14,7 @@ const merge = require('webpack-merge'); const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin; const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const { sharedModuleRules } = require('./webpack.additions'); diff --git a/webpack.config.vendor.js b/webpack.config.vendor.js index 9a63c583..b335a1f9 100644 --- a/webpack.config.vendor.js +++ b/webpack.config.vendor.js @@ -2,6 +2,7 @@ const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const treeShakableModules = [ '@angular/animations', '@angular/common', @@ -24,6 +25,7 @@ const nonTreeShakableModules = [ 'event-source-polyfill', // 'jquery', ]; + const allModules = treeShakableModules.concat(nonTreeShakableModules); module.exports = (env) => { From 2e12109b0fe957154edaf2de6a15614b37597f24 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Thu, 31 May 2018 15:04:21 -0400 Subject: [PATCH 04/48] docs(readme): update verbiage --- README.md | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index d2b1db31..7006242d 100644 --- a/README.md +++ b/README.md @@ -4,24 +4,22 @@ > Updated to the latest Angular 6.x -> Note ServerTransferModule still in the works - fix coming soon -

      - ASP.NET Core 2.0 Angular 5+ Starter + ASP.NET Core 2.0 Angular 6+ Starter

      -### Harness the power of Angular 5+, ASP.NET Core 2.0, now with SEO ! +### Harness the power of Angular 6+, ASP.NET Core 2.0, now with SEO ! Angular SEO in action:

      - ASP.NET Core Angular5 SEO + ASP.NET Core Angular6 SEO

      ### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net This repository is maintained by [Angular](https://github.com/angular/angular) and is meant to be an advanced starter -for both ASP.NET Core 2.0 using Angular 5.0+, not only for the client-side, but to be rendered on the server for instant +for both ASP.NET Core 2.0 using Angular 6.0+, not only for the client-side, but to be rendered on the server for instant application paints (Note: If you don't need SSR [read here](#faq) on how to disable it). This is meant to be a Feature-Rich Starter application containing all of the latest technologies, best build systems available, and include many real-world examples and libraries needed in todays Single Page Applications (SPAs). @@ -47,7 +45,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual > These are just some of the features found in this starter! -- ASP.NET 2.0 - VS2017 15.3 support now! +- ASP.NET 2.1 - VS2017 support now! - Azure delpoyment straight from VS2017 - Built in docker support through VS2017 - RestAPI (WebAPI) integration @@ -55,7 +53,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual - Swagger WebAPI documentation when running in development mode - SignalR Chat demo! (Thanks to [@hakonamatata](https://github.com/hakonamatata)) -- **Angular 5.0.0** : +- **Angular 6.0.0** : - (Minimal) Angular-CLI integration - This is to be used mainly for Generating Components/Services/etc. - Usage examples: @@ -69,7 +67,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual - Can be easily replaced with bootstrap4 (3 is provided for browser support) - Bootstrap using SCSS / SASS for easy theming / styling! -- **Webpack build system (Webpack 2)** +- **Webpack build system (Webpack 4)** - HMR : Hot Module Reloading/Replacement - Production builds w/ AoT Compilation @@ -87,7 +85,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual - **Azure** - Microsoft Application Insights setup (for MVC & Web API routing) - - Client-side Angular2 Application Insights integration + - Client-side Angular Application Insights integration - If you're using Azure simply install `npm i -S @markpieszak/ng-application-insights` as a dependencies. - Note: Make sure only the Browser makes these calls ([usage info here](https://github.com/MarkPieszak/angular-application-insights/blob/master/README.md#usage)) - More information here: - https://github.com/MarkPieszak/angular-application-insights @@ -97,9 +95,7 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual instrumentationKey: 'Your-Application-Insights-instrumentationKey' }) ``` - - -> Looking for the older 2.x branch? Go [here](https://github.com/MarkPieszak/aspnetcore-angular2-universal/tree/old-2.x-universal-branch) + ---- @@ -107,8 +103,8 @@ This utilizes all the latest standards, no gulp, no bower, no typings, no manual # Getting Started? -- **Make sure you have at least Node 6.x or higher (w/ npm 3+) installed!** -- **This repository uses ASP.Net Core 2.0, which has a hard requirement on .NET Core Runtime 2.0.0 and .NET Core SDK 2.0.0. Please install these items from [here](https://github.com/dotnet/core/blob/master/release-notes/download-archives/2.0.0-download.md)** +- **Make sure you have at least Node 8.11.1 or higher (w/ npm 5+) installed!** +- **This repository uses ASP.Net Core 2.1, which has a hard requirement on .NET Core Runtime 2.1 and .NET Core SDK 2.1. Please install these items from [here](https://blogs.msdn.microsoft.com/dotnet/2018/05/30/announcing-net-core-2-1/?WT.mc_id=blog-twitter-timheuer)** ### Visual Studio 2017 @@ -143,8 +139,9 @@ export ASPNETCORE_ENVIRONMENT=Development # Upcoming Features: -- Fix HttpTransferCacheModule & ServerTransferModule to work with aspnet-engine -- ~~Update to use npm [ngAspnetCoreEngine](https://github.com/angular/universal/pull/682) (still need to tweak a few things there)~~ +- Clean API / structure / simplify application +- Refactor to latest RxJs pipeable syntax +- Attempt to integrate with Angular-CLI fully ---- @@ -296,7 +293,7 @@ Take a look at the `_Layout.cshtml` file for example, notice how we let .NET han - @ViewData["Title"] - AspNET.Core Angular 5.0.0 (+) starter + @ViewData["Title"] - AspNET.Core Angular 6.0.0 (+) starter @@ -335,9 +332,9 @@ Well now, your Client-side Angular will take over, and you'll have a fully funct # "Gotchas" -- This repository uses ASP.Net Core 2.0, which has a hard requirement on .NET Core Runtime 2.0.0 and .NET Core SDK 2.0.0. Please install these items from [here](https://github.com/dotnet/core/blob/master/release-notes/download-archives/2.0.0-download.md) +- This repository uses ASP.Net Core 2.1, which has a hard requirement on .NET Core Runtime 2.1 and .NET Core SDK 2.1. Please install these items from [here](https://blogs.msdn.microsoft.com/dotnet/2018/05/30/announcing-net-core-2-1/?WT.mc_id=blog-twitter-timheuer) -> When building components in Angular 5 there are a few things to keep in mind. +> When building components in Angular 6 there are a few things to keep in mind. - Make sure you provide Absolute URLs when calling any APIs. (The server can't understand relative paths, so `/api/whatever` will fail). From 8f6356ca35d1164b3c25ce112253e26da5511e39 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Thu, 31 May 2018 15:04:55 -0400 Subject: [PATCH 05/48] docs(readme): update --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7006242d..bdf713cc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ASP.NET Core 2.0 & Angular 6(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! +# ASP.NET Core 2.1 & Angular 6(+) Advanced Starter - with Server-side prerendering (for Angular SEO)! ## By [DevHelp.Online](http://www.DevHelp.Online) @@ -19,7 +19,7 @@ Angular SEO in action: ### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net This repository is maintained by [Angular](https://github.com/angular/angular) and is meant to be an advanced starter -for both ASP.NET Core 2.0 using Angular 6.0+, not only for the client-side, but to be rendered on the server for instant +for both ASP.NET Core 2.1 using Angular 6.0+, not only for the client-side, but to be rendered on the server for instant application paints (Note: If you don't need SSR [read here](#faq) on how to disable it). This is meant to be a Feature-Rich Starter application containing all of the latest technologies, best build systems available, and include many real-world examples and libraries needed in todays Single Page Applications (SPAs). From e1b8178d2845e54c584528cd1ea4e235777cd68f Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Thu, 31 May 2018 15:39:02 -0400 Subject: [PATCH 06/48] chore(wording): update 5.0 references in text to 6.0 --- ClientApp/app/containers/home/home.component.html | 6 +++--- Startup.cs | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ClientApp/app/containers/home/home.component.html b/ClientApp/app/containers/home/home.component.html index 3c08c588..7b6799b6 100644 --- a/ClientApp/app/containers/home/home.component.html +++ b/ClientApp/app/containers/home/home.component.html @@ -1,8 +1,8 @@ 

      {{ title }}

      - Enjoy the latest features from .NET Core & Angular 5.0! -
      For more info check the repo here: AspNetCore-Angular2-Universal repo + Enjoy the latest features from .NET Core & Angular 6.x! +
      For more info check the repo here: AspNetCore-Angular-Universal repo

      @@ -10,7 +10,7 @@

      {{ 'HOME_FEATURE_LIST_TITLE' | translate }}

        -
      • ASP.NET Core 2.0 :: ( Visual Studio 2017 )
      • +
      • ASP.NET Core 2.1 :: ( Visual Studio 2017 )
      • Angular 6.* front-end UI framework
          diff --git a/Startup.cs b/Startup.cs index db1d5d8d..4b07eaed 100644 --- a/Startup.cs +++ b/Startup.cs @@ -56,7 +56,7 @@ public void ConfigureServices(IServiceCollection services) // Register the Swagger generator, defining one or more Swagger documents services.AddSwaggerGen(c => { - c.SwaggerDoc("v1", new Info { Title = "Angular 5.0 Universal & ASP.NET Core advanced starter-kit web API", Version = "v1" }); + c.SwaggerDoc("v1", new Info { Title = "Angular 6.0 Universal & ASP.NET Core advanced starter-kit web API", Version = "v1" }); }); } From 352fab824aa428079f31a6902c1e95444660f7f8 Mon Sep 17 00:00:00 2001 From: GRIMMR3AP3R Date: Thu, 31 May 2018 14:46:41 -0500 Subject: [PATCH 07/48] feat(bootstrap4): add bootstrap4, docker support, fix bootstrap-sass issues * Real Bootstrap 4 * Real Boostrap 4 * Add docker support --- .dockerignore | 335 ++++++++++++++++++ ClientApp/app/_styles.scss | 45 +++ ClientApp/app/_variables.scss | 6 + ClientApp/app/app.component.html | 8 +- ClientApp/app/app.component.scss | 88 ++--- ClientApp/app/app.module.ts | 5 +- .../components/navmenu/navmenu.component.css | 106 ------ .../components/navmenu/navmenu.component.html | 89 +++-- .../components/navmenu/navmenu.component.scss | 114 ++++++ .../components/navmenu/navmenu.component.ts | 2 +- .../user-detail/user-detail.component.html | 25 +- .../user-detail/user-detail.component.scss | 4 + .../user-detail/user-detail.component.ts | 29 +- .../app/containers/home/home.component.html | 4 +- .../ngx-bootstrap.component.html | 2 +- .../app/containers/users/users.component.css | 64 ---- .../app/containers/users/users.component.html | 55 +-- .../app/containers/users/users.component.scss | 101 ++++++ .../app/containers/users/users.component.ts | 8 +- Dockerfile | 24 ++ Server/Data/DbInitializer.cs | 3 +- Views/Shared/_Layout.cshtml | 3 +- package.json | 1 - 23 files changed, 809 insertions(+), 312 deletions(-) create mode 100644 .dockerignore create mode 100644 ClientApp/app/_styles.scss create mode 100644 ClientApp/app/_variables.scss delete mode 100644 ClientApp/app/components/navmenu/navmenu.component.css create mode 100644 ClientApp/app/components/navmenu/navmenu.component.scss create mode 100644 ClientApp/app/components/user-detail/user-detail.component.scss delete mode 100644 ClientApp/app/containers/users/users.component.css create mode 100644 ClientApp/app/containers/users/users.component.scss create mode 100644 Dockerfile diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..230e749b --- /dev/null +++ b/.dockerignore @@ -0,0 +1,335 @@ +.dockerignore +.env +.git +.gitignore +.vs +.vscode +*/bin +*/obj +**/.toolstarget + + +# User-specific files +*.suo +*.user +*.userosscache +*.sln.docstates + +# User-specific files (MonoDevelop/Xamarin Studio) +*.userprefs + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +bld/ +[Bb]in/ +[Oo]bj/ +[Ll]og/ + +# Visual Studio 2015/2017 cache/options directory +.vs/ +# Uncomment if you have tasks that create the project's static files in wwwroot +#wwwroot/ + +# Visual Studio 2017 auto generated files +Generated\ Files/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NUNIT +*.VisualState.xml +TestResult.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +# Benchmark Results +BenchmarkDotNet.Artifacts/ + +# .NET Core +project.lock.json +project.fragment.lock.json +artifacts/ + +# StyleCop +StyleCopReport.xml + +# Files built by Visual Studio +*_i.c +*_p.c +*_i.h +*.ilk +*.meta +*.obj +*.iobj +*.pch +*.pdb +*.ipdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opendb +*.opensdf +*.sdf +*.cachefile +*.VC.db +*.VC.VC.opendb + +# Visual Studio profiler +*.psess +*.vsp +*.vspx +*.sap + +# Visual Studio Trace Files +*.e2e + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# JustCode is a .NET coding add-in +.JustCode + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# AxoCover is a Code Coverage Tool +.axoCover/* +!.axoCover/settings.json + +# Visual Studio code coverage results +*.coverage +*.coveragexml + +# NCrunch +_NCrunch_* +.*crunch*.local.xml +nCrunchTemp_* + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# Note: Comment the next line if you want to checkin your web deploy settings, +# but database connection strings (with potential passwords) will be unencrypted +*.pubxml +*.publishproj + +# Microsoft Azure Web App publish settings. Comment the next line if you want to +# checkin your Azure Web App publish settings, but sensitive information contained +# in these scripts will be unencrypted +PublishScripts/ + +# NuGet Packages +*.nupkg +# The packages folder can be ignored because of Package Restore +**/[Pp]ackages/* +# except build/, which is used as an MSBuild target. +!**/[Pp]ackages/build/ +# Uncomment if necessary however generally it will be regenerated when needed +#!**/[Pp]ackages/repositories.config +# NuGet v3's project.json files produces more ignorable files +*.nuget.props +*.nuget.targets + +# Microsoft Azure Build Output +csx/ +*.build.csdef + +# Microsoft Azure Emulator +ecf/ +rcf/ + +# Windows Store app package directories and files +AppPackages/ +BundleArtifacts/ +Package.StoreAssociation.xml +_pkginfo.txt +*.appx + +# Visual Studio cache files +# files ending in .cache can be ignored +*.[Cc]ache +# but keep track of directories ending in .cache +!*.[Cc]ache/ + +# Others +ClientBin/ +~$* +*~ +*.dbmdl +*.dbproj.schemaview +*.jfm +*.pfx +*.publishsettings +orleans.codegen.cs + +# Including strong name files can present a security risk +# (https://github.com/github/gitignore/pull/2483#issue-259490424) +#*.snk + +# Since there are multiple workflows, uncomment next line to ignore bower_components +# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) +#bower_components/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm +ServiceFabricBackup/ +*.rptproj.bak + +# SQL Server files +*.mdf +*.ldf +*.ndf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings +*.rptproj.rsuser + +# Microsoft Fakes +FakesAssemblies/ + +# GhostDoc plugin setting file +*.GhostDoc.xml + +# Node.js Tools for Visual Studio +.ntvs_analysis.dat +node_modules/ + +# Visual Studio 6 build log +*.plg + +# Visual Studio 6 workspace options file +*.opt + +# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) +*.vbw + +# Visual Studio LightSwitch build output +**/*.HTMLClient/GeneratedArtifacts +**/*.DesktopClient/GeneratedArtifacts +**/*.DesktopClient/ModelManifest.xml +**/*.Server/GeneratedArtifacts +**/*.Server/ModelManifest.xml +_Pvt_Extensions + +# Paket dependency manager +.paket/paket.exe +paket-files/ + +# FAKE - F# Make +.fake/ + +# JetBrains Rider +.idea/ +*.sln.iml + +# CodeRush +.cr/ + +# Python Tools for Visual Studio (PTVS) +__pycache__/ +*.pyc + +# Cake - Uncomment if you are using it +# tools/** +# !tools/packages.config + +# Tabs Studio +*.tss + +# Telerik's JustMock configuration file +*.jmconfig + +# BizTalk build output +*.btp.cs +*.btm.cs +*.odx.cs +*.xsd.cs + +# OpenCover UI analysis results +OpenCover/ + +# Azure Stream Analytics local run output +ASALocalRun/ + +# MSBuild Binary and Structured Log +*.binlog + +# NVidia Nsight GPU debugger configuration file +*.nvuser + +# MFractors (Xamarin productivity tool) working folder +.mfractor/ \ No newline at end of file diff --git a/ClientApp/app/_styles.scss b/ClientApp/app/_styles.scss new file mode 100644 index 00000000..42cf15fe --- /dev/null +++ b/ClientApp/app/_styles.scss @@ -0,0 +1,45 @@ +$body-bg: #f1f1f1; +$body-color: #111; +$theme-colors: ( "primary": #216DAD); +$theme-colors: ( "accent": #669ECD); + + +@import "http://github.com/~bootstrap/scss/bootstrap"; +.panel { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); + height: 100%; + flex: 1; + background-color: rgba(255, 255, 255, .30); + border-radius: .25rem; + .title { + background-color: #86afd0; + color: #FFFFFF; + text-align: center; + border-top-left-radius: .25rem; + border-top-right-radius: .25rem; + } + .body { + display: flex; + } +} + +@include media-breakpoint-down(md) { + .panel { + .body { + flex-direction: column; + padding: 0px; + } + .title { + font-size: 1.5rem; + } + } +} + +@include media-breakpoint-up(md) { + .panel { + .body { + flex-direction: row; + padding: 1.5rem; + } + } +} diff --git a/ClientApp/app/_variables.scss b/ClientApp/app/_variables.scss new file mode 100644 index 00000000..2d34745a --- /dev/null +++ b/ClientApp/app/_variables.scss @@ -0,0 +1,6 @@ +@import "http://github.com/styles"; +$header-height:50px; +$menu-max-width:25%; +$navbar-default-bg: #312312; +$light-orange: #ff8c00; +$navbar-default-color: $light-orange; diff --git a/ClientApp/app/app.component.html b/ClientApp/app/app.component.html index 0345c682..45ca7f89 100644 --- a/ClientApp/app/app.component.html +++ b/ClientApp/app/app.component.html @@ -1,6 +1,6 @@ -
          - -
          -
          +
          + +
          +
          diff --git a/ClientApp/app/app.component.scss b/ClientApp/app/app.component.scss index 481063dc..8705be92 100644 --- a/ClientApp/app/app.component.scss +++ b/ClientApp/app/app.component.scss @@ -1,63 +1,71 @@ -$navbar-default-bg: #312312; -$light-orange: #ff8c00; -$navbar-default-color: $light-orange; +@import "http://github.com/variables"; +/* *** Overall APP Styling can go here *** + -------------------------------------------- + Note: This Component has ViewEncapsulation.None so the styles will bleed out -/* Import Bootstrap & Fonts */ -$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; -@import "http://github.com/~bootstrap-sass/assets/stylesheets/bootstrap"; +*/ +body { + line-height: 18px; + padding-top: $header-height; +} +.body-content { + margin: auto; +} +h1 { + border-bottom: 3px theme-color("accent") solid; + font-size: 24px; +} -/* *** Overall APP Styling can go here *** - -------------------------------------------- - Note: This Component has ViewEncapsulation.None so the styles will bleed out +h2 { + font-size: 20px; +} -*/ -@media (max-width: 767px) { - body { - background: #f1f1f1; - line-height: 18px; - padding-top: 30px; - } +h1, +h2, +h3 { + padding: 3px 0; +} - h1 { - border-bottom: 3px #4189C7 solid; - font-size: 24px; - } +ul { + padding: 10px 25px; +} - h2 { - font-size: 20px; - } +ul li { + padding: 5px 0; +} - h1, h2, h3 { - padding: 3px 0; - } +blockquote { + margin: 25px 10px; + padding: 10px 35px 10px 10px; + border-left: 10px color("green") solid; + background: $gray-100; +} + +blockquote a, +blockquote a:hover { + color: $green; } -@media (min-width: 768px) { +@include media-breakpoint-up(lg) { body { - background: #f1f1f1; - line-height: 18px; - padding-top: 0px; + padding-top: 30px; + } + .body-content { + margin-left: $menu-max-width; } - h1 { border-bottom: 5px #4189C7 solid; font-size: 36px; } - h2 { font-size: 30px; } - - h1, h2, h3 { + h1, + h2, + h3 { padding: 10px 0; } } - -ul { padding: 10px 25px; } -ul li { padding: 5px 0; } - -blockquote { margin: 25px 10px; padding: 10px 35px 10px 10px; border-left: 10px #158a15 solid; background: #edffed; } -blockquote a, blockquote a:hover { color: #068006; } diff --git a/ClientApp/app/app.module.ts b/ClientApp/app/app.module.ts index c0fa0985..7cc9c4c0 100644 --- a/ClientApp/app/app.module.ts +++ b/ClientApp/app/app.module.ts @@ -3,7 +3,7 @@ import { RouterModule, PreloadAllModules } from '@angular/router'; import { CommonModule, APP_BASE_HREF } from '@angular/common'; import { HttpModule, Http } from '@angular/http'; import { HttpClientModule, HttpClient } from '@angular/common/http'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { TransferHttpCacheModule } from '@nguniversal/common'; @@ -54,9 +54,8 @@ export function createTranslateLoader(http: HttpClient, baseHref) { HttpClientModule, TransferHttpCacheModule, BrowserTransferStateModule, - - FormsModule, + ReactiveFormsModule, AccordionModule.forRoot(), // You could also split this up if you don't want the Entire Module imported // i18n support diff --git a/ClientApp/app/components/navmenu/navmenu.component.css b/ClientApp/app/components/navmenu/navmenu.component.css deleted file mode 100644 index 8d86aa03..00000000 --- a/ClientApp/app/components/navmenu/navmenu.component.css +++ /dev/null @@ -1,106 +0,0 @@ -li .glyphicon { - margin-right: 10px; -} - -/* Highlighting rules for nav menu items */ -li.link-active a, -li.link-active a:hover, -li.link-active a:focus { - background-color: #4189C7; - color: white; -} - -/* Keep the nav menu independent of scrolling and on top of other items */ -.main-nav { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1; -} - -.icon-bar { - background-color: #4189C7; -} - - -@media (max-width: 767px) { - /* Apply for small displays */ - .main-nav { - width: 100%; - } - - .navbar-brand { - font-size: 14px; - background-color: #f1f1f1; - } - .navbar-toggle { - padding: 0px 5px; - margin-top: 0px; - height: 26px; - } - - .navbar-link { - margin-top: 4px; - margin-left: 45px; - position: fixed; - } - - .navbar-collapse { - background-color: white; - } - - .navbar a { - /* If a menu item's text is too long, truncate it */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 5px; - } -} - -@media (min-width: 768px) { - /* On small screens, convert the nav menu to a vertical sidebar */ - .main-nav { - height: 100%; - max-width: 330px; - width: calc(25% - 20px); - } - .navbar { - border-radius: 0px; - border-width: 0px; - height: 100%; - } - .navbar-brand{ - width: 100%; - } - .navbar-link { - display: block; - width: 100% - } - .navbar-header { - float: none; - } - .navbar-collapse { - border-top: 1px solid #444; - padding: 0px; - } - .navbar ul { - float: none; - } - .navbar li { - float: none; - font-size: 15px; - margin: 6px; - } - .navbar li a { - padding: 10px 16px; - border-radius: 4px; - } - .navbar a { - /* If a menu item's text is too long, truncate it */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} diff --git a/ClientApp/app/components/navmenu/navmenu.component.html b/ClientApp/app/components/navmenu/navmenu.component.html index 08e1b0fc..36c187ed 100644 --- a/ClientApp/app/components/navmenu/navmenu.component.html +++ b/ClientApp/app/components/navmenu/navmenu.component.html @@ -1,50 +1,41 @@ -
        -

        DevHelp.Online

        +

        Trilon Consulting - Trilon.io

        Consulting | Development | Training | Workshops

        - Get your Team or Application up to speed by working with some of the leading industry experts in JavaScript & ASP.NET!
        + Get your Team or Application up to speed by working with some of the leading industry experts in JavaScript, Node / NestJS, & ASP.NET!

        Follow us on Twitter!

        - @DevHelpOnline | + @trilon_io | @MarkPieszak

        From 83b0301b1db1ed34e1d16d8ef9fa4750c8b970d8 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Sun, 17 Mar 2019 11:55:39 -0400 Subject: [PATCH 41/48] docs: update --- README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e6ed1417..b0b14e9f 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,15 @@ # ASP.NET Core 2.1 & Angular 7(+) Advanced Starter - PWA & Server-side prerendering (for Angular SEO)! -## By [Trilon.io](https://Trilon.io) +## Made with :heart: by [Trilon.io](https://Trilon.io) +

        + + Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training + +

        + +--- -> Updated to the latest Angular 7.x +## High-level architectural diagram

        ASP.NET Core 2.1 Angular 7+ Starter @@ -471,7 +478,9 @@ Check out **[Trilon.io](https://Trilon.io)** for more info! Twitter [@Trilon_io] Contact us at , and let's talk about your projects needs.

        - Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training + + Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training +

        ## Follow Trilon online: From 7e2468a7d01472acf15f430b50ca596a64a62d6b Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Sun, 17 Mar 2019 11:57:52 -0400 Subject: [PATCH 42/48] docs: update --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index b0b14e9f..b6402f4b 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,12 @@ # ASP.NET Core 2.1 & Angular 7(+) Advanced Starter - PWA & Server-side prerendering (for Angular SEO)! -## Made with :heart: by [Trilon.io](https://Trilon.io) +### Made with :heart: by [Trilon.io](https://Trilon.io)

        Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

        ---- - -## High-level architectural diagram

        ASP.NET Core 2.1 Angular 7+ Starter From 4aa16404f1b1a0dd1b4e70b7dd891b0006eabd9b Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Mon, 18 Mar 2019 12:32:39 -0400 Subject: [PATCH 43/48] fix: rxjs pin to 6.2.2 closes #714 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 99ba5443..01bc52bc 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "preboot": "^7.0.0", "raw-loader": "^1.0.0", "rimraf": "^2.6.3", - "rxjs": "~6.4.0", + "rxjs": "6.2.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "to-string-loader": "^1.1.5", From 9cf8b7ba6ee15c01e2ec02a77421e7ee77eb6254 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Fri, 5 Apr 2019 12:17:42 -0400 Subject: [PATCH 44/48] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b6402f4b..8e933ca5 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ### Made with :heart: by [Trilon.io](https://Trilon.io)

        - Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training + Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

        @@ -476,7 +476,7 @@ Contact us at , and let's talk about your projects needs.

        - Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training + Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

        From 82dc1897c03f9546b613b72e4a72040b85ab54f1 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Fri, 5 Apr 2019 12:45:04 -0400 Subject: [PATCH 45/48] Update README.md --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8e933ca5..ecac2050 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,6 @@

        - -

        - ASP.NET Core 2.1 Angular 7+ Starter -

        - ### Harness the power of Angular 7+, ASP.NET Core 2.1, now with SEO ! Angular SEO in action: @@ -20,6 +15,12 @@ Angular SEO in action: ASP.NET Core Angular7 SEO

        +### Angular Universal Application Architecture + +

        + ASP.NET Core 2.1 Angular 7+ Starter +

        + ### What is this repo? Live Demo here: http://aspnetcore-angular2-universal.azurewebsites.net This repository is maintained by [Trilon.io](https://Trilon.io) and the [Angular](https://github.com/angular/angular) Universal team and is meant to be an advanced starter From b8ec2b0ff276a187e3821797fbd03201842d5311 Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Fri, 5 Apr 2019 12:45:28 -0400 Subject: [PATCH 46/48] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ecac2050..482cc672 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@

        +--- + ### Harness the power of Angular 7+, ASP.NET Core 2.1, now with SEO ! Angular SEO in action: From 55f0105f807946cff515aaa0ef535de1329c2b9f Mon Sep 17 00:00:00 2001 From: Mark Pieszak Date: Sun, 7 Apr 2019 17:56:32 -0400 Subject: [PATCH 47/48] Update README.md --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 482cc672..f52bdf4d 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,17 @@ # ASP.NET Core 2.1 & Angular 7(+) Advanced Starter - PWA & Server-side prerendering (for Angular SEO)! -### Made with :heart: by [Trilon.io](https://Trilon.io) -

        +--- + +
        +

        - Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training + Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

        + +

        Made with :heart: by Trilon.io

        + --- ### Harness the power of Angular 7+, ASP.NET Core 2.1, now with SEO ! From 837b134516631afb3034d40278e2bc9f170acdba Mon Sep 17 00:00:00 2001 From: Detys Date: Mon, 27 May 2019 02:49:07 +0300 Subject: [PATCH 48/48] fix(seeding): seeding now follows .NET Core 2.0 best practices --- Program.cs | 60 ++++++++++++------- Server/Data/CoreEFStartup.cs | 17 ++++++ Server/Data/LoggingEFStartup.cs | 13 ++++ ...itializer.cs => SimpleContentEFStartup.cs} | 24 ++++---- 4 files changed, 80 insertions(+), 34 deletions(-) create mode 100644 Server/Data/CoreEFStartup.cs create mode 100644 Server/Data/LoggingEFStartup.cs rename Server/Data/{DbInitializer.cs => SimpleContentEFStartup.cs} (67%) diff --git a/Program.cs b/Program.cs index 69e56419..fdf46454 100644 --- a/Program.cs +++ b/Program.cs @@ -6,28 +6,42 @@ using Microsoft.Extensions.Logging; using System; using System.IO; +using System.Threading.Tasks; -public class Program { - public static void Main (string[] args) { - var host = BuildWebHost (args); - using (var scope = host.Services.CreateScope ()) { - var services = scope.ServiceProvider; - try { - var context = services.GetRequiredService(); - DbInitializer.Initialize(context); - } catch (Exception ex) { - var logger = services.GetRequiredService> (); - logger.LogError (ex, "An error occurred while seeding the database."); - } - } +public class Program +{ + public static async Task Main(string[] args) + { + var host = BuildWebHost(args); + using (var scope = host.Services.CreateScope()) + { + var services = scope.ServiceProvider; - host.Run (); - } - public static IWebHost BuildWebHost (string[] args) => - WebHost.CreateDefaultBuilder (args) - .UseKestrel () - .UseContentRoot (Directory.GetCurrentDirectory ()) - .UseIISIntegration () - .UseStartup () - .Build (); - } + try + { + await EnsureDataStorageIsReady(services); + + } catch (Exception ex) + { + var logger = services.GetRequiredService>(); + logger.LogError(ex, "An error occurred while seeding the database."); + } + } + + host.Run(); + } + public static IWebHost BuildWebHost(string[] args) => + WebHost.CreateDefaultBuilder(args) + .UseKestrel() + .UseContentRoot(Directory.GetCurrentDirectory()) + .UseIISIntegration() + .UseStartup() + .Build(); + + private static async Task EnsureDataStorageIsReady(IServiceProvider services) + { + await CoreEFStartup.InitializeDatabaseAsync(services); + await SimpleContentEFStartup.InitializeDatabaseAsync(services); + await LoggingEFStartup.InitializeDatabaseAsync(services); + } +} diff --git a/Server/Data/CoreEFStartup.cs b/Server/Data/CoreEFStartup.cs new file mode 100644 index 00000000..d3947ef1 --- /dev/null +++ b/Server/Data/CoreEFStartup.cs @@ -0,0 +1,17 @@ +using System; +using System.Threading.Tasks; +using Microsoft.Extensions.DependencyInjection; + +namespace AspCoreServer.Data +{ + public static class CoreEFStartup + { + public static async Task InitializeDatabaseAsync(IServiceProvider services) + { + var context = services.GetRequiredService(); + + await context.Database.EnsureCreatedAsync(); + } + + } +} diff --git a/Server/Data/LoggingEFStartup.cs b/Server/Data/LoggingEFStartup.cs new file mode 100644 index 00000000..edf33498 --- /dev/null +++ b/Server/Data/LoggingEFStartup.cs @@ -0,0 +1,13 @@ +using System; +using System.Threading.Tasks; + +namespace AspCoreServer.Data +{ + public static class LoggingEFStartup + { + public static async Task InitializeDatabaseAsync(IServiceProvider services) + { + //Implent to your hearts' content + } + } +} diff --git a/Server/Data/DbInitializer.cs b/Server/Data/SimpleContentEFStartup.cs similarity index 67% rename from Server/Data/DbInitializer.cs rename to Server/Data/SimpleContentEFStartup.cs index 919c9282..db160dee 100644 --- a/Server/Data/DbInitializer.cs +++ b/Server/Data/SimpleContentEFStartup.cs @@ -1,16 +1,20 @@ using System; -using System.Linq; -using AspCoreServer; +using System.Threading.Tasks; using AspCoreServer.Models; using Microsoft.EntityFrameworkCore; using Microsoft.Extensions.DependencyInjection; -namespace AspCoreServer.Data { - public static class DbInitializer { - public static void Initialize (SpaDbContext context) { - context.Database.EnsureCreated (); +namespace AspCoreServer.Data +{ + public static class SimpleContentEFStartup + { + public static async Task InitializeDatabaseAsync(IServiceProvider services) + { + var context = services.GetRequiredService(); - if (context.User.Any ()) { + + if (await context.User.AnyAsync()) + { return; // DB has been seeded } var users = new User[] { @@ -27,11 +31,9 @@ public static void Initialize (SpaDbContext context) { new User () { Name = "Gaulomatic" }, new User () { Name = "GRIMMR3AP3R" } }; + await context.User.AddRangeAsync(users); - foreach (var s in users) { - context.User.Add (s); - } - context.SaveChanges (); + await context.SaveChangesAsync(); } } }