`ng build --watch` and `ng build` should generate the same set of filenames

[breathermachine]

🚀 Feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

I'm building an Angular app that's served from a Spring Application. I want to use the target es2015 to take advantage of ES6 and differential loading. Is it possible to add an option add-target-suffix to ng build --watch so that it will build, for example, main-es2015.js and not just main.js? I'm asking for this request because I'm using ng build to fully generate the script files as part of a Spring Application build and at the same time use ng build --watch to speed up coding and testing of TypeScript code but these two operations generate differently named scripts.

Describe the solution you'd like

Depending on the target in tsconfig.json, ng build --watch --add-target-suffix should do the following: es5: build main.js in order to align with ng build with es5 as the target es2015: build main-es2015.js in order to align with ng build with es2015 as the target

If --add-target-suffix is not specified, then ng build --watch will perform the default behavior, so as not to break any existing build pipelines.

Describe alternatives you've considered

None at the moment

[filipesilva]

We should just be consistent without needing an extra flag. Instead we should use the right names when using ng build --watch (e.g. `*-es2015) if a non watch build would produce those names, even if we're not making the second one.

[IgorWolbers]

@filipesilva - Just to add to the use case . I am building using the angular CLI and hosting the output from a .net mvc application. I don't want to add logic to my dev build to try to pick up one of 2 different file groups depending on if ng build was executed with --watch or not. Making the output file names consistent would be the ideal/expected behavior.

[deLaDude]

+1 @IgorWolbers We have a development angular build config that is run once by the Visual Studio deploy and then run by developers using the --watch flag, and now they produce different outputs which broke our development workflow and required dev-specific logic in our view.

This seems like an oversight in the latest versions of Angular CLI that we would like to see addressed. Its odd to me this is categorized as a feature request. From our view this is a regression.

[StormRider01]

I have the same scenario, Angular hosted in .Net MVC. Since there's also no control over index.html, I had to add dev specific logic in hosting views.

[dwohlfahrt]

Just to add to what @IgorMinar, @deLaDude and @StormRider01 have said, we have a project with a collection of custom Angular Elements that we need to consume in a number of external apps, each of which now needs to account for the different output files depending on what type of build was run.

[deLaDude]

Checking in on this again . . . One way around this issue for is to revert the tsconfig to ES5. You lose any benefit of differential loading though.

I'd really like this reclassified as a BUG and escalated however. Why does adding the --watch flag change the output of my DEV build configuration? I cannot find any documentation on how or why adding the --watch flag would change the expected output of a build.

This is not a feature.

[max-cool]

I'd like to chime in as well, as this issue directly affects my workflow. ng build --watch is a huge productivity booster, but it breaks the UI when it generates bundles with a different name.

[nickhod]

Would also like to add that this isn't consistent behaviour and should be fixed.

I've had to use a custom webpack builder to add the es2015 suffix on to files generated by ng build --watch. When running with ng build --watch, requests for *-module-ngfactory.js are made without the es-2015 suffix, so I've then written backend code to redirect those.

By default ng build --watch should generate files with the es2015 suffix. It's not a feature, it's a bug.

[nutwiss]

@nickhod Can you give any more information regarding to your solution to this bug, please?

It's a massive issue being unable to run build --watch. We run Angular inside a .NET MVC Container rather than in Node and I agree that this is feature has become a bug - it has broken the ability to use --watch when running outside a nodejs environment.

Thanks.

[nickhod]

@nutwiss Sure.

1) Change the default webpack builder to this custom webpack builder. This gives the ability to run additional webpack configuration

https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack

2) Create a file extra-webpack-config.js in the same directory as angular.json. Modify your angular.json to include it, as per the GitHub docs above.

3) Install the rename plugin to use in our extra webpack config npm install rename-webpack-plugin

4) Configure extra-webpack-config.js to rename ng build --watch output with an es2015 suffix. My example here is awful. It should be possible to do this elegantly with regex, but I couldn't get it to work. After an hour of trying I gave up and made separate plugin instances for each file.

If everything works, when you run ng build --watch you'll end up with -es2015 suffixed files.

const path = require('path');
const RenameWebpackPlugin1 = require('rename-webpack-plugin');
const RenameWebpackPlugin2 = require('rename-webpack-plugin');
const RenameWebpackPlugin3 = require('rename-webpack-plugin');
const RenameWebpackPlugin4 = require('rename-webpack-plugin');
const RenameWebpackPlugin5 = require('rename-webpack-plugin');

module.exports = {
    plugins: [
        new RenameWebpackPlugin1(
            {
                originNameReg: /polyfills\.js(\.map)?$/,
                targetName: 'polyfills-es2015.js$1'
            }),
        new RenameWebpackPlugin2(
            {
                originNameReg: /main\.js(\.map)?$/,
                targetName: 'main-es2015.js$1'
            }),
        new RenameWebpackPlugin3(
            {
                originNameReg: /runtime\.js(\.map)?$/,
                targetName: 'runtime-es2015.js$1'
            }),
        new RenameWebpackPlugin4(
            {
                originNameReg: /vendor\.js(\.map)?$/,
                targetName: 'vendor-es2015.js$1'
            }),
// Example of a custom dynamically loaded module, remove this and add your own specific ones here
        new RenameWebpackPlugin5(
            {
                originNameReg: /components-campaigns-campaigns-module-ngfactory\.js(\.map)?$/,
                targetName: 'components-campaigns-campaigns-module-ngfactory-es2015.js$1'
            })
    ]
};

5) When running ng build --watch the Angular app will request lazily loaded modules without the es2015 suffix. Make your webserver / webapp catch these requests and redirect them, adding the es2015 suffix.

6) Update your html to load es2015 by default and es5 as it would for regular ng build output.

It's an ugly mess, but it works.

[ropstah]

I am creating a Chrome extension using Angular. It utilizes two main features which are a popup and a background script. The popup is where the Angular app lives, the background script is created with @angular-builders/custom-webpack:browser and a separate custom Webpack config that generates background.js as a separate entrypoint.

So high level I have:

• Popup
  • index.html
  • index.js
• Background script
  • background.js

And those are configured in the manifest.json:

"browser_action": { "default_popup": "index.html" }, "background": { "scripts": ["background.js", "runtime.js"], "persistent": false }

but this is only valid when building using ng build --watch. If I omit the watch, or if I do a production build (without output hashing) it adds the -es2015 and -es5 suffixes.

This is all nice and good for the Angular application that has its index.html automatically updated, but the manifest.json is not updated.

The same goes if using a background page instead of scripts. I would still need to manually edit the background.html page and change the references.

[clydin]

@ropstah If building a chrome extension, the browserslist file for the project should be altered to only contain an entry for Chrome. This will prevent the build system from generating files and code for browsers that will not be used with the application.

[PaulYoungBV]

Similar here, we are upgrading an AngularJS/.NET MVC project and have had to change target to es5 as ng build and ng build --watch generate inconsistent outputs. Please fix CLI to build consistent file structures across build configs.

[ghous92]

Greeting All, Is there any update on the fix for the above issue. I am migrating an MVC AngularJS App to Hybrid Framework and the development time has taken a big hit because for every small change I have to do 'npm run build', can someone suggest any fix which is consistent with Angular CLI @angular-jira-bot @shlangus @alan-agius4

[brassaw]

Got bit by this today and would love to see a fix.

[summitinsights]

yeah, having the same issue. On local environment ng build --watch creates files without the es5 prefix. I'm using powershell start-process "cmd " """/k ng build --watch""" in Visual Studio for this. and it creates files like runtime.js and then ng build using VS code creates files like runtime-es5.js

And the build agent the ng build command creates files like runtime-es5.js

[ricardodani]

Would love to see a fix to this HUGE inconvenient

[skinnyskinner]

I currently have the same issue, a change here could just straight up fix our Visual Studio Development problems. It came up since we updated Angular and now we have the suffix in the normal build.

[breathermachine]

Guys, let's hope the devs fix this issue before 2020 ends. Christmas and New Year are just around the corner! I mean, this bad boy is already a year and a half old!

[ghous92]

Thanks All :)

Thanks & Regards Ghous Nawaz +91 7702449212

On Tue, Jan 12, 2021 at 9:36 PM Alan Agius notifications@github.com wrote:

Closed #15157 https://github.com/angular/angular-cli/issues/15157 via

19761 https://github.com/angular/angular-cli/pull/19761.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/15157#event-4196685929, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADJ56FRAI73TSEQZWY6WM7LSZRXQ3ANCNFSM4IGR4ABQ .

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}