Error by Build my Angular 4 Project for Production with --prod

[Bernd Wachter]

Hi,

I have the following Problem when i Build my Angular 4 Project for Production --prod

I become always the following Error when i Build with ng build --prod

------------------------

ERROR in Can't resolve all parameters for NgCartItem in /Users/Benny/Projekte/ShopApp/src/app/ngcart/ngcartitem.ts: (?, ?, ?, ?, ?, ?, ?, ?, ?).

ERROR in ./src/main.ts

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/Benny/Projekte/ShopApp/src'

resolve './$$_gendir/app/app.module.ngfactory' in '/Users/Benny/Projekte/ShopApp/src'

 using description file: /Users/Benny/Projekte/ShopApp/package.json (relative path: ./src)

   Field 'browser' doesn't contain a valid alias configuration

 after using description file: /Users/Benny/Projekte/ShopApp/package.json (relative path: ./src)

   using description file: /Users/Benny/Projekte/ShopApp/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)

     no extension

       Field 'browser' doesn't contain a valid alias configuration

       /Users/Benny/Projekte/ShopApp/src/$$_gendir/app/app.module.ngfactory doesn't exist

but when i use: ng build --prod -aot=false

then my Project Build works Ok

only when i Build with ng build --prod
then i become always this Error and my Project want not Build !

have someone a Idea what is the Problem ???

Thanks

Benny

[Bernd Wachter]

my Constructor for the ngcartItem looks like this:

constructor(public id: number,

   public articleId: string,

   public name: string,

   public price: number,

   public quantity: string,

   public packagingUnit: number,

   public scaledPrice: number,

   public imagePath: string,

   public total: number,

   )  

{

 

[Sander Elias]

Hi Bern,

Hmm that doesn't look like something the angular injector will understand. I think this explains your issue. The AOT compiler is trying to resolve the things it thinks you try to inject in here, but this is a class that's not supposed to get handled by the injector.

From your code and message, I can not conclude anything but that.

Regards

Sander

[Bernd Wachter]

Hi Sander,

this is the ngcartitem.ts File who gives the Error..
you see some Problem in this Code?

import { Injectable,Input, Output, EventEmitter } from '@angular/core';

import { NgCartService} from '../ngcart/ngcart.service'

@Injectable()

export class NgCartItem   {

 

constructor(public id: number,

   public articleId: string,

   public name: string,

   public price: number,

   public quantity: string,

   public packagingUnit: number,

   public scaledPrice: number,

   public imagePath: string,

   public total: number,

   )  

{ }

public setId(id) {

   if (id) this.id = id;

   else {

       console.log('An ID must be provided');

   }

};

public getId() : number {

   return this.id;

};

public setArticleId(articleId) {

   if (articleId) this.articleId = articleId;

   else {

       console.log('An Article ID must be provided');

   }

};

public getArticleId() : string {

   return this.articleId;

};

public setName(name) {

   if (name) this.name = name;

   else {

       console.log('A name must be provided');

   }

};

public getName() : string{

   return this.name;

};

public setPrice = function (price) {

   let priceFloat = parseFloat(price);

   if (priceFloat) {

       if (priceFloat <= 0) {

           console.log('A price must be over 0');

       } else {

           this.price = (priceFloat);

       }

   } else {

       console.log('A price must be provided');

   }

};

public getPrice = function ()  {

   return this.price;

};

public setQuantity(quantity, relative) {

   let quantityInt = parseInt(quantity);

   let quantityOrg = parseInt(this.quantity);

   if (quantityInt % 1 === 0) {

       if (relative === true) {

           quantityOrg += quantityInt;

           this.quantity = quantityOrg.toString();

        if (quantityOrg >= this.packagingUnit) {

           this.setPrice(this.scaledPrice);

       }

       else {

           this.setPrice(this.price);

       };

        } else {

           quantityOrg = quantityInt;

           this.quantity = quantityOrg.toString();

       }

       if (quantityOrg < 1) quantityOrg = 1;

           this.quantity = quantityOrg.toString();

   } else {

       quantityOrg = 1;

       this.quantity = quantityOrg.toString();

       console.log('Quantity must be an integer and was defaulted to 1');

   }

};

public getQuantity(){

   return parseInt(this.quantity);

};

public setPackagingUnit(packagingUnit){

   if (packagingUnit) this.packagingUnit = packagingUnit;

};

public getPackagingUnit(){

   if (this.packagingUnit) return this.packagingUnit;

};

public setScaledPrice(scaledPrice){

   if (scaledPrice) this.scaledPrice = scaledPrice;

};

public getScaledPrice() {

   if (this.scaledPrice) return this.scaledPrice;

};

public setImagePath(imagePath){

   if (imagePath) this.imagePath = imagePath;

};

public getImagePath() : string{

   if (this.imagePath) return this.imagePath;

};

public getTotal(){

   return(this.getQuantity() * this.getPrice());

   //return parseFloat(""+this.getQuantity() * +this.getPrice()).toFixed(2);

   

};

public toObject(){

   return {

               id: this.getId(),

               articleId: this.getArticleId(),

               name: this.getName(),

               price: this.getPrice(),

               quantity: this.getQuantity(),

               packagingUnit: this.getPackagingUnit(),

               scaledPrice: this.getScaledPrice(),

               imagePath: this.getImagePath(),

               //total: parseFloat(""+this.getTotal()).toFixed(2)

                total: parseFloat(this.getTotal().toFixed(2))    

       }

};

}

Am Freitag, 18. August 2017 11:29:35 UTC+2 schrieb Bernd Wachter:

[Sander Elias]

Hi Bernd,

Yes, the class should not be decorated with the @injectable. That is the thing that makes AOT create an injector for this class. Will not work.

Regards

Sander

[Bernd Wachter]

Hi Elias,

i test and delete the @Injectable from this Class!

but when i do this and run my App the App is not working anymore!

and i become the following Error in the Console:

compiler.es5.js:1690 Uncaught Error: Can't resolve all parameters for NgCartItem: (?, ?, ?, ?, ?, ?, ?, ?, ?).

    at syntaxError (compiler.es5.js:1690)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15765)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15633)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15619)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15910)

    at compiler.es5.js:15839

    at Array.forEach (<anonymous>)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15799)

    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15454)

    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26795)

syntaxError @ compiler.es5.js:1690

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata @ compiler.es5.js:15765

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata @ compiler.es5.js:15633

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata @ compiler.es5.js:15619

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata @ compiler.es5.js:15910

(anonymous) @ compiler.es5.js:15839

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata @ compiler.es5.js:15799

webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15454

webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:26795

webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768

webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697

webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536

webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522

../../../../../src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap 82e4e64f50fe232c6c4f:54

0 @ main.ts:11

__webpack_require__ @ bootstrap 82e4e64f50fe232c6c4f:54

webpackJsonpCallback @ bootstrap 82e4e64f50fe232c6c4f:25

(anonymous) @ main.bundle.js:1

 

Am Freitag, 18. August 2017 11:29:35 UTC+2 schrieb Bernd Wachter:

[Sander Elias]

Hi Bernd,

I don't know how the rest of your system is set up. But the constructor in that class is not suited for DI, rename that to init, and then add then try again (with the @inject). If the construction of the class is a requirement of something else, you should ask there how to do it correctly.

Met vriendelijke groet

Sander

[Bernd Wachter]

Hi Sander,

what you mean .. rename that to init ???

I don't understand what you mean..

can you give a Code Example ?

[Sander Elias]

Hi Bernd,

I reread your code I think you should be able to do this and be ok:

class NgChartItem {

public id: number;

public articleId: string;

public name: string;

public price: number;

public quantity: string;

public packagingUnit: number;

public scaledPrice: number;

public imagePath: string;

public total: number;

constructor() {}

}

However, this leaves the thing that uses this class responsible to fill the fields, without the use of the constructor. 

Regards

Sander

[Bernd Wachter]

Hi Sander,

Thanks so much for your Help!

with this solution works now perfect and i can now call ng build --prod
without Errors!

Thanks
Benny