I currently have an Angular application (v4.0.1) using webpack and deployed to Heroku. I have a boot counter configured to display on the page while the application is loading. I'm currently set up so that it works locally, but for some reason, when I deploy the hero, the boot counter (or rather, CSS to rotate the bootloader) does not seem to get pulled.
I tried a number of possible fixes, but it's hard for me to determine what I need to change to get this to work in production, and everything I found in stackoverflow seems to work only locally. I should also clarify that all my css files in the application (as in the styles of components loaded after the application loads) work fine, this is only one css file that I included in index.html specifically for the loading counter that should be available before the application loads Angular
My file structure (simplified):
.
+
+
| +
| +
| +
| +
| +
| +
| +
| +
| +
| +
| +
+
+
My index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Stylist Suite 2.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="src/assets/stylesheets/loading-spinner.css">
</head>
<body>
<ss-app>
<div class="loading-spinner ss-loading"></div>
</ss-app>
</body>
</html>
File load-spinner.css:
.loading-spinner {
width: 42px;
height: 44px;
background: url("../icons/loading-spinner.svg") no-repeat;
margin: 0 auto;
animation: spin 2.5s linear infinite;
-webkit-animation: spin 2.5s linear infinite;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-spinner .ss-loading {
position: fixed;
top:50%;
left:50%;
margin-left:-21px;
margin-top: -22px;
align-self: center;
justify-self: center;
}
My webpack.common.js (located in config /)
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({ loader: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'assets'),
loader: ExtractTextPlugin.extract({ loader: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /\.css$/,
include: helpers.root('src', 'assets'),
loader: 'raw-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['to-string-loader', 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('src', 'tsconfig.json') }
}, 'angular2-template-loader'
]
}
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src'),
{}
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
My webpack.dev.js (located in config /)
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:4200/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.DefinePlugin({
'process.env.API_APPLICATION_ID': JSON.stringify(""),
'process.env.REDIRECT_URL': JSON.stringify("http://localhost:4200/login"),
'process.env.API_BASE_URL': JSON.stringify("http://localhost:3000"),
'process.env.SITE_URL': JSON.stringify("http://localhost:3000")
})
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
My webpack.prod.js (located in config /)
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env.API_APPLICATION_ID': JSON.stringify(process.env.API_APPLICATION_ID),
'process.env.REDIRECT_URL': JSON.stringify(process.env.REDIRECT_URL),
'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
'process.env.SITE_URL': JSON.stringify(process.env.REDIRECT_URL)
}),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false
}
})
]
});
, ( , ) , , css webpack.common.js. , webpack.prod.js, , , , , , load-spinner.css . .