Angular 10 throw warning when using path alias

[ngohungphuc]

🐞 bug report

Affected Package

The issue is caused by package @angular/~10.0.14

Is this a regression?

No

Description

WARNING in src\app\users\user.component.ts depends on '@user/shared/selectors/selector'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I'm using @user/shared/selectors/selector to shorten the import path

In tsconfig.base.json

"paths": {
   "@user/*": ["src/app/user/*"]
 },

🌍 Your Environment

@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      10.1.3
@angular/cli                      10.0.8
@angular/material                 10.1.3
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

[alan-agius4]

Hi @ngohungphuc, this should be solved in 10.1.0-rc.0.

Can you try updating and see if this solved the issue? If the problem persists after upgrading, please provide a simple repository reproducing the problem.

ng update @angular/cli --next

[ngohungphuc]

@alan-agius4 I cant use rc version. This app is just on production.

[alan-agius4]

@ngohungphuc, you can try to RC version solely for testing.

Unfortunately, without a reproduction we’ll have be unable to action this issue.

[BenRacicot]

@alan-agius4 I can confirm this issue, but for "@angular-devkit/build-angular": "~0.1001.0" and Angular 10.1.0 packages.

Replicate by:

1. Works: "@angular-devkit/build-angular": "~0.1000.4"
2. All aliases break: "@angular-devkit/build-angular": "~0.1001.0"

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[BenRacicot]

@alan-agius4 my apologies for taking so long to create a reproduced example as you kindly asked, I've been very busy.

github.com/BenRacicot/alias-not-found-repro

1. Just pull, install packages and run to see the aliased files not found
2. change build-angular to "@angular-devkit/build-angular": "~0.1000.4" install and run to see them work as usual

Notes: Just an observation, the error:

ERROR in ./src/app/messaging/messaging.component.ts 12:24-35
"export 'COLLECTIONS' was not found in '@common'

seems to be pointing to the compiled file. (with those line numbers) Is that right? So it would seem that aliased deps are not making it into the compiled file.