在ngModule导入中找不到模块

Question

I have a strange problem....I use npm install to install ng-push and import PushNotificationsModule from 'ng-push' and place PushNotificationsModule in my ngModule imports. When I do ng build or ng build --prod both builds are success but the dev build fail when of do localhost:3000. The --prod build works. This is the error from chrome:

 compiler.js:15989 Uncaught Error: Unexpected value 'PushNotificationsModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:486)
    at compiler.js:15240
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15215)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34374)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:34268)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/esm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
    at PlatformRef.push../node_modules/@angular/core/esm5/core.js.PlatformRef.bootstrapModule (core.js:5578)
    at Module../src/main.ts (main.ts:16)

The package.json and appModule are:

package.json:
 "ng-push": "0.2.0",
appModule:
import { PushNotificationsModule } from 'ng-push';
@NgModule({
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    ........
    ........
    MultipleDatePickerModule,
    ChartsModule,
    PushNotificationsModule,
    .......
  ]

I am using the following stack:

Angular CLI: 6.2.9
Node: 8.11.4
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.9
@angular-devkit/build-angular     0.8.9
@angular-devkit/build-optimizer   0.8.9
@angular-devkit/build-webpack     0.8.9
@angular-devkit/core              0.8.9
@angular-devkit/schematics        0.8.9
@angular/cdk                      5.2.5
@angular/cli                      6.2.9
@angular/material                 5.2.5
@ngtools/webpack                  6.2.9
@schematics/angular               0.8.9
@schematics/update                0.8.9
rxjs                              5.5.12
typescript                        2.5.3
webpack                           4.16.4

I also noticed that the sequence of my import statements are re-arranged after a build...I never saw this happen before.

Does anyone have an idea whats going on here? any help is appreciated.

EDIT: This is from the GitHub page as to the usage:

Import the PushNotificationsModule in to your AppModule

@NgModule({
    imports: [PushNotificationsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

try to import

PushNotificationsService

and add it in the providers collection

Answer 2

If you will go into the node_modules/ng-push/index.d.ts you will see PushNotificationsModule is not a node module, so you are getting that error message.

Below is the content of the index.d.ts

export * from './services/push-notifications.service';
export * from './interfaces/push-notification.type';
export declare class PushNotificationsModule {
}

Make sure you are importing the angular module from correct file.