On initial page load, the site runs fine and loads the proper data, but when I try to change some of the content, and check to see if hot-reloading is working, it throws these errors.
Error: The selector "app" did not match any elements
at DomRenderer.selectRootElement (eval at <anonymous> (http://localhost:8080/js/vendor.js:1129:1), <anonymous>:196:23) [angular]
at DebugDomRenderer.selectRootElement (eval at <anonymous> (http://localhost:8080/js/vendor.js:2480:1), <anonymous>:47:56) [angular]
at selectOrCreateRenderHostElement (eval at <anonymous> (http://localhost:8080/js/vendor.js:748:1), <anonymous>:509:32) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:13:16) [angular]
at CompiledTemplate.proxyViewClass.AppView.createHostView (eval at <anonymous> (http://localhost:8080/js/vendor.js:2529:1), <anonymous>:121:21) [angular]
Since it's loading on the initial load, I'll just post my package.json and webpack.config.js. If more files are needed, I'll post them ASAP.
Any help or guidance is greatly appreciated.
Here's my package.json. I'm running npm run watch in one console and npm run start:hmr in another console.
{
"name": "site-pinger",
"version": "1.0.0",
"description": "",
"author": "",
"license": "ISC",
"scripts": {
"clean": "rimraf node_modules doc dist && npm cache clean",
"clean-install": "npm run clean && npm install",
"clean-start": "npm run clean-install && npm start",
"watch": "webpack --watch --progress --profile",
"build": "rimraf dist && webpack --progress --profile --bail",
"server": "webpack-dev-server --inline --progress --port 8080",
"webdriver-update": "webdriver-manager update",
"webdriver-start": "webdriver-manager start",
"lint": "tslint --force \"src/**/*.ts\"",
"e2e": "protractor",
"e2e-live": "protractor --elementExplorer",
"pretest": "npm run lint",
"test": "karma start",
"posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
"test-watch": "karma start --no-single-run --auto-watch",
"ci": "npm run e2e && npm run test",
"docs": "typedoc --options typedoc.json src/app/app.component.ts",
"start": "npm run server",
"start:hmr": "npm run server -- --hot",
"postinstall": "npm run webdriver-update"
},
"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^3.0.2",
"@types/jasmine": "2.5.41",
"@types/node": "^6.0.38",
"@types/selenium-webdriver": "2.53.39",
"@types/lodash": "4.14.50",
"angular2-template-loader": "^0.6.0",
"autoprefixer": "^6.3.2",
"awesome-typescript-loader": "^3.0.0-beta.17",
"codelyzer": "2.0.0",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.10.0",
"html-loader": "^0.4.0",
"html-webpack-plugin": "^2.8.1",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^3.2.0",
"json-loader": "^0.5.3",
"karma": "1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.3",
"karma-remap-istanbul": "0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.2",
"node-sass": "^4.5.0",
"null-loader": "0.1.1",
"postcss-loader": "^1.1.0",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.4",
"rimraf": "^2.5.1",
"sass-loader": "^6.0.1",
"shelljs": "^0.7.0",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"tslint": "^4.3.1",
"tslint-loader": "^3.3.0",
"typedoc": "^0.5.1",
"typescript": "2.0.10",
"url-loader": "^0.5.6",
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0"
},
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"repository": {}
}
Here's my webpack.config.js
// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');
// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
/**
* Env
* Get npm lifecycle event to identify the environment
*/
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build:watch';
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Devtool
* Reference: http://webpack.github.io/docs/configuration.html#devtool
* Type of sourcemap to use per build type
*/
if (isProd) {
config.devtool = 'source-map';
}
else if (isTest) {
config.devtool = 'inline-source-map';
}
else {
config.devtool = 'eval-source-map';
}
if (!isTest) {
/**
* Entry
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};
}
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8080/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};
/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
// only discover files that have those extensions
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
};
var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
rules: [
// Support for .ts files.
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// copy those assets to output
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
},
// Support for *.json files.
{test: /\.json$/, loader: 'json-loader'},
// Support for CSS as raw text
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.css$/,
exclude: root('src', 'app'),
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader']})
},
// all css required in src/app files will be merged in js files
{test: /\.css$/, include: root('src', 'app'), loader: 'raw-loader!postcss-loader'},
// support for .scss files
// use 'null' loader in test mode (https://github.com/webpack/null-loader)
// all css in src/style will be bundled in an external css file
{
test: /\.(scss|sass)$/,
exclude: root('src', 'app'),
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader']})
},
// all css required in src/app files will be merged in js files
{test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'},
// support for .html as raw text
// todo: change the loader to something that adds a hash to images
{test: /\.html$/, loader: 'raw-loader', exclude: root('src', 'index.html')}
]
};
if (isTest && !isTestWatch) {
// instrument only testing sources with Istanbul, covers ts files
config.module.rules.push({
test: /\.ts$/,
enforce: 'post',
include: path.resolve('src'),
loader: 'istanbul-instrumenter-loader',
exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
});
}
if (!isTest || !isTestWatch) {
// tslint support
config.module.rules.push({
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader'
});
}
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),
// Workaround needed for angular 2 angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
),
// Tslint configuration for webpack 2
new webpack.LoaderOptionsPlugin({
options: {
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
tslint: {
emitErrors: false,
failOnHint: false
},
/**
* Sass
* Reference: https://github.com/jtangelder/sass-loader
* Transforms .scss files to .css
*/
sassLoader: {
//includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
},
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
postcss: [
autoprefixer({
browsers: ['last 2 version']
})
]
}
})
];
if (!isTest && !isTestWatch) {
config.plugins.push(
// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),
// Inject script and link tags into html files
// Reference: https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
template: './index.html',
chunksSortMode: 'dependency'
}),
// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
);
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoEmitOnErrorsPlugin(),
// // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// // Dedupe modules in the output
// new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: root('src/public')
}])
);
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: http://webpack.github.io/docs/webpack-dev-server.html
*/
config.devServer = {
contentBase: './src/public',
historyApiFallback: true,
quiet: true,
stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose
};
return config;
}();
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
via
qbolt
