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.

[ngohungphuc]

@BenRacicot try with your version still having that same error

[BenRacicot]

Hey @ngohungphuc, did you pull my repro and compare it to your project?
Maybe @alan-agius4 will know which version this fix will drop in.

[alan-agius4]

This should be fixed in @angular-devkit/build-angular 0.1001.4

[ngohungphuc]

@alan-agius4 @BenRacicot
I still have the same error

WARNING in ClientApp\src\app\app.module.ts depends on '@shared/services/auth.service'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

package.json

"dependencies": {
      "@angular/animations": "~10.1.4",
      "@angular/cdk": "^10.2.3",
      "@angular/common": "~10.1.4",
      "@angular/compiler": "~10.1.4",
      "@angular/core": "~10.1.4",
      "@angular/forms": "~10.1.4",
      "@angular/localize": "^10.1.4",
      "@angular/material": "~10.2.3",
      "@angular/platform-browser": "~10.1.4",
      "@angular/platform-browser-dynamic": "~10.1.4",
      "@angular/router": "~10.1.4",
      "@angular/service-worker": "~10.1.4",
      "@fortawesome/fontawesome-pro": "^5.15.0",
      "@ng-select/ng-select": "^5.0.3",
      "@ngrx/effects": "^10.0.0",
      "@ngrx/entity": "^10.0.0",
      "@ngrx/store": "^10.0.0",
      "@ngrx/store-devtools": "^10.0.0",
      "bitset": "^5.1.1",
      "core-js": "^3.6.5",
      "lodash.intersectionby": "^4.7.0",
      "ngx-quicklink": "^0.2.4",
      "rxjs": "^6.6.3",
      "tslib": "^2.0.1",
      "zone.js": "~0.11.1"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "0.1001.4",
      "@angular/cli": "~10.1.4",
      "@angular/compiler-cli": "~10.1.4",
      "@angular/language-service": "~10.1.4",
      "@types/jasmine": "~3.5.14",
      "@types/jasminewd2": "~2.0.8",
      "@types/node": "^14.11.2",
      "@typescript-eslint/eslint-plugin": "^4.3.0",
      "@typescript-eslint/parser": "^4.3.0",
      "codelyzer": "^6.0.1",
      "eslint": "^7.10.0",
      "eslint-config-prettier": "^6.12.0",
      "eslint-plugin-rxjs": "^0.0.3-beta.30",
      "gzip-all": "^1.0.0",
      "husky": "^4.3.0",
      "jasmine-core": "~3.6.0",
      "jasmine-spec-reporter": "~6.0.0",
      "karma": "~5.2.3",
      "karma-chrome-launcher": "~3.1.0",
      "karma-coverage-istanbul-reporter": "~3.0.3",
      "karma-jasmine": "~4.0.1",
      "karma-jasmine-html-reporter": "^1.5.4",
      "karma-junit-reporter": "^2.0.1",
      "karma-verbose-reporter": "0.0.6",
      "ngrx-tslint-rules": "^2.1.4",
      "npm-check-updates": "^9.0.3",
      "rxjs-tslint-rules": "^4.34.3",
      "stylelint": "^13.7.2",
      "stylelint-config-recommended": "^3.0.0",
      "stylelint-config-recommended-scss": "^4.2.0",
      "stylelint-config-standard": "^20.0.0",
      "stylelint-scss": "^3.18.0",
      "tslint-config-prettier": "^1.18.0",
      "typescript": "~4.0.3",
      "webpack-bundle-analyzer": "^3.9.0"
    },
    "optionalDependencies": {
      "protractor": "~7.0.0",
      "ts-node": "~9.0.0",
      "tslint": "~6.1.3"
    }

[BenRacicot]

@ngohungphuc that is only a warning and not related to this alias issue which has been fixed. Your warning is related to a documented Angular strategy.

From the docs on configuring commonjs dependencies:

It is recommended that you avoid depending on CommonJS modules in your Angular applications.

[ngohungphuc]

@BenRacicot the code is within my angular application and it's not any third party library.

[BenRacicot]

@ngohungphuc I know. Did you look into the link from the docs?
Feel free to create a stackoverflow question with a stackblitz reproduction and message me on Twitter. Otherwise, your problem is not related to this thread.

[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.}