Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unexpected value null imported by the module t

Tags:

angular

heroku

I got this strange issue when deploying my app (a fork of angular2-express-starter) to Heroku. https://totalautosapp.herokuapp.com/ At first i thought it was Heroku, but I've deployed it to netlify and same happens.

It says:

Error: Unexpected value 'null' imported by the module 't'

Yes, there are a lot of similar questions that allowed me to understand the issue a lot better, but what blinds me is the module 't'. What module is it referring to?

And most of the questions state that the unexpected value is 'undefined', not 'null'. which brings me the idea that it is importing a null module, but still don't know which one is doing that, even when it works in devEnvironment.

Here's my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routing } from './app.router';
import { effects, store, instrumentation } from './store';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    FormsModule,
    HttpModule,
    store,
    effects,
    routing,
    instrumentation
  ],
   bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

And if anyone would take a deep look, here's my shared module: https://codeshare.io/adKKz5

Any help would be well appreciated.

EDIT:

Using console.log I was able to compare outputs from my local build and the heroku one. So I detected that the null module is StoreDevToolsModule from ngrx/store-devtools.

This output is from local run in the line console.log(instrumentation)

Object { ngModule: StoreDevtoolsModule(), providers: Array[3] }

And this one from heroku

null  main.d61dd7a248d9bbd30ca6.bundle.js:1:5868

Error: Unexpected value 'null' imported by the module 't'

like image 327
Joan Gil Avatar asked Jan 12 '17 03:01

Joan Gil


2 Answers

I faced the same problem when I wanted to build my project by npm run build I searched for many solutions, but in the none of them helped. The problem's solution was easy!

I am using ng-lazyload-image and I imported it without curly braces. After adding them around LazyLoadImageModule vuala it worked. Will be happy if this will help somebody.

Problem:

import LazyLoadImageModule from 'ng-lazyload-image';

@NgModule({
  imports: [
    LazyLoadImageModule,
....]
})

Solution:

import { LazyLoadImageModule } from 'ng-lazyload-image';

@NgModule({
  imports: [
    LazyLoadImageModule,
....]
})
like image 167
Nodira Avatar answered Nov 04 '22 03:11

Nodira


I was having the same issue, it was caused because my NgModules classes had the "export default" modifier. Look if your modules had the export default and remove the "default" modifier as it's not supported by ngc.

like image 27
cristhiank Avatar answered Nov 04 '22 05:11

cristhiank