TypeError: Cannot read property of Selector-Matcher - asp.net

I am working on an Angular2 & ASP.NET Core project with webpack and I suddenly get an error. I didn't have this error yesterday and I didn't make any changes today. Does anyone have an idea what the problem is?
Exception: Call to Node module failed with error: TypeError: Cannot read property 'SelectorMatcher' of undefined
at Object. (C:\Users\john\Desktop\WORKSHOP...\node_modules\angular2-platform-node__private_imports__.js:21:54)
My package.json
{
"name": "Angular2Workshop",
"version": "0.1.0",
"description": "A simple application with an Angular 2 app and a Asp.Net Core Backend",
"license": "UNLICENSED",
"scripts": {
"test": "./node_modules/.bin/karma start",
"postinstall": "typings install && npm uninstall selenium-webdriver"
},
"dependencies": {
"#angular/common": "^2.0.0",
"#angular/compiler": "^2.0.0",
"#angular/core": "^2.0.0",
"#angular/forms": "^2.0.0",
"#angular/http": "^2.0.0",
"#angular/platform-browser": "^2.0.0",
"#angular/platform-browser-dynamic": "^2.0.0",
"#angular/platform-server": "^2.0.0",
"#angular/router": "^3.0.0",
"#types/node": "^6.0.38",
"angular2-platform-node": "~2.0.10",
"angular2-universal": "~2.0.10",
"angular2-universal-polyfills": "~2.0.10",
"aspnet-prerendering": "^1.0.6",
"aspnet-webpack": "^1.0.11",
"bootstrap": "^3.3.7",
"css": "^2.2.1",
"css-loader": "^0.25.0",
"es6-shim": "^0.35.1",
"es7-reflect-metadata": "^1.4.0",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"rxjs": "5.0.0-beta.12",
"style-loader": "^0.13.0",
"to-string-loader": "^1.1.5",
"ts-loader": "^0.8.2",
"typescript": "^2.0.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-externals-plugin": "^1.0.0",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.14.1",
"webpack-node-externals": "^1.5.4",
"zone.js": "^0.6.21"
},
"devDependencies": {
"#types/jasmine": "^2.5.35",
"copy-webpack-plugin": "^0.3.3",
"css-loader": "^0.23.0",
"exports-loader": "0.6.2",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^1.7.0",
"http-server": "^0.8.5",
"imports-loader": "^0.6.4",
"istanbul-instrumenter-loader": "^0.1.3",
"json-loader": "^0.5.3",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.1",
"karma-coverage": "^0.5.3",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.1",
"karma-sourcemap-loader": "^0.3.6",
"karma-webpack": "1.7.0",
"phantomjs": "^1.9.18",
"phantomjs-polyfill": "0.0.1",
"protractor": "^3.0.0",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.2",
"remap-istanbul": "^0.5.1",
"rimraf": "^2.4.4",
"style-loader": "^0.13.0",
"ts-helper": "0.0.1",
"ts-loader": "^0.7.2",
"tsconfig-lint": "^0.4.3",
"tslint": "^3.2.0",
"tslint-loader": "^2.1.0",
"typedoc": "^0.3.12",
"typescript": "^1.7.3",
"typings": "^1.4.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.12.1",
"webpack-md5-hash": "0.0.4"
}
}
My webpack.config
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
resolve: { extensions: [ '', '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
]
}
};
// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot-client.ts' },
output: { path: path.join(__dirname, './wwwroot/dist') },
devtool: isDevBuild ? 'inline-source-map' : null,
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin()
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
entry: { 'main-server': './ClientApp/boot-server.ts' },
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map',
externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});
module.exports = [clientBundleConfig, serverBundleConfig];

Try to use 2.0.0 version
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/platform-server": "2.0.0"
I think it is some issue with Angular2.1.1
https://github.com/aspnet/JavaScriptServices/issues/406

Related

Angular 12 data binding problems

I have a project migrated to angular 12.2 with the package.json file configured like this:
{
"name": "xxxx",
"version": "1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "~12.2.0",
"#angular/cdk": "^12.2.11",
"#angular/common": "~12.2.0",
"#angular/compiler": "~12.2.0",
"#angular/core": "~12.2.0",
"#angular/forms": "~12.2.0",
"#angular/platform-browser": "~12.2.0",
"#angular/platform-browser-dynamic": "~12.2.0",
"#angular/router": "~12.2.0",
"#angularclass/hmr": "^3.0.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/geojson": "^7946.0.8",
"#types/googlemaps": "^3.39.12",
"angular-2-local-storage": "^3.0.2",
"angular2-highcharts": "^0.5.5",
"angular2-query-builder": "^0.6.2",
"animate.css": "^4.1.1",
"chart.js": "^3.6.0",
"core-js": "^3.19.0",
"d3-array": "^3.1.1",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.10.0",
"geojson": "^0.5.0",
"gzip-all": "^1.0.0",
"highcharts": "^9.3.0",
"jexl": "^2.3.0",
"jquery": "^3.6.0",
"jsbarcode": "^3.11.5",
"moment": "^2.29.1",
"nanoscroller": "^0.8.7",
"ng2-dragula": "^2.1.1",
"ngx-localized-numbers": "^0.4.1",
"ngx-schema-form": "^2.6.6",
"node-sass": "^6.0.1",
"pg": "^8.7.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.1",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"ts-helpers": "^1.1.2",
"tslib": "^2.3.0",
"typescript": "^4.2.4",
"uuid": "^8.3.2",
"venn.js": "^0.2.20",
"xlsx": "^0.17.3",
"z-schema": "^4.2.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.2.11",
"#angular/cli": "~12.2.11",
"#angular/compiler-cli": "~12.2.0",
"#angular/language-service": "^12.2.11",
"#types/angular": "^1.8.3",
"#types/jasmine": "~3.8.0",
"#types/jasminewd2": "^2.0.10",
"#types/jquery": "^3.5.8",
"#types/node": "^12.20.36",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"protractor": "^7.0.0",
"ts-node": "^10.4.0"
}
}
The tsconfig.app.json file is configured like this:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": ["googlemaps","jquery","node"]
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
The tsconfig.json file is configured like this:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2018","dom"],
"module": "es2020",
"moduleResolution": "node",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"target": "es2017",
"typeRoots": ["./node_modules/#types"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true,
//"enableIvy": false,
"strictDomEventTypes": false
}
}
Unfortunately, no data binding is done on any variable of any view, why?
I am using the same configuration on an angular 10 project and everything works fine.
Thanks.
At this time I solved it like this:
example I replaced {{variable}} with <span [innerText]="variable"></span>
However I didn't understand why I can't use {{variable}} syntax ... I hope someone can help me.
Thanks.

Can't get CSS modules to work in Webpack

I'm having issues getting CSS modules to work in Webpack. I'm trying to use react-day-picker with custom styles. When I log the imported CSS module to see the class name mapping I get undefined. The DayPicker component is not receiving any of the classNames. My Webpack loaders config:
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } },
"sass-loader"
],
exclude: ["node_modules"]
},
// ...
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } }
],
exclude: ["node_modules"]
},
// ...
The way I'm trying to import the css module:
import calendarStyles from './cardCalendar.css';
const Calendar = props => {
console.log("CALENDAR STYLES", calendarStyles);
return(
<div className="profile-component-calendar">
<div className="component-title">Calendar</div>
{props.calendarDropdownConfig.items && (
<CalendarInfoDropdown {...props.calendarDropdownConfig} />
)}
<div id="calendar-card-component" style={someStyle}>
<DayPicker
{...props}
classNames={calendarStyles}
showWeekNumbers
firstDayOfWeek={1}
/>
</div>
</div>
)
} ;
Project dependencies:
"dependencies": {
"#navjobs/upload": "^3.0.7",
"body-parser": "^1.17.2",
"bootstrap": "^3.3.7",
"cfenv": "^1.0.4",
"change-case": "^3.0.1",
"docxtemplater": "^3.1.7",
"dotenv": "^4.0.0",
"dotenv-webpack": "^1.5.4",
"express": "^4.15.4",
"express-session": "^1.15.5",
"file-saver": "^1.3.3",
"helmet": "^3.8.1",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"jszip": "^2.6.1",
"mathjs": "^3.16.3",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"node-sass": "^4.5.3",
"prop-types": "^15.5.10",
"rc-slider": "^8.3.1",
"rc-tooltip": "^3.4.8",
"react": "^16.2.0",
"react-addons-shallow-compare": "^15.6.2",
"react-autocomplete": "^1.7.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-daterangepicker": "^3.4.1",
"react-day-picker": "^7.0.7",
"react-dom": "^16.2.0",
"react-dropzone": "^4.0.0",
"react-images": "^0.5.5",
"react-intl": "^2.3.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-select": "^1.0.0-rc.5",
"react-spinkit": "^3.0.0",
"react-stepzilla": "^4.6.3",
"react-toggle": "^4.0.2",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
"sass-loader": "^6.0.2",
"styled-components": "^2.1.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.25.0",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.28.4",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-prettier": "^2.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-jsx-a11y": "^5.0.1",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"flow-bin": "^0.56.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.3.1",
"immutability-helper": "^2.3.1",
"imports-loader": "^0.7.1",
"jest-cli": "^21.1.0",
"json-loader": "^0.5.7",
"lodash": "^4.17.4",
"loglevel": "^1.4.1",
"morgan": "^1.8.2",
"postcss-loader": "^2.0.6",
"prettier": "^1.5.3",
"prettier-eslint": "^6.4.2",
"ramda": "^0.24.1",
"react-addons-test-utils": "^15.6.0",
"react-content-loader": "^1.4.0",
"react-helmet": "^5.2.0",
"react-hot-loader": "^3.0.0-beta.6",
"react-loadable": "^4.0.5",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"wallaby-webpack": "^0.0.40",
"webpack": "^3.5.4",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.7.1"
},
As far as I can see, I'm doing the import as described in https://github.com/webpack-contrib/css-loader. Can anyone see what I'm doing wrong?
Try this way for className. Div should get profile-component-calendar class style.
<div className={calendarStyles.profile-component-calendar}>

Cannot find module "popper.js" Angular 5 Visual Studio 2017 asp.net core

I updated my Angular's verision from 4 to 5. Below is the screenshot, I followed the instruction as per the link http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/
package.json file
{
"name": "VotingWebsite",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"#angular/animations": "5.2.1",
"#angular/common": "5.2.1",
"#angular/compiler": "5.2.1",
"#angular/compiler-cli": "5.2.1",
"#angular/core": "5.2.1",
"#angular/forms": "5.2.1",
"#angular/http": "5.2.1",
"#angular/platform-browser": "5.2.1",
"#angular/platform-browser-dynamic": "5.2.1",
"#angular/platform-server": "5.2.1",
"#angular/router": "5.2.1",
"#ngtools/webpack": "1.9.5",
"#types/chai": "4.1.1",
"#types/jasmine": "2.8.5",
"#types/webpack-env": "1.13.3",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.4.1",
"popper.js": "^1.12.5",
"bootstrap": "4.0.0",
"chai": "4.1.2",
"css": "2.2.1",
"css-loader": "0.28.9",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.12",
"expose-loader": "0.7.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.9.1",
"jquery": "3.3.1",
"json-loader": "0.5.7",
"karma": "2.0.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.1",
"karma-webpack": "2.0.9",
"preboot": "6.0.0-beta.1",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.12",
"rxjs": "5.5.6",
"style-loader": "0.19.1",
"to-string-loader": "1.1.5",
"typescript": "2.6.2",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-hot-middleware": "2.21.0",
"webpack-merge": "4.1.1",
"zone.js": "0.8.20"
}
}
I am getting an error as
Uncaught Error: Cannot find module "popper.js"
at webpackMissingModule (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82252)
at vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82252
at Object.<anonymous> (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:82255)
at __webpack_require__ (vendor.js?v=g866IhqI_4JvgibiHgn9GiAXKfG42-s7C9LGGfxA0Tk:sourcemap:21)
at Object.<anonymous> (bootstrap.js from dll-reference vendor_19596f3f8868cecda14a:1)
at __webpack_require__ (bootstrap acba0f7e8b1985fd75ba:678)
at fn (bootstrap acba0f7e8b1985fd75ba:88)
at Object.<anonymous> (process-update.js:146)
at __webpack_require__ (bootstrap acba0f7e8b1985fd75ba:678)
at fn (bootstrap acba0f7e8b1985fd75ba:88)
Webpack.config.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('#ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
It was working perfectly with angular 4 template in asp.net core Visual Studio 2017. When I update the package to Angular 5, I'm getting an error as described above.
I tried to google the solution, but not able to find the solution.
I fixed the same problem in my project by:
1) Adding popper.js to the package.json file (I see you already have this), and running "npm install":
"popper.js": "^1.12.9",
2) Adding an Import popper.js statement to the boot.browser.js file before the import bootstrap statement:
import 'popper.js';
import 'bootstrap';
For newer versions of Angular, npm install #popperjs/core did the trick!
Probably you need to run npm install after you have updated your package.json file.

Webpack-dev-server not applying global styles?

(I'm still new to Angular 5 / Webpack, so I apologize for any misunderstandings!) When I run 'webpack-dev-server', it loads all my styles except for my global style sheet, styles.scss, which contains code that resets the margins and padding to 0. But it's able to load all the other html and css, and can update as I change the code. What's weird though is when I run 'ng serve', the global style sheet applies just fine and the margins and padding are gone!
From what I understand, the loaders are transpiling the scss down to css properly, but for some reason the bundling is getting messed up. Perhaps I'm doing something wrong with how I bundle the files together?? I've messed around with the rules in the config files quite a bit, so I might have accidentally screwed with the interactions between some modules and made the bundling a mess.
I've looked for people who've had similar errors with not being able to get their global styles working on a dev server about a whole day now, but I think I might be looking for the wrong thing. Any help is appreciated!
Below is my webpack config files (webpack.common.js, webpack.dev.js -- the actual webpack.config.js file only contains a one-liner that says it requires webpack.dev.js), my index.html file, my package.json, and a picture of my file tree.
webpack.common.js
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.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
node: {
fs: 'empty'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
],
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('tsconfig.json') }
} , 'angular2-template-loader'
],
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/\#angular(\\|\/)core(\\|\/)esm5/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new ExtractTextPlugin({
filename: 'style.css',
disable: false,
})
]
};
webpack.dev.js
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: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css')
],
devServer: {
historyApiFallback: true,
stats: 'minimal',
port: 3000
}
});
package.json
{
"name": "project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --config config/webpack.dev.js --progress --color --hot",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.1",
"#angular/common": "^5.0.1",
"#angular/compiler": "^5.0.1",
"#angular/core": "^5.0.1",
"#angular/forms": "^5.0.1",
"#angular/http": "^5.0.1",
"#angular/platform-browser": "^5.0.1",
"#angular/platform-browser-dynamic": "^5.0.1",
"#angular/router": "^5.0.1",
"core-js": "^2.5.1",
"es6-shim": "^0.35.3",
"lodash": "^4.17.4",
"rxjs": "^5.5.2",
"ts-loader": "^3.1.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^5.0.1",
"#angular/language-service": "^5.0.1",
"#types/core-js": "^0.9.43",
"#types/jasmine": "^2.5.54",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^6.0.92",
"#types/webpack": "^3.8.1",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.3.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"codelyzer": "~3.2.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"style-loader": "^0.19.0",
"to-string-loader": "^1.1.5",
"ts-node": "^3.2.2",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4",
"webpack-merge": "^4.1.1"
}
}
file tree
Thank you very much for your help!
Aha! It seems that the issue was I was both using #import in my global stylesheet to include other styles and also using styleUrls in my components. I got rid of styleUrls, kept the #imports in my global stylesheet :)

Webpack and angular2 not builiding background-image from css

I've set a project using Angular2 -> Webpack documentation:
https://angular.io/docs/ts/latest/guide/webpack.html#!#top
The problem is that the images from .css files are not build, in the browser I get 404 because they are not present/built in the /dist/assets folder.
I don't want to use absolute paths and place them manually in dist/assets/.. .I already have them in /public/images/..
I want to use relative paths and hashes that webpack automatically creates, and let webpack load them in /dist/assets/..
the .css file looks like this:
background: url('../../../public/images/randomImage.png') center no-repeat;
webpack.common.js:
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.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
exclude: /node_modules/
}, {
test: /\.html$/,
loader: 'html'
}, {
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'css-to-string-loader!css-loader'
},
// {
// test: /\.css$/,
// include: helpers.root('src', 'app'),
// loader: 'raw-loader'
// },
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
};
webpack.prod.js
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'
},
htmlLoader: {
minimize: false // workaround for ng2
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
});
package.json:
{
"name": "angular-with-webpack",
"version": "1.0.0",
"description": "A webpack starter for Angular",
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080 --compress",
"test": "karma start",
"build": "webpack --config config/webpack.prod.js --progress --profile --bail"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.2.0",
"#angular/compiler": "~2.2.0",
"#angular/core": "~2.2.0",
"#angular/forms": "~2.2.0",
"#angular/http": "~2.2.0",
"#angular/platform-browser": "~2.2.0",
"#angular/platform-browser-dynamic": "~2.2.0",
"#angular/router": "~3.2.0",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/jasmine": "^2.5.35",
"#types/node": "^6.0.45",
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^2.2.4",
"css-loader": "^0.25.0",
"css-to-string-loader": "^0.1.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.15.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"style-loader": "^0.13.1",
"typescript": "^2.0.3",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0"
}
}
my current solution to solve this was to switch from raw-loader to css-to-string-loader
here's is the code again:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'css-to-string-loader!css-loader'
},
// {
// test: /\.css$/,
// include: helpers.root('src', 'app'),
// loader: 'raw-loader'
// },
Is it okey ? are there any other solutions ?

Resources