Javascriptservices: Adding an Angular library makes the publish process fail

[Gimly]

I'm trying to do a publish, but the node node_modules/webpack/bin/webpack.js --env.prod command that is run during the publishing process fails with errors related to libraries that I am using. Namely, angular2-notifications and ng2-semantic-ui.

Everything is working fine when I'm running the application, but when I try to publish I get errors. I have reproduced the error by simply adding the angular2-notifications library to a freshly created project and I'm getting that error:

    ERROR in ./~/angular2-notifications/src/simple-notifications.module.ts
    Module parse failed: C:\sources\test\node_modules\angular2-notifications\src\simple-notifications.module.ts Unexpected character '@' (18:0)
    You may need an appropriate loader to handle this file type.
    | export * from './simple-notifications/services/notifications.service';
    |
    | @NgModule({
    |   imports: [
    |       CommonModule
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 23:0-78
     @ ./ClientApp/boot.browser.ts

    ERROR in ./~/angular2-notifications/src/simple-notifications/services/notifications.service.ts
    Module parse failed: C:\sources\test\node_modules\angular2-notifications\src\simple-notifications\services\notifications.service.ts Unexpected character '@' (7:0)
    You may need an appropriate loader to handle this file type.
    | import {Icons, defaultIcons} from '../interfaces/icons';
    |
    | @Injectable()
    | export class NotificationsService {
    |
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 21:0-102
     @ ./ClientApp/boot.browser.ts

    ERROR in ./$$_gendir/~/angular2-notifications/src/simple-notifications/components/simple-notifications.component.ngfactory.ts
    Module parse failed: C:\sources\test\$$_gendir\node_modules\angular2-notifications\src\simple-notifications\components\simple-notifications.component.ngfactory.ts Unexpected token (16:41)
    You may need an appropriate loader to handle this file type.
    | import * as i5 from '@angular/common';
    | import * as i6 from 'angular2-notifications/src/simple-notifications/components/simple-notifications.component';
    | const styles_SimpleNotificationsComponent:any[] = ['\n        .simple-notification-wrapper {\n            position: fixed;\n            width: 300px;\n            z-index: 1000;\n        }\n        \n        .simple-notification-wrapper.left { left: 20px; }\n        .simple-notification-wrapper.top { top: 20px; }\n        .simple-notification-wrapper.right { right: 20px; }\n        .simple-notification-wrapper.bottom { bottom: 20px; }\n        \n        @media (max-width: 340px) {\n            .simple-notification-wrapper {\n                width: auto;\n                left: 20px;\n                right: 20px;\n            }\n        }\n    '];
    | export const RenderType_SimpleNotificationsComponent:i0.RendererType2 = i0.ɵcrt({encapsulation:2,
    |     styles:styles_SimpleNotificationsComponent,data:{}});
     @ ./$$_gendir/ClientApp/app/components/fetchdata/fetchdata.component.ngfactory.ts 9:0-160
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
     @ ./ClientApp/boot.browser.ts

    ERROR in ./~/angular2-notifications/src/simple-notifications/components/simple-notifications.component.ts
    Module parse failed: C:\sources\test\node_modules\angular2-notifications\src\simple-notifications\components\simple-notifications.component.ts Unexpected character '@' (7:0)
    You may need an appropriate loader to handle this file type.
    | import {NotificationsService} from '../services/notifications.service';
    |
    | @Component({
    |     selector: 'simple-notifications',
    |     encapsulation: ViewEncapsulation.None,
     @ ./$$_gendir/ClientApp/app/components/fetchdata/fetchdata.component.ngfactory.ts 10:0-112
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
     @ ./ClientApp/boot.browser.ts

What I did to reproduce the error was

• Create a fresh dotnet/angular app dotnet new angular
• Import the angular2-notifications library using npm npm install angular2-notifications --save
• Modify the app.module.shared file and add SimpleNotificationsModule.forRoot() to the NgModule import
• Add <simple-notifications></simple-notifications> to the top of the fetchdata.component.html
• Add <button (click)="saySomething()">Say something!</button> to the end of the same file
• Add private service: NotificationsService to the fetchdata.component.ts constructor parameters
• Add saySomething() { this.service.alert("This is an alert!"); } to the FetchDataComponent class

If you try to run the app directly, you'll have the "Say something" button added to the fetch data sample which, when clicked, displays a notification. Then, if you try to publish, you'll have the error message I pasted above.

[Gimly]

Found the solution, issue was linked to the AoT, as explained in issue #1168. I could fix it by removing the include: /ClientApp/ setting from webpack.config.js.

Closing this issue since it's already going to be fixed in the next SDK.