Adding an Angular library makes the publish process fail #407

New Issue

fergalmoran · 2025-08-09T17:16:10Z

fergalmoran commented

2025-08-09 17:16:10 +00:00

Originally created by @Gimly on 9/21/2017

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.

*Originally created by @Gimly on 9/21/2017* 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](https://github.com/flauc/angular2-notifications) and [ng2-semantic-ui](https://github.com/edcarroll/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.

fergalmoran closed this issue

2025-08-09 17:16:10 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#407