feat: css loader for angular modules

Author: Felix Gladisch

config/webpack.common.js

@@ -34,36 +34,42 @@ module.exports = () => {
         // Compiles all .ts files
         {
           test: /\.ts$/,
-          loaders: isProd ? ['@ngtools/webpack'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
+          use: isProd ? ['@ngtools/webpack'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'],
           exclude: /\.spec\.ts$/
         },
         // Injects all html templates into their components and loads referenced assets
         {
           test: /\.html$/,
-          loader: 'html-loader',
+          use: 'html-loader',
           exclude: helpers.root('src', 'index.html')
         },
         // Copies all images and fonts into dist/assets
         {
           test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
-          loader: 'file-loader?name=assets/[name].[ext]'
+          use: 'file-loader?name=assets/[name].[ext]'
         },
         // Puts all styles from assets/styles/main.scss in a separate file
         {
           test: /\.scss$/,
-          exclude: helpers.root('src', 'app'),
-          loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
+          use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
+          exclude: helpers.root('src', 'app')
         },
         // Injects all angular styles into their components
         {
           test: /\.scss$/,
-          include: helpers.root('src', 'app'),
-          loaders: ['raw-loader', 'sass-loader']
+          use: ['raw-loader', 'sass-loader'],
+          include: helpers.root('src', 'app')
+        },
+        // To string and css loader support for *.css files (from Angular components)
+        {
+          test: /\.css$/,
+          use: ['to-string-loader', 'css-loader'],
+          include: helpers.root('node_modules')
         },
         // Loads all "required" json files into their components
         {
           test: /\.json$/,
-          loader: 'json-loader'
+          use: 'json-loader'
         }
       ]
     },

package.json

@@ -1,17 +1,20 @@
 {
   "name": "angular2-webpack-seed",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "scripts": {
     "start": "webpack-dev-server --inline --progress --port 3000",
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
     "test": "karma start",
-    "lint": "tslint 'src/**/*.ts' --type-check --project tsconfig.json",
+    "lint": "tslint 'src/**/*.ts' --type-check --project tsconfig.json -e src/main-aot.ts",
     "aot": "rimraf aot && ngc -p tsconfig-aot.json"
   },
   "keywords": [
-    "angular2",
-    "webpack",
-    "typescript"
+    "angular",
+    "typescript",
+    "bootstrap",
+    "karma",
+    "jasmine",
+    "webpack"
   ],
   "author": "Felix Gladisch <felix@felixgladisch.de>",
   "homepage": "https://github.com/fgladisch/angular2-webpack-seed",
@@ -24,52 +27,53 @@
     "url": "https://github.com/fgladisch/angular2-webpack-seed/issues"
   },
   "dependencies": {
-    "@angular/common": "4.3.5",
-    "@angular/compiler": "4.3.5",
-    "@angular/core": "4.3.5",
-    "@angular/forms": "4.3.5",
-    "@angular/http": "4.3.5",
-    "@angular/platform-browser": "4.3.5",
-    "@angular/platform-browser-dynamic": "4.3.5",
-    "@angular/router": "4.3.5",
-    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.1",
+    "@angular/common": "4.3.6",
+    "@angular/compiler": "4.3.6",
+    "@angular/core": "4.3.6",
+    "@angular/forms": "4.3.6",
+    "@angular/http": "4.3.6",
+    "@angular/platform-browser": "4.3.6",
+    "@angular/platform-browser-dynamic": "4.3.6",
+    "@angular/router": "4.3.6",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.3",
     "@ngx-translate/core": "7.2.0",
     "@ngx-translate/http-loader": "1.0.2",
     "bootstrap": "4.0.0-beta",
     "core-js": "2.5.0",
     "rxjs": "5.4.3",
-    "zone.js": "0.8.16"
+    "zone.js": "0.8.17"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "4.3.5",
-    "@ngtools/webpack": "1.6.1",
+    "@angular/compiler-cli": "4.3.6",
+    "@ngtools/webpack": "1.6.2",
     "@types/core-js": "0.9.43",
     "@types/jasmine": "2.5.54",
-    "@types/node": "8.0.24",
+    "@types/node": "8.0.26",
     "angular2-template-loader": "0.6.2",
     "awesome-typescript-loader": "3.2.3",
     "codelyzer": "3.1.2",
     "compression-webpack-plugin": "1.0.0",
     "copy-webpack-plugin": "4.0.1",
-    "css-loader": "0.28.5",
+    "css-loader": "0.28.7",
     "extract-text-webpack-plugin": "3.0.0",
     "file-loader": "0.11.2",
     "html-loader": "0.5.1",
     "html-webpack-plugin": "2.30.1",
-    "jasmine-core": "2.7.0",
+    "jasmine-core": "2.8.0",
     "json-loader": "0.5.7",
-    "karma": "1.7.0",
+    "karma": "1.7.1",
     "karma-jasmine": "1.1.0",
-    "karma-mocha-reporter": "2.2.3",
+    "karma-mocha-reporter": "2.2.4",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.4",
     "node-sass": "4.5.3",
     "raw-loader": "0.5.1",
     "rimraf": "2.6.1",
     "sass-loader": "6.0.6",
+    "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
-    "tslint": "5.6.0",
+    "tslint": "5.7.0",
     "typescript": "2.4.2",
     "webpack": "3.5.5",
     "webpack-dev-server": "2.7.1",