After I finished updating typescript file, app-script does proceed a build process, but the result remains the same. Every time I make changes, restarting a server is a very annoying job to do.
For example, when I changed a single line of code from console.log('ABC')
to console.log('DEF')
, console prints out ABC
again.
I have reproduced a sample Ionic 3 project to test livereload without using a custom web pack config file, and everything went great.
It seems like I missed out something in my custom config file. What am I doing wrong here?
webpack.config.js
const path = require('path');
const webpackDefault = require('@ionic/app-scripts/config/webpack.config');
const webpackMerge = require('webpack-merge');
const customConfig = {
dev: {
resolve: {
alias: {
'@myproject-app': path.resolve('src/app'),
'@myproject-environments': path.resolve('src/environments'),
'@myproject-pages': path.resolve('src/pages'),
}
}
},
prod: {
resolve: {
alias: {
'@myproject-app': path.resolve('src/app'),
'@myproject-environments': path.resolve('src/environments'),
'@myproject-pages': path.resolve('src/pages'),
}
}
}
};
module.exports = webpackMerge(webpackDefault, customConfig);
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.1.7
Cordova Platforms : android 6.3.0 browser ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v8.9.0
npm : 5.5.1
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
dujc
January 18, 2018, 7:54am
2
Hello @JeffMinsungKim , have you fixed it? I met the same issue.
@dujc Nope… still having the problem…
dujc
January 19, 2018, 1:55am
4
It works now.
I just start a new App, and back to my app, then run command ionic serve.
@dujc Can you show me your custom config file?
dujc
January 19, 2018, 2:22am
6
Sure, I got it from ionic-environment-variables
var chalk = require("chalk");
var fs = require('fs');
var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
var env = process.env.IONIC_ENV;
useDefaultConfig.prod.resolve.alias = {
"@app/env": path.resolve(environmentPath('prod'))
};
useDefaultConfig.dev.resolve.alias = {
"@app/env": path.resolve(environmentPath('dev'))
};
if (env !== 'prod' && env !== 'dev') {
// Default to dev config
useDefaultConfig[env] = useDefaultConfig.dev;
useDefaultConfig[env].resolve.alias = {
"@app/env": path.resolve(environmentPath(env))
};
}
function environmentPath(env) {
var filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
if (!fs.existsSync(filePath)) {
console.log(chalk.red('\n' + filePath + ' does not exist!'));
} else {
return filePath;
}
}
module.exports = function () {
return useDefaultConfig;
};
Thank you @dujc
As long as I use this code, do I have to change my custom config file every time when I update app-scripts?
dujc
January 19, 2018, 3:00am
8
I think the problem doesn’t cause by the config file, but ionic side.
I didn’t change the config file, the problem was fixed magically after I created a new App.
@dujc No, I’m not talking about our latest issue. I’m just curious whether I should update the custom config file when my app-scripts get updated or not.
@dujc I followed the exact same thing from the repo, but I get an error
Cannot find a module ‘@app /env’
Do you have any ideas why?
dujc
January 19, 2018, 3:45am
11
Have you added the following to your tsconfig.json in compilerOptions?
"baseUrl": "./src",
"paths": {
"@app/env": [
"environments/environment"
]
}
Yeap. Now I’m getting a new error.
This is my environmnet.dev.ts file and cannot approach firebase. It only reads keys from environment.ts file
export const ENV = {
firebase: {
apiKey: “apikey”,
authDomain: “id.firebaseapp.com ”,
databaseURL: “https://id.firebaseio.com ”,
projectId: “id”,
storageBucket: “id.appspot.com ”,
messagingSenderId: “some number id”
}
};
dujc
January 19, 2018, 4:08am
14
It works. Is it cause by the double quotes? I noticed that you are using the Chinese quote in your reply.
@dujc I think double quotes are not the one causing the problem.
Ionic recognizes environment.ts file but not environment.dev.ts
I solved the problem. I just put firebase:{ } in both environment.ts and environment.dev.ts files