Skip to content

Angular AOT application will not build with AOT set to true in the angular.json file #13820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
brucekbenton opened this issue Mar 5, 2019 · 5 comments

Comments

@brucekbenton
Copy link

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

This is new to the Angular work space so it is the first time I have tried it

Description

When creating an angular cli worskspace containing multiple libraries, cross library dependencies work in the non AOT compiled build but fail in the build when the AOT=true flag is set in the angular.json file. Error message is:
"Error in c:/Users/bruce.benton/Source/Repos/AotTest/dist/comp-container/comp-container.ngfactory.js
Module not found: Error: Can't resolve 'comp-container' in 'C:\Users\bruce.benton\Source\Repos\AotTest\projects\application1\src\ass'

This is not an upgrade issues and happens in a new work space created from scratch.

🔬 Minimal Reproduction

🔥 Exception or Error





"Error in c:/Users/bruce.benton/Source/Repos/AotTest/dist/comp-container/comp-container.ngfactory.js
Module not found: Error: Can't resolve 'comp-container' in 'C:\Users\bruce.benton\Source\Repos\AotTest\projects\application1\src\ass'


## 🌍 Your Environment


Angular CLI: 6.2.9
Node: 8.11.2
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.9
@angular-devkit/build-angular      0.8.9
@angular-devkit/build-ng-packagr   0.8.9
@angular-devkit/build-optimizer    0.8.9
@angular-devkit/build-webpack      0.8.9
@angular-devkit/core               0.8.9
@angular-devkit/schematics         0.8.9
@angular/cli                       6.2.9
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.2.9
@schematics/angular                0.8.9
@schematics/update                 0.8.9
ng-packagr                         4.7.1
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.16.4

Anything else relevant?

@brucekbenton
Copy link
Author

Additional information since apparently I did not use the template correctly.

Minimal Reproduction:
Create a new Angular workspace => "AotTest"
Create a new library service => "service1"
Create a new library component container to contain re-usable components => "compContainer"
Create a new component inside the component container => "component1"
Create a new application library to consume both the service and the re-usable component
Implement a stub service endpoint in service1
Inject service stub into component1 and call service
load re-usable component component1 into application1 and add the selector to the html template
run ng serve application1 --open to demonstrate functionality
Create new configuration for application1 in angular.json called "devtest". Set the aot flag to true in this config
run ng build --configuration=devtest

You will get the error messages above.

This is not an upgrade and the project was created specifically for this test since I am having this problem in a real project. I would expect dependency resolution and scoping to work the same regardless of optimization.

Here is a GitHub repro project: https://github.com/brucekbenton/AotTest

@brucekbenton
Copy link
Author

Still learning the interface:-) Did not mean to close the issue

@alan-agius4
Copy link
Collaborator

Hi @brucekbenton, the main issue here is that your libraries are named kebab cases example comp-container and not camelCase like compContainer.

The imports and path mappings in the tsconfig should be kebab-case.
https://github.com/brucekbenton/AotTest/blob/master/tsconfig.json#L27
https://github.com/brucekbenton/AotTest/blob/0ad15dc6ae865e41d889505b3700c1b53430fc32/projects/application1/src/app/app.component.ts#L3

This was a problem with older versions of the CLI. I suggest that you update to the latest version of the CLI and it's dependencies.

Duplicate of #11017

@brucekbenton
Copy link
Author

Since I am getting ready to do a large release at this time I don't really want to upgrade my entire environment. Therefore, I tracked down exactly what needed to get updated to resolve the dependency issues.

I had to make configuration changes for each entity generating the error message above (service or component). In this simple repro that means I needed to make these changes for comp-container.

I made the following changes:

  • Updated all references in root workspace tsconfig.json file (AotTest/tsconfig.json) from "comp-container" to "CompContainer"
  • Updated the "dest" value in the entity specific ng-package.json (AotTest/projects/comp-container/ng-package.json) to "CompContainer"
  • Updated the "name" reference in the entity specific package.json file to "CompContainer"

I did not make any updates to angular.json or change any of the selector references or file names.

I also did this for my actual project which consisted of several services and components and it worked there as well. For my simple project I did not actually have to make the ng-package.json and package.json updates but I seemed to need it for my more complicated real project.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants