I’m trying to add a webpack alias in the overridden webpack config. I’ve added the same alias to my tsconfig.json and that works fine but on ionic serve i’m getting a module not found exception.
src/config/webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
module.exports = {
entry: process.env.IONIC_APP_ENTRY_POINT,
output: {
path: '{{BUILD}}',
publicPath: 'build/',
filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
},
devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [path.resolve('node_modules')],
alias: {
// tried both of these iterations per the webpack resolve documentation
Components: path.resolve(__dirname, '/src/app/components/components.ts')
// Components$: path.resolve(__dirname, '/src/app/components/components.ts')
}
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.ts$/,
loader: process.env.IONIC_WEBPACK_LOADER
}
]
},
plugins: [
ionicWebpackFactory.getIonicEnvironmentPlugin(),
new webpack.EnvironmentPlugin(['IONIC_ENV'])
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"Components": ["src/app/components/components.ts"],
"@advtech/services": ["src/app/services/services.ts"]
},
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Where components.ts looks like
export * from './action/index';
export * from './action_sheet/index';
export * from './collapsible_card/index';
export * from './image/index';
export * from './inputs/index';
export * from './schedule/index';
export * from './popover/index';
export * from './controller/index'
export * from './form/index';
and is used like
import {Image} from 'Components'
Getting the error like so after ionic serve and the page is loaded in the browser
Runtime Error
Cannot find module "Components"
Stack
Error: Cannot find module "Components"
at g (http://localhost:8100/build/polyfills.js:3:7133)
at Object.<anonymous> (http://localhost:8100/build/main.js:109924:7)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:110019:87)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:56590:82)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:56604:73)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.defineProperty.get (http://localhost:8100/build/main.js:109737:71)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.AUTO_STYLE (http://localhost:8100/build/main.js:77558:73)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:119824:70)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)