Image links are not working [Urgent]

[sahiliotasol]

I have a folder name 'assets' in the root folder 'src' and the path is as below but its not working, any idea what is wrong with this???

http://localhost:4200/assets/img/header/messagi.png

[DevWurm]

Pls share your project configuration with me, otherwise I cant help you

[sahiliotasol]

yes sure, its the same as in demo project

angular-cli.json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "sicurezza-lavoro", "ejected": true }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": { } } }

[sahiliotasol]

webpack.config.json

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); const ProgressPlugin = require('webpack/lib/ProgressPlugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const autoprefixer = require('autoprefixer'); const postcssUrl = require('postcss-url');

const { NoEmitOnErrorsPlugin, LoaderOptionsPlugin } = require('webpack'); const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack'); const { CommonsChunkPlugin } = require('webpack').optimize; const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules'); const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"]; const baseHref = ""; const deployUrl = "";

module.exports = { "target": "electron-renderer", "devtool": "source-map", "resolve": { "extensions": [ ".ts", ".js" ], "modules": [ "./node_modules" ] }, "resolveLoader": { "modules": [ "./node_modules" ] }, "entry": { "main": [ "./src/main.ts" ], "polyfills": [ "./src/polyfills.ts" ], "styles": [ "./src/styles.css" ] }, "output": { "path": path.join(process.cwd(), "dist"), "filename": "[name].bundle.js", "chunkFilename": "[id].chunk.js" }, "module": { "rules": [ { "enforce": "pre", "test": /.js$/, "loader": "source-map-loader", "exclude": [ /\/node_modules\// ] }, //{ "test": /.scss$/, "use": ['raw-loader', 'sass-loader'] }, { "test": /.json$/, "loader": "json-loader" }, { "test": /.html$/, "loader": "raw-loader" }, { "test": /.(eot|svg)$/, "loader": "file-loader?name=[name].[hash:20].[ext]" }, { "test": /.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/, "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000" }, { "exclude": [ path.join(process.cwd(), "src/styles.css") ], "test": /.css$/, "loaders": [ "exports-loader?module.exports.toString()", "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader" ] }, { "exclude": [ path.join(process.cwd(), "src/styles.css") ], "test": /.scss$|.sass$/, "loaders": [ "exports-loader?module.exports.toString()", "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "sass-loader" ] }, { "exclude": [ path.join(process.cwd(), "src/styles.css") ], "test": /.less$/, "loaders": [ "exports-loader?module.exports.toString()", "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "less-loader" ] }, { "exclude": [ path.join(process.cwd(), "src/styles.css") ], "test": /.styl$/, "loaders": [ "exports-loader?module.exports.toString()", "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "stylus-loader?{\"sourceMap\":false,\"paths\":[]}" ] }, { "include": [ path.join(process.cwd(), "src/styles.css") ], "test": /.css$/, "loaders": ExtractTextPlugin.extract({ "use": [ "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader" ], "fallback": "style-loader", "publicPath": "" }) }, { "include": [ path.join(process.cwd(), "src/styles.css") ], "test": /.scss$|.sass$/, "loaders": ExtractTextPlugin.extract({ "use": [ "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "sass-loader" ], "fallback": "style-loader", "publicPath": "" }) }, { "include": [ path.join(process.cwd(), "src/styles.css") ], "test": /.less$/, "loaders": ExtractTextPlugin.extract({ "use": [ "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "less-loader" ], "fallback": "style-loader", "publicPath": "" }) }, { "include": [ path.join(process.cwd(), "src/styles.css") ], "test": /.styl$/, "loaders": ExtractTextPlugin.extract({ "use": [ "css-loader?{\"sourceMap\":false,\"importLoaders\":1}", "postcss-loader", "stylus-loader?{\"sourceMap\":false,\"paths\":[]}" ], "fallback": "style-loader", "publicPath": "" }) }, { "test": /.ts$/, "loader": "@ngtools/webpack" } ] }, "plugins": [ new NoEmitOnErrorsPlugin(), new GlobCopyWebpackPlugin({ "patterns": [ "assets", "favicon.ico" ], "globOptions": { "cwd": "/home/devwurm/Work/Publications/electron-ng2-article/article1/angular-2-electron-seed/src", "dot": true, "ignore": "**/.gitkeep" } }), new CopyWebpackPlugin([{ context: path.resolve(dirname, "src"), from: "entry.js" }]), new ProgressPlugin(), new HtmlWebpackPlugin({ "template": "./src/index.html", "filename": "./index.html", "hash": false, "inject": true, "compile": true, "favicon": false, "minify": false, "cache": true, "showErrors": true, "chunks": "all", "excludeChunks": [], "title": "Webpack App", "xhtml": true, "chunksSortMode": function sort(left, right) { let leftIndex = entryPoints.indexOf(left.names[0]); let rightindex = entryPoints.indexOf(right.names[0]); if (leftIndex > rightindex) { return 1; } else if (leftIndex < rightindex) { return -1; } else { return 0; } } }), new BaseHrefWebpackPlugin({}), new CommonsChunkPlugin({ "name": "inline", "minChunks": null }), new CommonsChunkPlugin({ "name": "vendor", "minChunks": (module) => module.resource && module.resource.startsWith(nodeModules), "chunks": [ "main" ] }), new ExtractTextPlugin({ "filename": "[name].bundle.css", "disable": true }), new LoaderOptionsPlugin({ "sourceMap": false, "options": { "postcss": [ autoprefixer(), postcssUrl({"url": (URL) => { // Only convert root relative URLs, which CSS-Loader won't process into require(). if (!URL.startsWith('/') || URL.startsWith('//')) { return URL; } if (deployUrl.match(/:\/\//)) { // If deployUrl contains a scheme, ignore baseHref use deployUrl as is. return ${deployUrl.replace(/\/$/, '')}${URL}; } else if (baseHref.match(/:\/\//)) { // If baseHref contains a scheme, include it as is. return baseHref.replace(/\/$/, '') + /${deployUrl}/${URL}.replace(/\/\/+/g, '/'); } else { // Join together base-href, deploy-url and the original URL. // Also dedupe multiple slashes into single ones. return /${baseHref}/${deployUrl}/${URL}.replace(/\/\/+/g, '/'); } }}) ], "sassLoader": { "sourceMap": false, "includePaths": [] }, "lessLoader": { "sourceMap": false }, "context": "" } }), new AotPlugin({ "mainPath": "main.ts", "hostReplacementPaths": { "environments/environment.ts": "environments/environment.ts" }, "exclude": [], "tsConfigPath": "src/tsconfig.app.json", "skipCodeGeneration": true }) ], "node": { "fs": false, "global": false, "crypto": false, "tls": false, "net": false, "process": false, "module": false, "clearImmediate": false, "setImmediate": false, "Buffer": false, "filename": false, "__dirname": false } };

[sahiliotasol]

package.json

{ "name": "demo", "main": "dist/entry.js", "version": "0.0.0", "license": "MIT", "scripts": { "run": "electron .", "start": "concurrently \"webpack-dev-server --port=4200\" \"electron src/entry.live.js\"", "ng": "ng", "build": "webpack", "test": "karma start ./karma.conf.js", "lint": "ng lint", "e2e": "protractor ./protractor.conf.js", "prepree2e": "npm start", "pree2e": "webdriver-manager update --standalone false --gecko false --quiet", "package:linux": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\.conf\.js --ignore=\"(angular-cli|tsconfig)\.json\" --ignore=webpack.\.js --out=packages --platform=linux --arch=all --overwrite", "package:mac": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\.conf\.js --ignore=\"(angular-cli|tsconfig)\.json\" --ignore=webpack.\.js --out=packages --platform=darwin --arch=all --overwrite ", "package:win": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\.conf\.js --ignore=\"(angular-cli|tsconfig)\.json\" --ignore=webpack.\.js --out=packages --platform=win32 --arch=all --overwrite ", "package:all": "electron-packager . $npm_package_name-$npm_package_version --ignore=src --ignore=node_modules --ignore=e2e --ignore=.\.conf\.js --ignore=\"(angular-cli|tsconfig)\.json\" --ignore=webpack.\.js --out=packages --all --overwrite" }, "private": true, "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "@types/pouchdb-find": "^0.10.0", "bootstrap": "4.0.0-alpha.5", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "ng2-select": "^1.2.0", "pouchdb": "^6.2.0", "pouchdb-extend": "^0.1.0", "pouchdb-find": "^6.2.0", "pouchdb-promise": "^5.4.5", "relational-pouch": "^1.4.5", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.0.0", "@angular/compiler-cli": "^4.0.0", "@ngtools/webpack": "^1.3.0", "@types/electron": "^1.4.35", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "autoprefixer": "^6.5.3", "codelyzer": "~2.0.0", "concurrently": "^3.4.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.26.1", "cssnano": "^3.10.0", "devtron": "^1.4.0", "electron": "^1.6.2", "electron-packager": "^8.6.0", "exports-loader": "^0.6.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.0", "html-webpack-plugin": "^2.28.0", "istanbul-instrumenter-loader": "^2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "json-loader": "^0.5.4", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-electron": "^5.1.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-sourcemap-loader": "^0.3.7", "less-loader": "^2.2.3", "node-sass": "^4.5.2", "postcss-loader": "^0.13.0", "postcss-url": "^5.1.2", "protractor": "~5.1.0", "pouchdb-memory": "^1.0.0", "raw-loader": "^0.5.1", "sass-loader": "^4.1.1", "script-loader": "^0.7.0", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "stylus-loader": "^2.4.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.2.0", "url-loader": "^0.5.7", "webpack": "^2.3.2", "webpack-dev-server": "~2.3.0" } }

[DevWurm]

I found the bug. It's in the Ancular-CLI generated Webpack config...I will fix this later today.

[sahiliotasol]

Thanks , Please let me know after fixing it ASAP, if possible add also any working image link in the demo.

I have another issue when I try to open your demo project in browser with localhost:4200 port and does not work but it works with electron window app

[DevWurm]

Your problem should be fixed now. Just reopen it, if it isn't. Regarding your other problem, you may want to read this.

[sahiliotasol]

Thanks man , Images links are working now with your latest commit in webpack.config.js file