angular-cli: AOT runtime issue - Uncaught TypeError: Object prototype may only be an Object or null: undefined

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

This happens when I run ng serve --aot. If I just run ng serve everything works fine.

The log given by the failure.

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at __extends (person-change.service.ts:8)
    at company.subServices.ts:77
    at Object.<anonymous> (company.subServices.ts:91)
    at __webpack_require__ (bootstrap 9953f62…:52)
    at Object.<anonymous> (case.service.ts:85)
    at __webpack_require__ (bootstrap 9953f62…:52)
    at Object.MaritialStatusEnum.getInstance.instance (currency.enum.ts:72)
    at __webpack_require__ (bootstrap 9953f62…:52)
    at Object.CountryEnum.getInstance.instance (address.model.ts:211)
    at __webpack_require__ (bootstrap 9953f62…:52)
    at Object.<anonymous> (address.subService.ts:42)
    at __webpack_require__ (bootstrap 9953f62…:52)
    at Object.<anonymous> (company.subServices.ts:125)
    at __webpack_require__ (bootstrap 9953f62…:52)

Desired functionality.

The app to work - it was working in --aot mode before some changes I’ve been working on today.

Mention any other details that might be useful.

The error is triggered by the following class which extends a generic abstract class

import {Injectable} from "@angular/core";
import {PersonModel} from "../../models/person/person.model";
import {ObjectChangeService} from "./object-change.service";

@Injectable()
export class PersonChangeService extends ObjectChangeService<PersonModel> {

}
// The error in my Chrome console -  at __extends (person-change.service.ts:8) - is triggered/shown at the closing '}' in the line above

// WEBPACK FOOTER //
// ./src/app/services/change/person-change.service.ts

The compilation is successful - I get the error during runtime

** NG Live Development Server is running on http://localhost:4200 **
Hash: 9953f6279102d223f071
Time: 49537ms
chunk    {0} main.bundle.js, main.bundle.js.map (main) 2.02 MB {3} [initial] [rendered]
chunk    {1} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 77.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.2 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 17 (2 by maintainers)

Most upvoted comments

I got this error when I was importing from barrels:

import { User } from './../../features/users';
import { User } from './../../features/users/index';

Importing directly from file resolves the issue:

import { User } from './../../features/users/user.model';

Note that User in my case is just a TypeScript class, no decorators or DI stuff…

+53

sasxa on Apr 28, 2017

Closing as it looks like @radoslavpetranov solved it in the end.

filipesilva on May 3, 2017

In case anyone else cares, it appears this maybe a WebPack issue

https://github.com/Microsoft/TypeScript/issues/14734

radoslavpetranov on Mar 31, 2017

Ok for anyone having this issue, please check that in the constructor, you are not using a Type that does not exist in the bundle…

I had

import { Response } from 'express'
import { RESPONSE } from '@nguniversal/express-engine/tokens'

constructor( @Optional() @Inject(RESPONSE) response: Response) {
    this.response = response
}

but the issue was typing response to an interface that doesn’t exist at runtime

so my solution to maintain strong typing in the project was:

import { Response } from 'express'
import { RESPONSE } from '@nguniversal/express-engine/tokens'

private response: Response

constructor( @Optional() @Inject(RESPONSE) response: any) {
    this.response = response
}

patrickmichalina on Oct 14, 2017

I updated from CLI 1.2.1 to 1.4.5 yesterday and I started getting warnings that circular dependencies were detected and I started getting that same Uncaught TypeError: Object prototype may only be an Object or null: undefined error allover again when running in --aot mode.

I ended up dropping all my barrel files and switched to direct file imports and that resolved both the circular dependency warnings and the --aot error from this issue. I thought I’d share this in case someone else is struggling with the same problem.

radoslavpetranov on Oct 12, 2017

You can also get this error if you’re using APP_INITIALIZER and try to use a class that wasn’t listed in the deps array.

And the stacktrace will be next-to-useless for determining exactly where the real problem is.

killface on Apr 6, 2017