This is probably a familiar topic App.settings - the Angular way? but tbh, after a day of a researching I couldn't find a satisfying solution, hence I ask the question here.
Goal is to build an application once, and deploy many times via configurable config file. This is handy for QA and application support team.
Problem is, ng build is internalizing the config file into the final bundle.
My question is actually quite simple, can the goal that I have be achieved using the angular cli without using the environments modules or custom config service or ejecting from ng cli (not allowed in A7) ?
I want to have the application config.js file in \src\assets\config\ folder, that acts as a simple module.
config.js
const appConfig = {
apiUrl: 'some-api-url'
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = appConfig;
}
I'm using this module in my angular components that require access to the apiUrl property, let's say
app.component.ts
import appConfig from '../assets/config/config'
@Component({
...
})
export class AppComponent {
...
constructor() {
console.log(appConfig.apiUrl);
}
}
Running the build (for prod) will always result in the config.js file content being included in the bundle, which is what I'd like to avoid.
I want to avoid
- using the environments files. This is anti-pattern
- using the service that gets the config file. This is relatively ok solution, but let's consider this as a no-go option for now
- ng eject (not allowed in A7)
What I've tried
- importing json instead of the module. still being included in bundle.
- add the config module folder into the exclude part of the tsconfig.app.json. No matter what I put there, it still gets internalized.
I know this can be done (with eject or custom cli build)
Because I've seen a REACT project, that's been ejected from create-react-app cli into webpack. What the build does is:
- uses the CopyWebPackPlugin to copy the config files as they are into the dest build
- uses the HtmlWebpackIncludeAssetsPlugin to include the config module files (*.config.js) in the index.html as
<script src=...>for each config file. - sets the externals array https://webpack.js.org/configuration/externals/
Has anyone ever done something I'm trying to achieve? Thanks!
