angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.74k stars 11.98k forks source link

Uncaught (in promise) TypeError: e is not a constructor #9929

Closed smkart closed 5 years ago

smkart commented 6 years ago

Version:

cliversion

Error

typeerror

Repro steps

Package.json

packagejson

Background

Below function in zone.js is where the error thrown:

zone-function

try catch which returns the error:

zone-error2

Hope the information helps, Please look into this issue ASAP since we need this to be sorted out very quickly

Thanks in advance

smkart commented 6 years ago

Hi, Do we have any update regarding the above issue , We are facing hard time with this issue

It will be so helpful if I get any clue

Thanks

quahkj commented 6 years ago

I also encounter this issue with Angular CLI version 1.7.0. I remember I had a workaround by downgrading angular cli in package.json:

"devDependencies": { "@angular/cli": "1.6.7", ...

But now seem like downgrading above also didn't work for me.

gfaganli commented 6 years ago

waiting for solution.. this error happens when i run with prod mode (ng build/serve --prod), ng build/serve does not generate this error

matulkum commented 6 years ago

+1

pedro412 commented 6 years ago

+1

abbatepabloo commented 6 years ago

+1

karan-intersoft commented 6 years ago

Facing hard time with this issue.

Any update regarding this issue? image

DYudin commented 6 years ago

the same problem in prod mode

ChangAlanCL commented 6 years ago

I'm having the same issue with CLI v6.0.7 and angular 6.0.3 error_angular

Behrad96 commented 6 years ago

same issue with Angular CLI v6.1.3

SOLVED: It's because some dependency that not updated for angular 6 and rxjs 6. in my case after uninstall ngx-select-dropdown module my problem sloved. 😃 💪

Leanvitale commented 6 years ago

Try for this..

ng build --prod --optimization=false

queejie commented 6 years ago

Same problem. Same result when compiling with --optimization=false.

image

UPDATE: I was able to get it to build and run with ng build --aot=false. I don't understand why, unfortunately.

FURTHER UPDATE: I was able to get past the problem. I removed rxjs-compat and found that ngx-avatar ngx-select and some other things had compile errors. I removed those modules and rebuilt from scratch. Also, something was inserting an old version of @angular/forms, so I made sure that was at 6.1.3, to match all the other bits. Not sure why the @latest wasn't working with that.

medisoft commented 6 years ago

I was able to run it with the --aot=false parameter too.

CamielK commented 6 years ago

Same issue. Fixed it by setting the --aot=false flag

alejandromangione commented 6 years ago

Hey! I was with the problem, you can try deleting node_modules and reinstalling the dependencies.

ghost commented 6 years ago

+1 . Fixed with aot flag false but can't build in production mode without aot.

Abdallah-khalil commented 6 years ago

i can run ng build and it works just fine but with ng build --prod i got an error
main.978c59b99705f7cbd36b.js:1 Uncaught TypeError: e is not a function at main.978c59b99705f7cbd36b.js:1 at Array.reduceRight (<anonymous>) at main.978c59b99705f7cbd36b.js:1 at new e (main.978c59b99705f7cbd36b.js:1) at main.978c59b99705f7cbd36b.js:1 at Ir (main.978c59b99705f7cbd36b.js:1) at main.978c59b99705f7cbd36b.js:1 at new t (main.978c59b99705f7cbd36b.js:1) at Object.na [as createNgModuleRef] (main.978c59b99705f7cbd36b.js:1) at e.create (main.978c59b99705f7cbd36b.js:1)

any idea what is the cause of this

"@angular/cli": "^6.1.5", "@angular/core": "^6.1.7",

node version v8.11.4 npm 6.4.1

pbachman commented 6 years ago

i had the same issue with the dependencies "@angular/core": "6.0.3", "@angular/cli": "^6.1.5"

works fine with "@angular/core": "6.0.3", "@angular/cli": "^6.0.8"

Arnie38 commented 5 years ago

These kinds of errors had plagued us for awhile. Yes you can turn off prod/aot compiles and you won't see the issue but then you won't have a minified/uglified/treeshaken optimized bits :)

The most sane fix for us is to simply export * from any components that are causing the "ctor is not a constructor" (or similar) errors. We haven't had the time to explore deeply but exporting your specific types (for .ts access) although should work doesn't seem to when you run bits that have been aot/prod compiled.

So from your index.ts or however you do it you should say.... "export * from ./mycomponents/mycomponent" ...not... "export {MyComponent} from ./mycomponents/mycomponentfile" This works everytime for us. Hopefully that is enough to go on.

smkart commented 5 years ago

@Abdallah-khalil Error is only in production build, I found below command is useful to debug the production code

ng build --prod --sourcemaps --build-optimizer=false

Please try and see if you can get to the library which is causing the error (helps to narrow down the issue)

Thanks, Mani

Abdallah-khalil commented 5 years ago

Thanks @Mani2693 , actually i did so and found that @ngrx/state was causing error for me and when i changed extractLicenses: false in angular.json file it fixed this error for me though the bundled file is bigger with about 1MB with that option but so far it's much better than before

arditazo3 commented 5 years ago

Fixed my problem, switching target at tsconfig.json to: "target": "es5"

bgBond commented 5 years ago

I have the same problem after upgrading to angular 7-

"dependencies": { "@angular/animations": "^7.1.3", "@angular/cdk": "^7.1.1", "@angular/common": "^7.1.3", "@angular/compiler": "^7.1.3", "@angular/core": "^7.1.3", "@angular/flex-layout": "^7.0.0-beta.21", "@angular/forms": "^7.1.3", "@angular/http": "^7.1.3", "@angular/material": "^7.1.1", "@angular/material-moment-adapter": "^7.1.1", "@angular/platform-browser": "^7.1.3", "@angular/platform-browser-dynamic": "^7.1.3", "@angular/router": "^7.1.3", "@auth0/angular-jwt": "^2.1.0", "@netbasal/ngx-content-loader": "^2.0.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "core-js": "^2.5.7", "moment": "^2.23.0", "ngx-moment": "^3.2.0", "ngx-quill": "^4.4.2", "quill": "^1.3.6", "rxjs": "^6.3.3", "stickybits": "^3.5.7", "what-input": "^5.1.0", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.5", "@angular/cli": "~7.1.3", "@angular/compiler-cli": "^7.1.3", "@angular/language-service": "^7.1.3", "@types/jasmine": "^2.8.7", "@types/jasminewd2": "~2.0.2", "@types/node": "^6.0.111", "codelyzer": "^4.5.0", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^2.0.2", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.4.3", "karma-jasmine": "^1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "modularscale-sass": "^3.0.8", "protractor": "~5.1.2", "sass-loader": "^6.0.7", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~3.1.6" }

Anybody can assist?

mgechev commented 5 years ago

It looks like not all reported errors here are the same. @Mani2693 would share minimum demo where we can reproduce the issue?

smkart commented 5 years ago

@mgechev Thanks for your response , I am sorry I couldn't reproduce the issue in fiddler to share , Also for me I fixed the issue with "ng build --prod --sourcemaps --build-optimizer=false" which helps to narrow down to the library causing issue ( This library is our own created using ng-packagr ) Now I am able to fix it by changing the library building format, Everything works fine for me But I wonder if we can have better way to report the error instead of something unknown to anyone , Which helps others to fix the error

Thanks again

Regard, Mani Applied Materials

mgechev commented 5 years ago

@Mani2693 thanks for sharing your findings! Maybe you can work with @dherges on fixing the issue.

gigallo commented 5 years ago

Hi

I have the same problem with Angular7 and prod mode. If i don't compile with optimizations the error changes in "ctor is not a constructor". Any help?

xyrus02 commented 5 years ago

Same here: --aot=false works but it is rather nasty to do. We are not sure since what change on our side the error occurs but if we find something, I will comment back here.

krojew commented 5 years ago

I'm experiencing the exact same issue - some components cannot be created because of "is not a constructor" error in prod mode with 7.2. This should be reopened.

petrifront commented 5 years ago

I'm experiencing the exact same issue - some components cannot be created because of "is not a constructor" error in prod mode with 7.3. This should be reopened.

svesax commented 5 years ago

Same problem "o is not a constructor" when build without --aot=false --build-optimizer=false Any news ? Thanks!

bgBond commented 5 years ago

Just to update that after deleting the node modules directory and running npm install, it worked!

svesax commented 5 years ago

Resolved by update Angular CLI https://stackoverflow.com/questions/43931986/how-to-upgrade-angular-cli-to-the-latest-version

kathygit commented 5 years ago

I am still seeing this issue. This issue should be reopened. @angular/cli "version": "6.2.9" When build:prod, I need "optimization=false", which results in a oversized main.xxx.ts. This issue is NOT resolved. I wonder why we closed it?

mgechev commented 5 years ago

Looks like this is related to the bundle optimizer. @filipesilva any thoughts?

filipesilva commented 5 years ago

I think it would be better to close to issue and open a new one with a reproduction so that we could investigate.

The original issue was for Angular CLI 1.7.3, and I feel pretty confident the reproduction doesn't apply because otherwise all apps that use the router would be broken. We do test the router in many places so I don't think that holds true.

There have been other reports of the same error message across versions, but the same error message doesn't mean it's the same issue. Different problems might show the same error message. There are also reports of updating, reinstalling nodes modules, or using different flag combinations removing the error

So I think it's very hard to say anything definitive about this issue with so many different and conflicting reports and no reproduction. It is better to make a new issue with actionable information than to continue here.

kathygit commented 5 years ago

The common theme is we can't run with the artifacts from build:production. All the fixes mentioned here and there didn't solve the issue. It is still an issue, even if you can't recreate it.

filipesilva commented 5 years ago

@kathygit we'd really like to fix the problem you're seeing but we can't do it without some sort of reproduction. We talk a little in https://github.com/angular/angular-cli/blob/master/CONTRIBUTING.md#-submitting-an-issue about why it's important to have a reproduction.

Can you spare some time to open a new issue with a reproduction so we can dig in and fix the problem?

krojew commented 5 years ago

@filipesilva I've created a similar bug with some more info: https://github.com/angular/angular-cli/issues/13540 Mybe this can help.

filipesilva commented 5 years ago

@krojew reading through that issue it sounds like it was some sort of problem with angular-resize-event, and that it was subsequently fixed in that library?

I agree it would be nice if there was a build error for it instead of breaking at runtime, but that's not always possible. Sometimes code isn't statically analysable for errors. If I had to bet it was something that broke when using minification, which is part of prod builds.

krojew commented 5 years ago

@filipesilva yes - it was a AOT incompatibility which was fixed. But that gives you a repeatable case to see what's actually going on and if it's possible to catch it at compile time.

BBlackwo commented 5 years ago

I had a similar issue with an NPM module I was consuming. The NPM module code was like this:

// my-service.js
export default class MyService {} // <-- default export

// index.js
import MyService from './my-service'
export { MyService };

The fix was to export the class instead of exporting default:

// my-service.js
export class MyService {} // <-- exporting the class

// index.js
import { MyService } from './myService'; // <-- destructured import
export { MyService };
pconas-yschmidt commented 5 years ago

I can support BBlackwo, in my case I had implemented a CustomUrlSerializer like so:

export default class CustomUrlSerializer implements UrlSerializer { ... }

Removing the default Keyword fixed the issue:

export class CustomUrlSerializer implements UrlSerializer { ... }

Guilhermesfl commented 5 years ago

Guys, if any of you still have this problem, I recommend checking your npm packages. In my case, I had a npm warn of a missing dependency and when I fixed this warn my problem was solved.

angular-automatic-lock-bot[bot] commented 5 years ago

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.

This action has been performed automatically by a bot.