From a5509b86e4d566870cfcf8a2402a3f8abeec404a Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Tue, 1 Mar 2016 00:40:37 +0000 Subject: [PATCH] In Angular 2 template, always load CSS via ExtractTextPlugin (otherwise you get a bad FOUC when loading server-prerendered page) --- templates/Angular2Spa/ClientApp/boot-client.ts | 1 + .../Angular2Spa/ClientApp/components/app/app.css | 6 ------ .../Angular2Spa/ClientApp/components/app/app.ts | 1 - .../ClientApp/components/nav-menu/nav-menu.ts | 3 +-- .../nav-menu/nav-menu.css => styles/site.css} | 8 +++++++- templates/Angular2Spa/Views/Shared/_Layout.cshtml | 6 ++---- templates/Angular2Spa/webpack.config.dev.js | 7 +------ templates/Angular2Spa/webpack.config.js | 14 ++++++++++---- templates/Angular2Spa/webpack.config.prod.js | 8 -------- 9 files changed, 22 insertions(+), 32 deletions(-) delete mode 100644 templates/Angular2Spa/ClientApp/components/app/app.css rename templates/Angular2Spa/ClientApp/{components/nav-menu/nav-menu.css => styles/site.css} (87%) diff --git a/templates/Angular2Spa/ClientApp/boot-client.ts b/templates/Angular2Spa/ClientApp/boot-client.ts index 63f365f..7efdb66 100644 --- a/templates/Angular2Spa/ClientApp/boot-client.ts +++ b/templates/Angular2Spa/ClientApp/boot-client.ts @@ -1,4 +1,5 @@ import 'bootstrap/dist/css/bootstrap.css'; +import './styles/site.css'; import { bootstrap } from 'angular2/platform/browser'; import { FormBuilder } from 'angular2/common'; diff --git a/templates/Angular2Spa/ClientApp/components/app/app.css b/templates/Angular2Spa/ClientApp/components/app/app.css deleted file mode 100644 index 6392600..0000000 --- a/templates/Angular2Spa/ClientApp/components/app/app.css +++ /dev/null @@ -1,6 +0,0 @@ -@media (max-width: 767px) { - /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */ - .body-content { - padding-top: 50px; - } -} diff --git a/templates/Angular2Spa/ClientApp/components/app/app.ts b/templates/Angular2Spa/ClientApp/components/app/app.ts index 1cd9a19..7d6b48f 100644 --- a/templates/Angular2Spa/ClientApp/components/app/app.ts +++ b/templates/Angular2Spa/ClientApp/components/app/app.ts @@ -16,7 +16,6 @@ import { Counter } from '../counter/counter'; ]) @ng.View({ template: require('./app.html'), - styles: [require('./app.css')], directives: [NavMenu, router.ROUTER_DIRECTIVES] }) export class App { diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts index c89b573..938f2fe 100644 --- a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts +++ b/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts @@ -6,8 +6,7 @@ import * as router from 'angular2/router'; }) @ng.View({ template: require('./nav-menu.html'), - directives: [router.ROUTER_DIRECTIVES], - styles: [require('./nav-menu.css')] + directives: [router.ROUTER_DIRECTIVES] }) export class NavMenu { } diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css b/templates/Angular2Spa/ClientApp/styles/site.css similarity index 87% rename from templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css rename to templates/Angular2Spa/ClientApp/styles/site.css index 649b110..0cb87fb 100644 --- a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.css +++ b/templates/Angular2Spa/ClientApp/styles/site.css @@ -1,3 +1,10 @@ +@media (max-width: 767px) { + /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */ + .body-content { + padding-top: 50px; + } +} + .main-nav li .glyphicon { margin-right: 10px; } @@ -10,7 +17,6 @@ color: white; } - /* Keep the nav menu independent of scrolling and on top of other items */ .main-nav { position: fixed; diff --git a/templates/Angular2Spa/Views/Shared/_Layout.cshtml b/templates/Angular2Spa/Views/Shared/_Layout.cshtml index a94428f..72a3ea2 100644 --- a/templates/Angular2Spa/Views/Shared/_Layout.cshtml +++ b/templates/Angular2Spa/Views/Shared/_Layout.cshtml @@ -5,10 +5,8 @@ @ViewData["Title"] - WebApplicationBasic - - - - + + @RenderBody() diff --git a/templates/Angular2Spa/webpack.config.dev.js b/templates/Angular2Spa/webpack.config.dev.js index 91b645f..719de1f 100644 --- a/templates/Angular2Spa/webpack.config.dev.js +++ b/templates/Angular2Spa/webpack.config.dev.js @@ -1,8 +1,3 @@ module.exports = { - devtool: 'inline-source-map', - module: { - loaders: [ - { test: /\.css/, exclude: /ClientApp/, loader: 'style!css' } - ] - } + devtool: 'inline-source-map' }; diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js index fffc40f..03458d5 100644 --- a/templates/Angular2Spa/webpack.config.js +++ b/templates/Angular2Spa/webpack.config.js @@ -1,6 +1,9 @@ var path = require('path'); var webpack = require('webpack'); var merge = require('extendify')({ isDeep: true, arrays: 'concat' }); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var extractSiteCSS = new ExtractTextPlugin('styles.css'); +var extractVendorCSS = new ExtractTextPlugin('vendor.css'); var devConfig = require('./webpack.config.dev'); var prodConfig = require('./webpack.config.prod'); var isDevelopment = process.env.ASPNET_ENV === 'Development'; @@ -13,13 +16,14 @@ module.exports = merge({ loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, - { test: /\.css$/, include: /ClientApp/, loader: 'raw-loader' }, - { test: /\.html$/, loader: 'raw-loader' } + { test: /\.html$/, loader: 'raw-loader' }, + { test: /\.css/, include: /bootstrap/, loader: extractVendorCSS.extract(['css']) }, + { test: /\.css/, exclude: /bootstrap/, loader: extractSiteCSS.extract(['css']) }, ] }, entry: { main: ['./ClientApp/boot-client.ts'], - vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser'] + vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser'] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), @@ -29,6 +33,8 @@ module.exports = merge({ plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) new webpack.optimize.OccurenceOrderPlugin(), - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') // Moves vendor content out of other bundles + new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), // Moves vendor content out of other bundles + extractSiteCSS, + extractVendorCSS ] }, isDevelopment ? devConfig : prodConfig); diff --git a/templates/Angular2Spa/webpack.config.prod.js b/templates/Angular2Spa/webpack.config.prod.js index 17c70f3..3180105 100644 --- a/templates/Angular2Spa/webpack.config.prod.js +++ b/templates/Angular2Spa/webpack.config.prod.js @@ -1,15 +1,7 @@ var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('site.css'); module.exports = { - module: { - loaders: [ - { test: /\.css/, exclude: /ClientApp/, loader: extractCSS.extract(['css']) }, - ] - }, plugins: [ - extractCSS, new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: false // Due to https://github.com/angular/angular/issues/6678