Library's non-TypeScript files' changing will not reflect on UI even if ng serve recompiled

[hijiangtao]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

It will occurs in several angular-cli's version, from v6 to v9.

Description

I use Angular CLI: 9.0.7 in developing my project excellent-proj, and it has a dependency, let's call it @hello.

When I want to modify codes in @hello and debug it inside excellent-proj, a cooling workflow should be that I only need to write codes in @hello and webpack-dev-server should detects the changing, then rebuild the @hello and refresh it also in excellent-proj.

I tried following way to make it works:

1. use yalc to organize library's publish and updates' pushing (from library project to excellent-proj project);
2. start @hello with something like nodemon -x 'ng build hello && yalc push';
3. start excellent-proj with yalc add @hello and ng serve;

I can confirmed updates triggered library's rebuilding and the new codes can be found in excellent-proj, but something wired is only changes in library's TypeScript files can be seen in pages, changes in html and styles files remains the old ones.

🔬 Minimal Reproduction

Just init a Angular project and an Angular library with angular-cli, and then add the library to project's dependency.

In order to confirm this is not a problem of third-library like yalc, I also tried following steps, and you can do too:

1. ng build --watch in @hello project;
2. ng serve in excellent-proj project;
3. Everytime I modified the codes in @hello, it will triggered @hello's rebuild, and then I moved dist/hello to excellent-proj's node_modules/@hello folder;

🔥 Exception or Error

The above steps will definitely triggered Angular ng serve's recompiling work, since I got following info when I copy it into project's folder (I also tried npm link way too):

Date: 2020-05-15T15:56:47.533Z - Hash: 188263e7942a9f784fcb
5 unchanged chunks

Time: 547ms

WARNING in Emitted no files.

: Compiled successfully.

But the disappointed thing is that only changes in TypeScript file reflects in UI, not the html files and style files.

It shouldn't be the problem of my wrong usage of ng build or ng serve or somethiing like cp -r folderA/ folderB/, since I can see the new content inside project and TypeScript's changing logic, but just without html and style's changing...

:-(

🌍 Your Environment

Angular CLI: 9.0.7
Node: 10.18.0
OS: darwin x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: No

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

I searched many issues, like with angular-cli v6, v7, v8 and also v9, such as #2389, #8168, #2356, I think #13588 issue is mostly the same as mine, however, it still remains open after more than one year.

It seems like an existing issues that not been resolved yet, is it a problem that is still under considered by your team? Or is it a bug basically of angular-cli?

Thanks in advance.

[alan-agius4]

Indeed this is a duplicate of #13588, I believe that it is fixed by Ivy.

[hijiangtao]

@alan-agius4 I should set Ivy to false, for two reasons, the first one is that Angular official still do not recommend library to be bundle with Ivy way (mentioned in docs), and another is our project is still under the migrating from Angular v8.

However, I think the second one can be ignored though in the near future.

But as you mentioned in that issue, is there any other way to solve it with non-Ivy development?

Thx!

[alan-agius4]

@hijiangtao, If you are not using Ivy, you can disable AOT during development and you shouldn’t hit this issue.

While we do recommend not to ship Ivy libraries to NPM, we do recommend using Ivy for library builds during development.

In your case however, it will not be possible since you are still using VE in your application.

[hijiangtao]

@alan-agius4 I tried two approaches, but still got the problem.

1. I didn't use Ivy in both library codes and host project codes

In this case, I have such configurations both in my library's tsconfig.json and host project's tsconfig.json:

"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false
  }

and I run build and serve with ng serve and ng build, as mentioned in docs, so it's definitely not an Ivy compilation process:

JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands...

2. I change the enableIvy flag to true in both two folders

I got warnings like It is not recommended to publish Ivy libraries to NPM repositories. etc, but the library is built succeed in the end. When I copied the dist folder to host project's node_module folder, ng serve recompiled the codes, but no changes in HTML can be found in pages, besides, I got an error like :

Duplicate identifier 'ɵfac'.
10 static ɵfac: ɵngcc0.ɵɵFactoryDef;

I am not sure if I did something wrong with the configurations that you recommend? I think I could put my codes out, with library codes in https://github.com/hijiangtao/fudao-hello and host project codes in https://github.com/hijiangtao/ngrx-store-example.

The above tsconfig.json shows in:

1. host project https://github.com/hijiangtao/ngrx-store-example/blob/master/tsconfig.json#L17-L21
2. library https://github.com/hijiangtao/fudao-hello/blob/master/tsconfig.json#L28-L32

I tried to set --verbose=true to see if I can get more info from ng serve logging, and I found it prints following info when recompile the project:

harmony side effect evaluation tslib [./node_modules/@fudao/hello/fesm2015/fudao-hello.js] 1:0-35
harmony import specifier tslib [./node_modules/@fudao/hello/fesm2015/fudao-hello.js] 9:15-25

So I opened the fesm2015-* file in /dist folder and double checked, it is already the new logic indeed, but not reflected in UI though.

And one more thing, changes in library's TypeScript files are normal all the same.

[hijiangtao]

And I found a pull request that may be relevant to this problem, and I see it's status is still open, could it be the problem? #15146

I found an issue #16272 discussed about the style files's no change problem, but it also said it's been fixed in 9.0.0-rc.4, I tried to switch angular-cli to that version, but it didn't work for me either.

(The above operations is under "enableIvy": false in both two project folders)

[hijiangtao]

One more thing is that, even if I can see the changes in TypeScript files shows in pages, the ng serve outputs log with

WARNING in Emitted no files.
: Compiled successfully.

It's another wired thing.

[alan-agius4]

Hi @hijiangtao,

It seems that the Chinese version of documentation is not up to date. in the English version https://angular.io/guide/aot-compiler#choosing-a-compiler, the documentation states that since version 9, AOT is the default for new applications.

So in your case, while you are not using Ivy, you are still building in AOT https://github.com/hijiangtao/ngrx-store-example/blob/acb7dc452f7a52a51286ded52508f2de5b36fc3e/angular.json#L25

When not using Ivy, AOT compilation are not recommended to be used during development as incremental builds are much slower, thus you should set the AOT option to false, which would also solve the issue that you are experiencing with HTML and styles changes not being reflected during incremental builds.

Regarding to the open PR to solve this library consumption incremental builds #15146, indeed that does solves the problem, but that was a workaround to a larger issue. And since the old VE rendering engine is deprecated and AOT compilations during development are mainly recommended to be used with Ivy. That fix will not longer be landed.

On a separate note, my recommendation for a better development experience, is to have multiple projects in the same repo (aka: monorepo), which the Angular CLI supports out of the box and is the official supported development workflow.

ng new --no-create-application my-workspace
cd my-workspace
ng generate application my-app
ng generate library my-lib

[hijiangtao]

Thanks for replying, @alan-agius4 , I look through docs again and change AOT option to false, it works indeed. I thought I may configure something wrong to cache resource codes like html inside memory before, and stuck at that point.

And on the other hand, I think my project will migrate to Angular v9+ finally, so I tried the Ivy build way again. I simply change the property in "angularCompilerOptions" of tsconfig.json "enableIvy": true (both in library project folder and host project folder) and get everything works fine! 🎉 But I am not sure whether that's all the things I should do to enable the goal as you said before:

While we do recommend not to ship Ivy libraries to NPM, we do recommend using Ivy for library builds during development.

And could I simply regard the words "development" here as something that works the same as npm link or "copy build /dist folder to specific /node_modules/ folder"?

Last, for the development experience, we truly considered organizing libraries and projects in one repo before, but we prefer separate them into different repos after Googleing some solutions:

How to cooperate between teams?

1. My team maintains mutilple background system management platforms in one repo at first, and the BIG repo bothers us day by day (but we didn't use workspace/application/library like you recommend above, we use some mechanism like modules and shared-modules to organize them).
2. However, all codes inside one repo (multiple libraries, as well as couple of projects) would not only largely increase the .git size (easily reached several GB+), but also increase the complexity of developers' work (I think it mainly focuses on reading/searching codes all inside my workspace, imagine that I need to find a repo1/component-specific-utility.ts inside multiple similarly named repo-*/component-*.ts files).

In order to separate them to a more maintainable state, and don't lose the good workflow of developing and debugging, we use single-spa (just purely regard it as a framework for bringing together multiple frontends in one frontend application) to routing our multiple projects (into different microservices).

We are looking for a better development experience all the time, but as far as we know, something like micro frontend mechanism would be one of the best solution right now. We would love to try something new (we are in the beginning of the repo-separating works) if you have any good advice on it.

Thanks again for your detailed and good explanation, again!

[alan-agius4]

Hi again,

And could I simply regard the words "development" here as something that works the same as npm link or "copy build /dist folder to specific /node_modules/ folder"?
Yes, when you as a development want to link one project to another during development so that you can consume changes which are not necessary committed.

Note: I don't recommend using npm link for development, as also this is not a supported feature by the Angular Compiler angular/angular#33469

My team maintains multiple background system management platforms in one repo at first, and the BIG repo bothers us day by day (but we didn't use workspace/application/library like you recommend above, we use some mechanism like modules and shared-modules to organize them).

IMHO, when having a monorepo it's very important that you split and structure it well, as otherwise you indeed will find it hard to work with. I worked in various environments, ie: using a single mono repo, multiple mono repos, and single projects repo. For me, a single mono repo always wins over all the other setups and I know live by the mantra of mono-repo everything, because for me the benefits are way too big compared to the cons. Especially when want to test changes or do changes across the board like for example updating TypeScript or Angular.

Having a monorepo, doesn't constrain you from having micro-frontends, that said, currently the Angular CLI doesn't have a micro-frontend story and you are venturing in unsupported territory.

However, all codes inside one repo (multiple libraries, as well as couple of projects) would not only largely increase the .git size (easily reached several GB+), but also increase the complexity of developers' work (I think it mainly focuses on reading/searching codes all inside my workspace, imagine that I need to find a repo1/component-specific-utility.ts inside multiple similarly named repo-/component-.ts files).

While indeed the .git folder can grow large in a mono repo, I don't think that it can reach several GB+ so easily. For example, my current .git folder for the Angular mono repo is 260Mb. Regarding search, I think that if you search for a "feature", you will get better results, but I do see that you will have more results.

[angular-automatic-lock-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.}