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

[radoslavpetranov]

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

[radoslavpetranov]

For the record, the culprit is a ReflectiveInjector.resolveAndCreate call that I'm making. 2 of the services inside the ReflectiveInjector.resolveAndCreate call are causing the error. If I comment out these 2 services for testing purposes the error is gone. As I said this is only a problem in --aot mode and wasn't even an issue in --aot mode before I started using this functionality in one additional place.

[radoslavpetranov]

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

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

[radoslavpetranov]

Last update on this issue - I didn't manage to figure out what's causing the bad compilation that was triggering the undefined error so finally I changed some stuff around and ditched the ReflectiveInjector.resolveAndCreate approach for the regular DI approach which ultimately got rid of the issue.

If nobody cares about this feel free to close the issue. I learned my lesson - forget that manual injection even exists.

[killface]

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.

[lichunbin814]

@radoslavpetranov How do you solve it ?

[radoslavpetranov]

@lichunbin814 I said in my last comment - I realized this is happening only when I compile in AOT mode and only when I'm using manual DI (i.e. ReflectiveInjector.resolveAndCreate). I changed my code around to get rid of the ReflectiveInjector.resolveAndCreate call and to switch to regular (i.e. constructor) DI and I didn't see the issue any more. Sorry but I don't have a real solution to the issue - I just went around it.

[sasxa]

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

[filipesilva]

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

[josipN]

@sasxa Good job! It was the solution I was looking for!

[victorprocure]

I came across this while searching for a solution to this issue for me. Unfortunately @radoslavpetranov solution did not working for me. What I found however was that my files were being served up in ISO-8859 as the Content-Type by my webserver, instead of UTF-8.
Once I switched Content-Type to UTF-8 in Spring-Boot (in my case), everything worked correctly.

[shlomiassaf]

@filipesilva

I got this now when upgrading to 4.2.0 from 4.1.1

It's either from the compiler-cli or tsc-wrapped dunno which

now its for AOT and JIT

UPDATE: fixed but updating bunch of other non-angular deps, donno which.

[mustafaekim]

I am getting the same runtime error only when I try to run my angular app (4.1) after compiling with AOT/rollup even though the compilation does not cause any error. I dont know what to do because that is an angular app that I develop for more than 6 months and that's the first time I tried compiling with AOT/rollup. The error I get (as it is above) does not tell me anything friendly so I do not know where I should focus. I already use more than 10+ external npm libraries and I wrote 50+ classes. What do you recommend me?

PS: My application works fine when I use JIT compiler.

[solisarg]

I get the error in a different context, while running some tests. I get ride of the error changing the order of the imports at the top of the test file

[Murilo-Perrone]

I got this same error message and concluded that it is a bug in dependency resolution.

I have my service provider class in my project surrounded by a few interfaces and implementation classes, with a lot of implicit casting. It all works fine while I navigate through those classes calling methods and properties. But if I add something like new MyClass() in home.ts, it crashes with this message. Even if such line of code is unreachable.

Hope that helps.

[radoslavpetranov]

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.

[patrickmichalina]

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
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>