MDB Angular Pro - 4.3.1 does not build in the -prod mode

Topic: MDB Angular Pro - 4.3.1 does not build in the -prod mode

denis.frolov.mail pro asked 6 years ago

Hi there, I downloaded the latest version of MDB Angular Pro, Installed dependencies (npm i), And tried to run "ng build -prod", so it brought me an error right out of the box. Try yourself.

manuelcua pro commented 6 years ago

only way I could make it to build was to use: ng build --prod --aot=false

denis.frolov.mail pro commented 6 years ago

which is killin the whole idea of building the app with -prod flag. I do not remember from which particular version of CLI (apparently a few ones ago), but you do not need to explicitly specify -aot anymore, -prod flag does it by default. Check the docks. So –prod –aot=false is equal to just -prod

manuelcua pro commented 6 years ago

@denis.frolov.mail the flag --aot=false is to disable Ahead of Time compilation which is causing the error, you misunderstood my intentions to help, I still think it is wrong to disable it, because it makes the build so much bigger in size, but currently it is the only way it was able to compile, I hope the MdBootstrap Team is working on a fix soon. Cheers! Btw you can see all the Build options here: https://github.com/angular/angular-cli/wiki/build

Add comment

cabir pro answered 6 years ago

1 0 Best answer

same error here maybe i can fix and post result here for staff

Add comment

Łukasz Salamon pro answered 6 years ago

0 0 Best answer

Hi, I've got similar problem also only when running with --prod. Error that I get :

ERROR in ENOENT: no such file or directory, open '/Users/luki/Downloads/mdb-angular-pro-4.3.1/src/app/angular-bootstrap-md/pro/autocomplete/components/completer-list-item.component.html'

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

I can't say anything more than that we want to do it asap.

avf456 pro commented 6 years ago

Thanks for the quick response, I'll be on the lookout, right now I am building without AOT and the vendor file is considerably bigger than before :-/

manuelcua pro commented 6 years ago

Andrian, when do you think this will be fixed?

Adrian Sawicki free commented 6 years ago

to be honest, I would prefer not to write some random date for it.

Add comment

avf456 pro answered 6 years ago

0 0 Best answer

I am seeing the same problem, but my project depends on --prod in order to have a faster load live.

I am a bit disappointed that this breaks out of the box, it might be good idea to test a production build before releasing a new version.

Any chance you guys can let us know a estimate on when this might be fixed?

thanks team for all your help

nm_patrick pro commented 6 years ago

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

Thank you for a temporary fix. We will look into this matter and try to fix everything.

Add comment

Arturo Macías priority answered 6 years ago

0 0 Best answer

For me, it's not working even using -aot=false. This is the error that console shows:
<pre>ERROR in Template parse errors:
Can't bind to 'role' since it isn't a known property of 'mdb-spinners'.
1. If 'mdb-spinners' is an Angular component and it has 'role' input, then verify that it is part of this module.
2. If 'mdb-spinners' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]"): ng:///project_path/src/app/typescripts/pro/progressbars/progress-spinner-module/progress-spinner.component.ts.MdSpinnerComponent_Host.html@0:0, Directive MdSpinnerComponent
Can't bind to 'mode' since it isn't a known property of 'mdb-spinners'.
1. If 'mdb-spinners' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mdb-spinners' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]"): ng:///project_path/src/app/typescripts/pro/progressbars/progress-spinner-module/progress-spinner.component.ts.MdSpinnerComponent_Host.html@0:0, Directive MdSpinnerComponent
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/project_path/src'
resolve './$$_gendir/app/app.module.ngfactory' in '/project_path/src'
  using description file: /project_path/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /project_path/package.json (relative path: ./src)
    using description file: /project_path/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory.js doesn't exist
      as directory
        /project_path/src/$$_gendir/app/app.module.ngfactory doesn't exist
[/project_path/src/$$_gendir/app/app.module.ngfactory]
[/project_path/src/$$_gendir/app/app.module.ngfactory.ts]
[/project_path/src/$$_gendir/app/app.module.ngfactory.js]
[/project_path/src/$$_gendir/app/app.module.ngfactory]
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts
</pre>

Please insert min. 20 characters.

For me, it's not working even using -aot=false. This is the error that console shows:

ERROR in Template parse errors:
Can't bind to 'role' since it isn't a known property of 'mdb-spinners'.
1. If 'mdb-spinners' is an Angular component and it has 'role' input, then verify that it is part of this module.
2. If 'mdb-spinners' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]"): ng:///project_path/src/app/typescripts/pro/progressbars/progress-spinner-module/progress-spinner.component.ts.MdSpinnerComponent_Host.html@0:0, Directive MdSpinnerComponent
Can't bind to 'mode' since it isn't a known property of 'mdb-spinners'.
1. If 'mdb-spinners' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mdb-spinners' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]"): ng:///project_path/src/app/typescripts/pro/progressbars/progress-spinner-module/progress-spinner.component.ts.MdSpinnerComponent_Host.html@0:0, Directive MdSpinnerComponent
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/project_path/src'
resolve './$$_gendir/app/app.module.ngfactory' in '/project_path/src'
  using description file: /project_path/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /project_path/package.json (relative path: ./src)
    using description file: /project_path/package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /project_path/src/$$_gendir/app/app.module.ngfactory.js doesn't exist
      as directory
        /project_path/src/$$_gendir/app/app.module.ngfactory doesn't exist
[/project_path/src/$$_gendir/app/app.module.ngfactory]
[/project_path/src/$$_gendir/app/app.module.ngfactory.ts]
[/project_path/src/$$_gendir/app/app.module.ngfactory.js]
[/project_path/src/$$_gendir/app/app.module.ngfactory]
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

denis.frolov.mail pro commented 6 years ago

Ok this is TEMPORARY fix for whoever is interested. There are few things to do here: 1 - First run of ng build -prod out of the box brings the error: ERROR in ENOENT: no such file or directory, open 'blah\blah\blaha\ngular-bootstrap-md\... So, delete the whole directory angular-bootstrap-md in the app folder (all that you need is in typescripts folder anyways) 2 - Next run of ng build -prod brings the following error: Can't bind to 'role' since it isn't a known property of 'mdb-spinners'. Same approach here. Unless you using spinners or progress-bars in your project right now and can't move without any further, simply delete progressbars folder out of app/typescripts/pro/ Next, open index.ts file in the same app/typescripts/pro/ folder and comment everything referencing ProgressBars, in particular: // import { ProgressBars } from './progressbars/'; // export { // ProgressbarComponent, ProgressbarConfigComponent, ProgressbarModule, ProgressBars, ProgressDirective, // ProgressSpinnerComponent, BarComponent // } from './progressbars/'; // ProgressBars, // ProgressBars.forRoot(), 3 - Third run of ng build -prod brings a whole bunch of "private" property access modifiers errors. To fix those simply go to a specified file and change the property from private to public. For instance: find first complaining file - datapicker.component.ts and set "opts" to public. 4 - Forth run of ng build -prod brings CLI error: ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in This is CLI bug and easily fixable by updating @angular/cli 5 - Now ng build -prod builds successfully! Do not forget to bring spinners back when MDB fix all that $h!t above.

Ok this is TEMPORARY fix for whoever is interested. There are few things to do here:

1 - First run of ng build -prod out of the box brings the error: ERROR in ENOENT: no such file or directory, open 'blah\blah\blaha\ngular-bootstrap-md\...
So, delete the whole directory angular-bootstrap-md in the app folder (all that you need is in typescripts folder anyways)

2 - Next run of ng build -prod brings the following error: Can't bind to 'role' since it isn't a known property of 'mdb-spinners'.
Same approach here. Unless you using spinners or progress-bars in your project right now and can't move without any further, simply delete progressbars folder out of app/typescripts/pro/
Next, open index.ts file in the same app/typescripts/pro/ folder and comment everything referencing ProgressBars, in particular:

// import { ProgressBars } from './progressbars/';

// export {
// ProgressbarComponent, ProgressbarConfigComponent, ProgressbarModule, ProgressBars, ProgressDirective,
// ProgressSpinnerComponent, BarComponent
// } from './progressbars/';

// ProgressBars,

// ProgressBars.forRoot(),

3 - Third run of ng build -prod brings a whole bunch of "private" property access modifiers errors. To fix those simply go to a specified file and change the property from private to public. For instance: find first complaining file - datapicker.component.ts and set "opts" to public.

4 - Forth run of ng build -prod brings CLI error: ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in

This is CLI bug and easily fixable by updating @angular/cli

5 - Now ng build -prod builds successfully!

Do not forget to bring spinners back when MDB fix all that $h!t above.

Please insert min. 15 characters.

Add comment

denis.frolov.mail pro answered 6 years ago

0 0 Best answer

@manuelcua thanks, I know what aot is, that's why I said- it's killing a whole idea by removing it. Anyways if you can't wait until they fix it, let me know I'll tell what to do to fix it.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

denis.frolov.mail

Pro User 12Support score
3Questions 2Answers 0Snippets