Skip to content

Absolute or Relative templateUrls for Angular Components aot #8633

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
JBoothUA opened this issue Nov 25, 2017 · 4 comments
Closed

Absolute or Relative templateUrls for Angular Components aot #8633

JBoothUA opened this issue Nov 25, 2017 · 4 comments
Assignees
Labels
needs: repro steps We cannot reproduce the issue with the information given

Comments

@JBoothUA
Copy link

JBoothUA commented Nov 25, 2017

angular/cli: 1.5.3
angular-devkit/build-optimizer: 0.0.33
angular-devkit/core: 0.0.20
angular-devkit/schematics: 0.0.36
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.8.3
schematics/angular: 0.1.5
typescript: 2.6.1
webpack-bundle-analyzer: 2.9.1
webpack-merge: 4.1.1
webpack: 3.8.1
WINDOWS 10

I've been stuck trying to get AOT working with my Webpack Unit Tests. (ngtools/webpack).
OR at least along-side my unit tests....

Can anyone help me at all? Or have any examples?

The main issue I'm seeing seems to be with the component's templates. The component tests all say 'Failed to load xxx.html'. During the karma unit tests..

I am trying to unit test with relative (aot) urls in the source code. but what's the trick here without 2 urls in the source code? (absolute urls for jit unit tests and relative urls for aot production)??

What am I missing?

I am using webpack with aot NOT angular-cli for a use project and this is a blocker..

@filipesilva filipesilva self-assigned this Nov 27, 2017
@filipesilva filipesilva added the needs: repro steps We cannot reproduce the issue with the information given label Nov 27, 2017
@filipesilva
Copy link
Contributor

I don't have any example for you to follow but the loader works in webpack, so if you're using webpack in karma then it should work too.

However, you mention AOT a fair few times but there is not support for unit tests in AOT yet (see #8007 for info).

We only replace template paths with require calls for JIT. So if you're trying to use AOT in unit tests I'd expect you to get those errors, because unit tests are not being ran with AOT and when a component is loaded, it will fail to load the template.

If you can put up a repro using JIT where unit tests are not running correctly, I'm happy to take a look.

@JBoothUA
Copy link
Author

JBoothUA commented Nov 27, 2017

Thank you so much! I think you can hopefully get me on the right track with 1 more question.

I unfortunately was coming to the same conclusion that karma unit tests do not support AoT, but I'm still confused on the best practice here..

I had to change my source code to have relative urls everywhere for each component's style and template url. that's source code changes that were required to run the app with AoT (as far as I understood).

so do I now need another set of source code with absolute paths to run the unit tests?
Or how do I run with relative template urls for the app and absolute template urls for unit testing, hopefully I dont need to have both urls in the source code?

as far as repro steps, I think you have foreseen my problem. i am trying to unit test with relative (aot) urls in the source code. but what's the trick here without 2 urls in the source code? (absolute urls for jit unit tests and relative urls for aot production)

@JBoothUA JBoothUA changed the title AoT ngtools/webpack and Karma ngtools/webpack relative vs absolute templateUrls Nov 29, 2017
@JBoothUA JBoothUA changed the title ngtools/webpack relative vs absolute templateUrls Absolute or Relative templateUrls for Angular Components aot Nov 30, 2017
@JBoothUA JBoothUA closed this as completed Dec 1, 2017
@JBoothUA
Copy link
Author

JBoothUA commented Dec 1, 2017

i needed angular2-template-loader to pull this off

@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 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests

2 participants