@ngtools/webpack - aot error when compiling a library containing component

[stephenlautier]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

• Node 8.2.1
• NPM 5.3.0
• Windows 10
• ngtools/webpack: 1.5.5

Repro steps.

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

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

Note: This is pretty much a project created with dotnet new angular + added material

The log given by the failure.

    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

Desired functionality.

Build app with AoT when having a library which contains components.

Mention any other details that might be useful.

I'm using the JavaScriptServices for .netcore (also created an issue there aspnet/JavaScriptServices#1168).
When I'm 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 above error.

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 {

}

This only happen when using @ngtools/webpack and build as AoT

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

[stephenlautier]

Sorry, it was issue with the template and not with this.

[kemmis]

@stephenlautier what was the issue? I'm running into the exact same problem, using the JavaScriptServices template with Material and doing the prod webpack build. Any details you can share would be awesome. Thanks!

[stephenlautier]

@kemmis pretty much within your webpack config where you have test: /\.ts$/, include: /ClientApp/ remove include: /ClientApp/ as per aspnet/JavaScriptServices#1168

[kemmis]

@stephenlautier, Thank you, kind sir! Worked like a charm.

[stephenlautier]

Glad it helped 👍

[angular-automatic-lock-bot]

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