I would like to exclude certain components from my production build in Angular 5+. So far I have read around and I understand the concepts of environment variables, but to my understanding those are available at runtime. What I am looking for is to actually exclude certain modules from ever being imported so that the code for them does not get to the production build (files).
I also dont want to have an
<div *ngIf="isProduction">...</div> laying around, what I would rather want to do is something like this:
Component({
...
templateUrl: environment.production ? 'app.prod.html' : 'app.html'
})
However this is also not possible due to how the Angular compiler works.
I guess the answer to this is to tweak the angular-cli, but given there is no good documentation (that I can find), I'd like to know if someone perhaps has a better idea?
For those looking for a *not so scalable* solution.
Solution is for Angular 5 / Angular 6+
You can switch specific files depending on what environment you are building/serving by adding each file pair in the angular.json file.
For example, if you wish to use app.prod.html instead of app.html in your app component only when using the production environment / configuration.
In angular.json add your replacments in the fileReplacements array under the config you wish to have replaced:
{
...
"projects": {
...
"configurations": {
"production": {
...
"fileReplacements": [
...
*** ADD YOUR REPLACEMENT FILES HERE ***
...
]
}
}
}
}
Using the above example:
{
...
"projects": {
...
"configurations": {
"production": {
...
"fileReplacements": [
...
{
"replace": "src/app/app.html",
"with": "src/app/app.prod.html"
}
...
]
}
}
}
}
Not a pretty solution as it seems you will be doing this for each file you wish to replace but it should work nontheless.
Build or serve the specific config with
ng serve --configuration=production
ng build --configuration=production
Related
I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files
Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.
I am not sure how to organize my js code.
Our front end is customized to different customers. Majority of the base code is common across all customers. However there are cases where certain functionality is overridden for each customer.
For example if we have 2 functions Function1 and Function2.
Customer1 uses Function1 while Customer2 uses Function2. How can I make sure that when I build the code for Customer, Function2 will not be included in the bundle? And when I build the code for Customer2, then Function1 will not be included int he bundle?
The other option I have, and that I am trying to avoid, is to have a separate code repo for each customer.
I think what you need is Tree-Shaking in webpack.
Tree shaking can be a stubborn process depending on how the library you are using in your application is developed.
If you find that you are using a module that does not shake dead code properly, you can always use the babel-plugin-import plugin. This plugin will build your bundle with only the code you import and nothing else. Here is an example of my babel 7.x config file. I use it to remove a lot of code that was not being tree-shaken by webpack from material-ui.
{
"presets": [
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
[
"babel-plugin-import",
{
"libraryName": "#material-ui/core",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"core"
],
[
"babel-plugin-import",
{
"libraryName": "#material-ui/icons",
"libraryDirectory": "/",
"camel2DashComponentName": false
},
"icons"
]
]
}
When using this plugin in certain libraries, some of your imports also may break and you may need to import certain things on their own. I had to do this with material-ui's makeStyles function.
Feel free to remove what is unnecessary to you and keep the parts that help :).
At webpack configuration, optimization/usedExports: true will remove unused code.
webpack.config.js
module.exports = [
{
entry: "./main.js",
output: {
filename: "output.js"
},
optimization: {
usedExports: true, // <- remove unused function
}
},
{
entry: "./main.js",
output: {
filename: "without.js"
},
optimization: {
usedExports: false, // <- no remove unused function
}
}
];
lib.js
exports.usedFunction = () => {
return 0;
};
exports.unusedFunction = () =>{
return 1;
};
main.js
// Not working
// const lib = require("./lib");
// const usedFunction = lib.usedFunction;
// Working
const usedFunction = require("./lib").usedFunction;
usedFunction()
```shell
$ webpack
Generated Output file:
dist/output.js
(()=>{var r={451:(r,t)=>{t.W=()=>0}},t={};(0,function e(o){var n=t[o];if(void 0!==n)return n.exports;var p=t[o]={exports:{}};return r[o](p,p.exports,e),p.exports}(451).W)()})();
dist/without.js
(()=>{var n={451:(n,r)=>{r.usedFunction=()=>0,r.unusedFunction=()=>1}},r={};(0,function t(u){var e=r[u];if(void 0!==e)return e.exports;var o=r[u]={exports:{}};return n[u](o,o.exports,t),o.exports}(451).usedFunction)()})();
^^^^^^^^^^^
I am using ExtJS 6.2
I have the following line in my app.json:
"requires": [
"font-awesome",
"ux"
],
I am trying to create a simple text view using LiveSearchGrid.js, so I have the following in my app_name=md_registry folder md_registry/app/view/main/ListTest.js:
Ext.define('md_registry.view.main.ListTest', {
extend: 'Ext.ux.LiveSearchGridPanel',
//xtype: 'row-expander-grid',
//store: 'Patients',
xtype: 'mainlisttest',
requires: [
'md_registry.store.Patients',
'Ext.ux.LiveSearchGridPanel'
],
When I try doing a sencha app build, I get the following compiler error:
Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file md_registry.view.main.ListTest
I have verified that this file exists in the path:
md_registry/ext/packages/ux/classic/src
From everything I've read, specifying the above requires in my app.json should be sufficient, but it's obviously not.
You are right now creating a universal app, but not using the correct folders for your code. You should definitely look into either creating a classic-only app, or a universal app with correct folder structure. If you want to make a universal app, but not now, you can compile only classic.
The solution was completely unobvious:
Had to comment this out from the "builds" profile in app.json:
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
"generated": {
"var": "modern/sass/save.scss",
"src": "modern/sass/save"
}
}
}
I hope this helps someone!
I've got an app with several custom elements in it, and I'm writing tests, and I'm not sure how the directories are supposed to be set up for tests to work.
Is it something like:
myApp
myApp/bower_components
myApp/test
myApp/test/myApp
myApp/test/myElement1
myApp/test/myElement2
myApp/test/myElement3
myApp/src
myApp/src/myApp
myApp/src/myElement1
myApp/src/myElement2
myApp/src/myElement3
myApp/demo
Or does each element get a test/ subfolder? Like
myApp/src/myElement1/test
myApp/src/myElement2/test
myApp/src/myElement3/test
According to the docs here each element has a test folder that can be accessed via the browser when you use polymer serve like so localhost:8080/components/my-el/test/my-el_test.html
The test should be in their own folder separated from the app main directory to facilitate the Polymer CLI's build process. (Making your app production ready.)
Recommended Structure:
myApp/test/myElement1
myApp/src/myElement1
Here’s an example polymer.json file from the Shop app: ((No Test Folder))
polymer.json
{
"entrypoint": "index.html",
"shell": "src/shop-app.html",
"fragments": [
"src/shop-list.html",
"src/shop-detail.html",
"src/shop-cart.html",
"src/shop-checkout.html",
"src/lazy-resources.html"
],
"sources": [
"src/**/*",
"data/**/*",
"images/**/*",
"bower.json"
],
"extraDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.js"
],
"lint": {
"rules": ["polymer-2-hybrid"]
}
}
I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).