title: angular 2 styleurls not working
body: <p>I'm not sure what is missing here.  I've followed the guide at <a href="https://angular.io/guide/component-styles" rel="nofollow noreferrer">https://angular.io/guide/component-styles</a> for using component style URLs. But when I run the component, the styles aren't being applied.  However, if I use component inline styles it works.</p>
  
  <h3>training.component.ts</h3>
  
  <pre><code>@Component({
  templateUrl: './training.component.html',
  styleUrls: ['./training.component.css']
  })
  </code></pre>
  
  <h3>training.component.html</h3>
  
  <pre><code>&lt;p class="notification-message" style="margin-bottom:10px;"&gt;IMPORTANT NOTE: You must click the “I agree” box and press the Finish button on the last page of this document in order to receive credit for completing this training module&lt;/p&gt;    
  </code></pre>
  
  <h3>training.component.css</h3>
  
  <pre><code>.notification-message {
  border: 2px solid black;
  background-color: #ffff00;
  color: #ff0000;
  width: 100%;
  text-align: left;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  font-size: 11px;
  font-family: Verdana, Helvetica, Sans-Serif;
  font-weight: bold;
  }
  </code></pre>
  
  <h3>webpack.common.js</h3>
  
  <pre><code>module: {
      rules: [
        {
            test: /\.ts$/,
            loaders: [
              {
                  loader: 'awesome-typescript-loader',
                  options: { configFileName: helpers.root('', 'tsconfig.json') }
              }, 'angular2-template-loader'
            ]
        },
  
        {test: /\.html$/,loader: 'html-loader'},
        { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, loader: 'url-loader' },
        { test: /\.css$/, loader: 'raw-loader!css-loader' }
  
      ]
  },
  
  plugins: [
  
   new CleanWebpackPlugin(['built'], { root: '' }),
  
     //Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./scripts/app'), // location of your src
      {} // a map of your routes
    ),
  
    new webpack.optimize.CommonsChunkPlugin({
        name: "commoncode",        
        filename: "commoncode.js",
        chunks: ["app", "vendor", 'kendoVendor'],
        minChunks: Infinity,
    }),
  
  
     new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
     })
  
     /*in order to automatically load bundled js files on layout page, use this plugin and do appropriate changes.
      new HtmlWebpackPlugin({
          inject: false,
          template: './Views/Shared/_LayoutTemplate.cshtml',
          filename: './Views/Shared/_Layout.cshtml'
      })*/
  ]
  </code></pre>
  
  <p>Component Inline Style that works</p>
  
  <pre><code>@Component({
  templateUrl: './training.component.html',
  styles: [`
  .notification-message {
  border: 2px solid black;
  background-color: #ffff00;
  color: #ff0000;
  width: 100%;
  text-align: left;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  font-size: 11px;
  font-family: Verdana, Helvetica, Sans-Serif;
  font-weight: bold;
  }`]})
  </code></pre>