Error while compiling in AOT mode with Angular 9

[aas395]

I'm trying to use Angular 9 in my project to take advantage of Ivy. I upgraded my Angular version and then switched on AOT mode. Angular compiles twice (is this intended?) and then I get this error:

While processing files with angular-compilers (for target web.browser):
   packages/angular-typescript-compiler/index.js:374:42: compiler.analyzeModulesAsync is not a function
   at packages/angular-typescript-compiler/index.js:374:42
   at

Meteor 1.9.2
Angular 9.0.5
angular-compilers 0.3.4
@babel/core 7.8.6

I'm new to this entire stack so please let me know if you need more information from me in order to help me figure out what's going on.

[mibto]

Hello,
I have exactly the same issue. It would be awesome if we somehow can continue to use angular with meteor.

[aas395]

In case no one gets back to you quickly, I know this works with Angular 7. I haven't tested 8 thoroughly. You can use 7 to get started if you don't mind being a few versions behind and missing some of the features 8/9 provide

[mibto]

it also works with angular 8... our current setup. i wanted to try out ivy

[cosmin-dumitrache]

@mibto Thank you so much for updating the dependencies for angular-comilers and publishing to Atmosphere.

One more question though. I'm trying to get AOT to work with meteor 1.10.1 but I'm still running into issues. I'm using mibto:angular-compilers 0.3.18 which works great with AOT disabled (no more node-sass errors thanks to your update). However, if I activate the AOT flag

• with Angular 7/8 I get: compiler.ts:843:42: host.isSourceFile is not a function
• with Angular 9 I get: angular-typescript-compiler/index.js:370:42: compiler.analyzeModulesAsync is not a function

(while processing files with mibto:angular-compilers)

I'm struggling to find a solution for this, did anyone manage to find a fix or workaround?

[mibto]

@cosmin-dumitrache can you please try it with version 0.3.4 - i have it working with AOT and angular 8.2.14 and meteor 1.9.2

[cosmin-dumitrache]

@mibto Thanks for the suggestion, but no luck with meteor 1.10.1 :(

One strange thing is that when I try to add angular-compilers 0.3.4 it picks up other versions, not sure why:

meteor add mibto:[email protected]
                                              
Changes to your project's package version selections:
                                              
mibto:angular-compilers            added, version 0.3.18
mibto:angular-html-compiler        added, version 0.3.17
mibto:angular-scss-compiler        added, version 0.3.17
mibto:angular-typescript-compiler  added, version 0.3.18

                                              
mibto:angular-compilers: Rollup, AOT, SCSS, HTML and TypeScript compilers for Angular Meteor

But I did that anyway, and changed Angular to 8.2.14 (still using meteor 1.10.1). The build then produced this error when processing with mibto:angular-compilers compiler.ts:843:42: host.isSourceFile is not a function.

It might work with meteor 1.9.2 as you said, but as far as I know you need the Cordova update in meteor 1.10.1 to be able to produce a version of swift acceptable by the latest XCode. I was fine with meteor 1.8 to be honest, but I can't deploy my app anymore because of swift, so I don't really have an option to not update to 1.10.1.

Mind you, if I disable AOT, it works, but my app suffers a massive performance penalty.

[portah]

meteor updated to the latest 1.10.2
meteor add mibto:angular-compilers@=0.3.4
Looks like working

[aas395]

I've installed meteor 1.10.2, using mibto:angular-compilers (had to clone from github and throw in my packages folder due to some problems including scss files). Installed Angular 9. Still getting this kind of error:

While processing files with mibto:angular-compilers (for target web.browser): packages/mibto:angular-typescript-compiler/index.js:368:42: compiler.analyzeModulesAsync is not a function at packages/mibto:angular-typescript-compiler/index.js:368:42

Any idea where I might be going wrong?

[cosmin-dumitrache]

@aas395 You can try turning off Ivy as described here: https://forums.meteor.com/t/meteor-1-10-1-breaks-angular-integration-when-aot-is-enabled/52511

That will fix your problem but then you'll get a new problem: compiler.ts:843:42: host.isSourceFile is not a function

[SimonSimCity]

@mibto I saw you patching the compiler by setting the compiler-host to an empty object:

https://github.com/mibto/angular-meteor/blob/f39cd151a9e0752533aa8f7dbe0d7802d7a657c7/atmosphere-packages/angular-typescript-compiler/index.js#L345

I got better results (and do not have the error of host.isSourceFile is not a function) when replacing the occurrences of compiler._host by compilerHost, instead of setting it to an empty object. This seems to work quite well.

With these changes I'm able to run Angular 10.1.2 for development, but I'm facing the same error as @aas395 when trying to compile it for production (e.g. trying to run meteor --production).

Any hint for a solution? If you don't have, I'll try to see what I can get, but if someone already has the solution, there's no need to reinvent the wheel 😅

[cosmin-dumitrache]

@SimonSimCity You are correct, patching the compiler host with an empty object tripped me up as well.

I think the easiest fix for you to get rid of the analyzeModulesAsync problem is to turn off Ivy.

I'll publish a solution using this approach soon in the form of a new angular-meteor atmosphere package.

[SimonSimCity]

@cosmin-dumitrache When turning off Ivy (by setting enableIvy to false in the ngcOptions object) I'm faced with the following error:

   While processing files with angular-compilers (for target web.browser.legacy):
   /Users/simon/Documents/packages/compiler/src/util.ts:108:17: Couldn't resolve resource themes from /Users/simon/Documents/angular-project/client/imports/app/app.scss
   at syntaxError (/Users/simon/Documents/packages/compiler/src/util.ts:108:17)
   at Object.resolve (/Users/simon/Documents/packages/compiler/src/aot/compiler_factory.ts:46:15)
   at /Users/simon/Documents/packages/compiler/src/style_url_resolver.ts:40:57
   at String.replace (<anonymous>)
   at extractStyleUrls (/Users/simon/Documents/packages/compiler/src/style_url_resolver.ts:33:32)
   at /Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:251:32
   at Array.map (<anonymous>)
   at DirectiveNormalizer._normalizeStylesheet (/Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:250:41)
   at /Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:236:46
   at Object.then (/Users/simon/Documents/packages/compiler/src/util.ts:96:52)
   at /Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:232:53
   at Array.map (<anonymous>)
   at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:231:28)
   at DirectiveNormalizer._normalizeTemplateMetadata (/Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:161:14)
   at /Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:97:37
   at Object.then (/Users/simon/Documents/packages/compiler/src/util.ts:96:52)
   at DirectiveNormalizer.normalizeTemplate (/Users/simon/Documents/packages/compiler/src/directive_normalizer.ts:95:22)
   at CompileMetadataResolver.loadDirectiveMetadata (/Users/simon/Documents/packages/compiler/src/metadata_resolver.ts:262:54)
   at /Users/simon/Documents/packages/compiler/src/metadata_resolver.ts:482:30
   at Array.forEach (<anonymous>)
   at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (/Users/simon/Documents/packages/compiler/src/metadata_resolver.ts:481:35)
   at /Users/simon/Documents/packages/compiler/src/aot/compiler.ts:89:48
   at Array.map (<anonymous>)
   at AotCompiler.analyzeModulesAsync (/Users/simon/Documents/packages/compiler/src/aot/compiler.ts:88:38)
   at packages/angular-typescript-compiler/index.js:374:42
   at /Users/simon/.meteor/packages/meteor-tool/.1.11.1.95af9c.g0b4t++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/meteor-promise/fiber_pool.js:43:40

In the file /client/imports/app/app.scss I just import another scss file, called themes, which is what triggers the compiler.

It just works when setting the environment variable AOT=0, which disables all the ahead-of-time compilation. This way I can now at least publish my application. I have yet to see what this will allow/close of possibilities, as I'm fairly new to Angular.

[cosmin-dumitrache]

I've published an updated version of angular-compilers that uses the disable Ivy trick. You can use it by replacing your dependency to angular-compilers with digicore:angular-compilers (version 0.4.2).

Hopefully this will be useful for people struggling to run Meteor 1.11 + Angular 10 with AOT enabled.

@SimonSimCity Not sure why you're getting the scss issue, I haven't seen that type of error in my project.

[mibto]

@cosmin-dumitrache thank you very much for the better / proper fix. Do you also get following "error" when using meteor --production or meteor build:

meteor --production
Warning: The --production flag should only be used to simulate production bundling for testing purposes. Use meteor build to create a bundle for production deployment. See: https://guide.meteor.com/deployment.html
[[[[[ ~/WebstormProjects/in-pool ]]]]]        

=> Started proxy.                             
[client]: HTML Files Compilation: 47.611ms   |
[client]: Collecting TypeScript source files: 5.363ms
TypeScript Host Created.: 0.183ms
TypeScript Program Created.: 1440.934ms
Angular Compiler Host Created.: 0.241ms
Angular Compiler Program Created.: 61.400ms
Filtering TypeScript source files: 0.157ms
Modules Analyzed.: 2479.059ms
Emitting All Impls: 1334.711ms
Modules Converted to TypeScript.: 221.186ms
node_modules/@angular/platform-browser/platform-browser.ngfactory.ts (26, 25): Expected 1 arguments, but got 3.
node_modules/@angular/platform-browser/animations/animations.ngfactory.ts (29, 25): Expected 1 arguments, but got 3.
node_modules/@angular/platform-browser/animations/animations.ngfactory.ts (74, 25): Expected 1 arguments, but got 3.
client/imports/app/app.module.ngfactory.ts (123, 25): Expected 1 arguments, but got 3.
[client]: TypeScript Files Compilation: 39.721ms

i also get this "error" in this angular-meteor example project.

it looks like, that my application runs correctly after the build

[ardatan]

Does it work right now with version 0.4.0?