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

Angular AOT error when having a component within a library #1168

Closed
stephenlautier opened this Issue Aug 3, 2017 · 10 comments

Comments

Projects
None yet
4 participants
@stephenlautier
Contributor

stephenlautier commented Aug 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@SteveSandersonMS

SteveSandersonMS Aug 3, 2017

Member

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?

Member

SteveSandersonMS commented Aug 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@stephenlautier

stephenlautier Aug 3, 2017

Contributor

@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.

Contributor

stephenlautier commented Aug 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@SteveSandersonMS

SteveSandersonMS Aug 3, 2017

Member

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!

Member

SteveSandersonMS commented Aug 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@stephenlautier

stephenlautier Aug 3, 2017

Contributor

@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.

Contributor

stephenlautier commented Aug 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@stephenlautier

stephenlautier Aug 3, 2017

Contributor

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
Contributor

stephenlautier commented Aug 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@SteveSandersonMS

SteveSandersonMS Aug 3, 2017

Member

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.

Member

SteveSandersonMS commented Aug 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@stephenlautier

stephenlautier Aug 3, 2017

Contributor

@SteveSandersonMS thank you soooo much!

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

Thanks again.

Contributor

stephenlautier commented Aug 3, 2017

@SteveSandersonMS thank you soooo much!

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

Thanks again.

kemmis added a commit to kemmis/Panda that referenced this issue Aug 8, 2017

fixed prod webpack
removed 'include: /ClientApp/' from ts rule per
aspnet/JavaScriptServices#1168
@SteveSandersonMS

This comment has been minimized.

Show comment
Hide comment
@SteveSandersonMS

SteveSandersonMS Aug 21, 2017

Member

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

Member

SteveSandersonMS commented Aug 21, 2017

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

@mmgrt

This comment has been minimized.

Show comment
Hide comment
@mmgrt

mmgrt Sep 4, 2017

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

mmgrt commented Sep 4, 2017

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

@sebichondo

This comment has been minimized.

Show comment
Hide comment
@sebichondo

sebichondo Sep 10, 2017

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

sebichondo commented Sep 10, 2017

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

@ndfreeman ndfreeman referenced this issue Oct 30, 2017

Closed

Webpack error #44

GradientVector pushed a commit to GradientVector/size-distributionizer that referenced this issue Nov 22, 2017

John Harvey
Fix production build by removing "include" statement in webpack confi…
…g according to issue aspnet/JavaScriptServices#1168.

Redraw distribution chart when deleting a measurement.

rurku added a commit to rurku/ShowPics that referenced this issue Mar 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment