Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Adding an Angular library makes the publish process fail #1293

@Gimly

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions