Angular 7 App ng build Works But ng build --prod Gives Error

Hello,

Recently I was trying to generate production build of one of our older Angular app which was built on Angular 6 and later upgraded to Angular 7. When we run ng build it works fine but when we run ng build --prod it gives so many errors.

Here in this blog I am going to explain what are those errors and how I solved it.

Problem 1 : Strict Parameter checking for function.

There were few events and handler defined in the app where there were parameter mismatch. For example in html file we have following event.

<componentName (event)="eventHandler($event)"></componentName >

And in component TS file event handler was defined like this

eventHandler() {
}

As you can see from html file it was passing $event param but on handler param was not mentioned. So make sure that your function signature and function declaration matches.

Problem 2 : Duplicate Declaration of Components

By mistake we have duplicate declaration of components in both App module and and other child modules of the app. Make sure you either declare all your components to app module or if you are defining it into sub module then make sure you remove it from app module.

Problem 3 : Cannot read property 'moduleType' of undefined

When you face above issue please check your app module by mistake you may have defined following line twice in your app module.

platformBrowserDynamic().bootstrapModule(AppModule);

It's like you are trying to bootstrap your Angular app twice and it gives above error. So try to avoid it.

Problem 4 : Enable IVY

In Angular 7 by default IVY is disabled hence even if you generate production build you app size it bit large. To enable IVY add following line to your tsconfig.json file.

"angularCompilerOptions": {
    "enableIvy": true
}

Hope this blog post helps you.

ReactJs / Angular - Override Material UI Theme

Hello,

While working with React or Angular Applications we normally uses Material UI themes and components and it's great choice because it has nice set of themes and colors and ready to use components. That makes our life easy.

One challenge we face is, in case if we want to change or override the theme. For example Material ui has dark blue theme. What if you want to change colors or dark blue theme with your own color. One option is you can declare the class with same name and give your own property. However the better solution is to use theme override. In this blog I am going to mention how to this.

Please note the method I am going to mention here is specific to React application.

First of all create theme.js file in your app and add following code to it.

import React from "react";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import blueGrey from "@material-ui/core/colors/blueGrey";
import lightBlue from "@material-ui/core/colors/lightBlue";
import "typeface-roboto";

import { ThemeProvider as ScThemeProvider } from "styled-components";

export default props => (
  <ScThemeProvider theme={muiTheme}>
    <MuiThemeProvider theme={muiTheme}>
      <CssBaseline>{props.children}</CssBaseline>
    </MuiThemeProvider>
  </ScThemeProvider>
);

const theme = {
  overrides: {

  },

  palette: {

    primary: { 

      main: '#MAIN_COLOR' 

    }, 

    secondary: { 

      main: '#SECONDARY_COLOR' 

    },

    background: {

      default: '#BACKGROUND_COLOR'

    }

  },

  type: "dark"

};

const muiTheme = createMuiTheme(theme);

Now here in overrides you can add code to override. For example if you want to change panel header. If you inspect html element you will find it has a class MuiPaper-root

Here is how you can override base CSS of it.

   overrides: {

    MuiPaper: {

      root: {

        background: '#YOUR_COLOR'

      },

      rounded: {

        background: '#YOUR_COLOR'

      }

    }

Same way for any other components you can do it. Inspect the HTML structure, find out Class Name and override it.

AngularJs - Get Controller Scope in Directive

Recently I was learning AngularJs 5 and where I faced problem. I have to call controller function from directive. After struggle of half an hour, I was able to solve it. In this blog I am going to explain how to do this.

First of all give id to HTML tag where you have added ng-controller directive.

<div ng-controller="MyController" id="myControllerDiv">
</div>

Now in directive or any external JavaScript code where you want to get contoller scope, use following code.

var element  = document.getElementById("myControllerDiv");

This will give us that element, we will find it's corresponding angular element.

var angularElement  = angular.element(element);

Now we will get it's scope and using that scope, we can all any function of MyController

angularElement.scope().myFunction()

This will call myFunction defined in MyController.

Hope this helps you.