angular: Compiler-cli Error: Compilation failed. Resource file not found: import..... .scss
I’m submitting a … (check one with “x”)
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
When running the command
node_modules/.bin/ngc -p tsconfig-aot.json
the following result occurs:
Error: Compilation failed. Resource file not found: /Users/xxxxx/xxxxx/xxxxx/xxxxx/__scss/global at ModuleResolutionHostAdapter.readResource (/Users/xxxx/xxxxx/xxx/xxxxx/node_modules/@angular/compiler-cli/src/compiler_host.js:369:19) at CompilerHost.loadResource (/Users/xxxxx/xxxxx/xxxx/xxxx/node_modules/@angular/compiler-cli/src/compiler_host.js:243:85) at Object.get (/Users/xxxx/xxxx/xxxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:24571:107) at DirectiveNormalizer._fetch (/Users/mbp06/xxxx/xxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13206:43) at /Users/mbp06/xxx/xxxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13334:53 at Array.map (native) at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/mbp06/xxx/xxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13334:14) at /Users/mbp06/xxxx/xxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13337:26 at process._tickCallback (internal/process/next_tick.js:109:7) at Module.runMain (module.js:607:11) Compilation failed
Expected behavior
Minimal reproduction of the problem with instructions the issue is similarly seen here https://github.com/swimlane/ngx-datatable/issues/459
What is the motivation / use case for changing the behavior? AOT won’t compile
Please tell us about your environment:
MacOs, VS code, npm
-
Angular version: 2.0.X Angular 4.0.3
-
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome
-
Language: [all | TypeScript X.X | ES6/7 | ES5] Node 7.9 TypeScript 2.3.0 Angular 4.0.3
-
Node (for AoT issues):
node --version=
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 10
- Comments: 46 (12 by maintainers)
I could reproduce the issue thanks to this repo.
The root cause is that Angular only supports
@importfor standard CSS files, but not the extended version of Sass, which is documented here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#importAFAIK, there is no plan to natively support Sass in Angular. So, such transformation should be done as a pre-process before running
ngc.@tbosch Can you confirm please?
Our first Angular 2 app launched in production and we were not able to utilize the AOT configuration. This is going to be my last effort on this subject to ask you wonderful people to reconsider this decision.
@tbosch @IgorMinar @jelbourn @mmathys @mary-poppins @DzmitryShylovich
If you support css and support using a file such as scss why would you not support the basic functionality of what that file does. All we are asking here is for the file to do what it does as natively. Which by the way is the same thing a css file does. @import.
Now, I am understanding of the consideration of not supporting it but really what is the harm or reason for not supporting it? Is it difficult or to complex to code for? I don’t think that is it. Is it something else to maintain? Perhaps, but this is an open source project. I am sure there are scores of people that would want this functionality that would be happy to maintain this segment of code.
This type of configuration exists in the CLI but not in a native webpack configuration not using the cli. That seems very counterproductive and a limiting reagent to forcing everyone to use angular-cli. Now I have no issue using angular cli but like I have said before it is to boxy in configuration and limiting… perhaps that has changed and configuration is more open as I have not tried it out in some time.
Also, where is the miscommunication coming from. Either you guys aren’t understanding our build process and why this is important or we are not understanding your proposal for an alternative.
Let’s be fair here, if there is an alternative let’s propose it and work through what that build process would look like… If it is fair and feasible let’s document it and let it exist for those who need to utilize it. If it is not fair and feasible can you all then consider adding this functionality in.
So in the end I propose we work together and get this issue resolved and not just let it linger. I am more than willing to do anything to help and document the final results but this issue is a little frustrating and I want to tackle it.
Thanks for your consideration
@tbosch again you’re asking to remove the workflow from webpack and the workflow process in general.
As of now, a user can simply create a component… a corresponding scss file and continue working like nothing has happened.
We have in our enterprise build as of this moment… over 74 main components… not every single one has a corresponding scss file but most of them do.
Again, I would beg for sass and less to be treated like first class citizens here. I can’t imagine why not. if you are going to put something in this would be it. How much effort does this really add?
@mlaval Would you be able to consider reopening this? We have a huge enterprise application that we are trying to run in AOT for production and this is the only thing holding us back from AOT. Sass was used throughout the application.
Agree with @xtianus79, it feels weird for angular-cli to support preprocessors but not for AoT build.
@StephenFluin @tbosch @MohibWasay @mmathys @xetys @maxailloud and others… I can officially say the solution of using @ngtools/webpack worked.
Here is a working repo of the changes I made mirroring for the most part our production skeleton build.
https://github.com/xtianus79/angular-enterprise-template
I will say this this. Grab your bootstraps because if you thought TypeScript was strict before well that was just your .ts files. Since AOT is going straight to the source it will typecheck the templated files too… so bear with it.
It will not produce the dist folder section until your error free. That is definately a difference I noticed in version 1.5 as opposed to the ejected version that angular-cli was using of version 1.1 I believe.
***Sidenote I really need to find a good template linter now that is AOT compatible. Any suggestions?
So in all, my suggestion is to use the build you are starting with via webpack and start there. The only thing I really had to do here is intercept the ts loader configuration. Everything else was pretty much the same.
Again, I used the latest version I could find which was @ngtools/webpack 1.5
I think that is probably / perhaps the most confusing thing about the process is configuring which versions of webpack, TS, and @ngtools/webpack to be utilizing together to get an expected result. But it does work and this process does exactly what was described before by Tbosch and Stephen… lets your webpack run and build then runs the AOT of the angular application.
so my main suggestion here would be provide versioning for the @ngtools!
After doing some performance benchmarking and testing I will post the results.
Thanks to the Angular team for being super helpful and supportive in this issue I hope it can help others.
seems to be still present, as it was reported today again at JHipsters issue tracker
@xtianus79 This starter project works with scss: It needs gulp tasks to convert scss to css and do weird cross inject renaming inside source files. it’s ugly but it works.
https://github.com/evertonrobertoauler/cli-universal-demo
Hi Guys
I’m a n00b with this but I got the same problem. I noticed that for some reason everything sitting in a scss directory had the “.scss” extension removed then the file is not found, I added this as a hack to @angular/compiler-cli/src/compiler_host.js line 368 (cli version 4.1.0):
if (s.indexOf(‘/scss’) > -1) { s += ‘.scss’; }
and it seemed to find the files. Any clue as to what might be causing that?
Regards