Javascriptservices: Angular AOT error when having a component within a library

[stephenlautier]

Hi,

Not sure if this an issue, or requires some changes within webpack in order to get it work, perhaps someone else already seen this issue as it should be quite common I would say.
When adding a library such as Angular Material, or even I created a simple component within a library to narrow this down, and building the app as AoT, we get the following error:

    ERROR in ./$$_gendir/~/@odin/ngx.core/dist/xyz.component.ngfactory.ts
    Module parse failed: C:\dev\git\loki\$$_gendir\node_modules\@odin\ngx.core\dist\xyz.component.ngfactory.ts Unexpected token (11:25)
    You may need an appropriate loader to handle this file type.
    | import * as i0 from '@angular/core';
    | import * as i1 from '@odin/ngx.core/dist/xyz.component';
    | const styles_XyzComponent:any[] = ([] as any[]);
    | export const RenderType_XyzComponent:i0.RendererType2 = i0.ɵcrt({encapsulation:2,styles:styles_XyzComponent,
    |     data:{}});
     @ ./$$_gendir/ClientApp/app/areas/home/home.component.ngfactory.ts 9:0-104
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
     @ ./ClientApp/boot-browser.ts

The following is a simple component which doesn't work

import { Component } from "@angular/core";

@Component({
    selector: "odn-xyz",
    template: `<h1>Xyz5</h1> <button>a button</button>`
})
export class XyzComponent {

}

These are the conditions when it doesn't work.

• when built with aot (without AoT it works fine)
• and in a separate library (as a vendor)
• and library contains a component

[SteveSandersonMS]

It sounds like the third-party package you're using wasn't built in a way that's compatible with AoT. I don't think they should have included the *.ngfactory.ts files in the NPM package, as they are meant to be built when the application is built.

If you want to pursue getting a fix for this, can you report it to the package author?

[stephenlautier]

@SteveSandersonMS well the thing is the libraries I'm using one is Angular Material the official, so I doubt it's not built correctly with AOT and the other as I stated it's my library, and I just checked both and they don't have *.ngfactory.ts generated.

Just to let you know we have been investigating this around 2 days already, wasn't too hasty to open the issue.
I think there's either a problem with the @ngtools/webpack (perhaps I should open an issue there) or with the setup as it is now.

[SteveSandersonMS]

OK, thanks for the update. It's entirely possible there's some limitation in @ngtools/webpack, or possibly in the way AoT is configured in your project, or possibly in the way AoT is set up in the template. I'm not sure what version of the templates you're starting from - you have boot-browser.ts rather than boot.browser.ts so it must not be the absolute latest (but it might be close enough not to make a difference).

If you do manage to track this down and believe there's a bug in the code in this repo, could you please let us know the details? Thanks!

[stephenlautier]

@SteveSandersonMS sure if I have any findings regarding this I will reply to this one; as its quite a headache and it's crucial, thanks.

[stephenlautier]

Just a slight update, I created a repo with a fresh dotnet new angular and added material and it has the same error

https://github.com/stephenlautier/aot-comp-error

If anyone wants to give it a go:

• git clone https://github.com/stephenlautier/aot-comp-error.git
• npm i
• npm run build:rel

[SteveSandersonMS]

Thanks for posting the repro info.

I think the problem is on this line in webpack.config.js:

{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },

The include: /ClientApp/ setting means that it won't compile any .ts files in other locations. This causes problems with AoT because the AoT loader generates temporary .ts files in a different directory during the build. Ultimately you end up with the error You may need an appropriate loader... because Webpack doesn't know what to do with the .ts files generated by the AoT loader.

The fix is therefore trivial: just remove include: /ClientApp/ from your webpack.config.js.

I will look at making this the default in the template. Unfortunately it's too late for this change to be included in the .NET Core 2.0 SDK so people will have to discover for themselves the need to remove this in certain AoT scenarios, depending on what third-party packages they use.

[stephenlautier]

@SteveSandersonMS thank you soooo much!

Being not too familiar with webpack didn't help, at least it wasn't just my issue.

Thanks again.

[SteveSandersonMS]

The fix is now in the dev branch so it will be included in the next SDK.

[mmgrt]

I had the same issue with angular2-markdown package, removing include: /ClientApp/ fixes the problem.

[sebichondo]

I changed my wepack.config.js to
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },