Adding PrimeNG, CSS, and SASS

It's time to finish the setup. First, make sure that you have PrimeNG and FontAwesome dependencies in the package.json file. For example:

"primeng": "~2.0.2",
"font-awesome": "~4.7.0"

Second, bundle all CSS files into one file. This task is accomplished by ExtractTextPlugin, which is needed for loaders and plugin configuration:

{test: /.css$/, loader: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
  })
},
{test: /.scss/, loader: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: ['css-loader', 'sass-loader']
  }),
  exclude: /^_.*.scss/
}
...
plugins: [
  new ExtractTextPlugin({
    filename: "[name].css"  // file name of the bundle
  }),
  ...
]

We prefer not to use styleUrls in the components. The seed project imports a CSS und SASS files in one place--inside of main.scss file located under src/assets/css:

// vendor files (imported from node_modules)
@import "~primeng/resources/themes/bootstrap/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.min.css";

// base project stuff (common settings)
@import "global";

// specific styles for components
@import "../../app/app.component";
@import "../../app/section/section.component";

Note that the tilde ~ points to the node_modules. More precisely the Sass preprocessor interprets it as the node_modules folder. Sass is explained in Chapter 2, Theming Concepts and Layouts. The main.scss file should be imported in the entry points main.jit.ts and main.aot.ts:

import './assets/css/main.scss';

Webpack takes care of the rest. There are more goodies from Webpack--a development server with live reloading webpack-dev-server (https://webpack.js.org/configuration/dev-server). It detects changes made to files and recompiles automatically. You can start it with npm start or npm run start:prod. These commands represent npm scripts:

"start": webpack-dev-server --config config/webpack.dev.js --inline --open
"start:prod": webpack-dev-server --config config/webpack.prod.js --inline --open

That's all. More configuration options for unit and end-to-end testing will be added in Chapter 10, Creating Robust Applications.