Could not load the summary for directive MyApp

Ionic Framework ionic-v3
1

I can’t give “IONIC BUILD ANDROID --PROD”, but “IONIC BUILD ANDROID” goes without problem.

C:\Zanthus\Zeus\Apache2\htdocs\ZCL>ionic info

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v5.6.0
Xcode version: Not installed


C:\Zanthus\Zeus\Apache2\htdocs\ZCL>ionic build android --prod

> ionic-hello-world@ ionic:build C:\Zanthus\Zeus\Apache2\htdocs\ZCL
> ionic-app-scripts build "--prod"

[15:31:14]  ionic-app-scripts 1.3.0
[15:31:14]  build prod started ...
[15:31:14]  clean started ...
[15:31:14]  clean finished in 2 ms
[15:31:14]  copy started ...
[15:31:14]  ngc started ...
[15:31:29]  ionic-app-script task: "build"
[15:31:29]  Error: Illegal state: Could not load the summary for directive MyApp in
            C:/Zanthus/Zeus/Apache2/htdocs/ZCL/src/app/app.component.ts.
Error: Illegal state: Could not load the summary for directive MyApp in C:/Zanthus/Zeus/Apache2/htdocs/ZCL/src/app/app.component.ts.
    at Error (native)
    at syntaxError (C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:1513:34)
    at CompileMetadataResolver.getDirectiveSummary (C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:13872:31)
    at C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:22263:206
    at Array.map (native)
    at AotCompiler._createSummary (C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:22263:154)
    at AotCompiler._compileSrcFile (C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:22220:34)
    at C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:22201:91
    at Array.map (native)
    at C:\Zanthus\Zeus\Apache2\htdocs\ZCL\node_modules\@angular\compiler\bundles\compiler.umd.js:22201:56
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ionic-hello-world@ ionic:build: `ionic-app-scripts build "--prod"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\sz_ph\AppData\Roaming\npm-cache\_logs\2017-04-21T18_31_29_508Z-debug.log
2

Content of package.json and app.component.ts please.

3 
**PACKAGE.JSON**
{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/barcode-scanner": "^3.4.4",
    "@ionic-native/core": "^3.4.4",
    "@ionic-native/facebook": "^3.4.4",
    "@ionic/storage": "^2.0.1",
    "@types/google-maps": "3.2.0",
    "angular2-text-mask": "^8.0.0",
    "firebase": "^3.7.4",
    "imgcache.js": "^1.1.1",
    "ionic-angular": "2.2.0",
    "ionic-framework": "2.0.0-alpha.38",
    "ionic-native": "^2.4.1",
    "ionic2-input-mask": "^0.18.6",
    "ionicons": "3.0.0",
    "jquery": "^3.2.1",
    "ng2-translate": "^5.0.0",
    "node-js-marker-clusterer": "^1.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "ts-md5": "^1.2.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "babel-preset-es2015": "^6.24.0",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.1.0",
    "gulp-tsc": "^1.3.1",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "crm_app_zanthus: An Ionic project"
}

**APP.COMPONENT.TS**
import {GlobalVars} from "../providers/global-vars";
import {NgModule, Component, ViewChild, ErrorHandler} from "@angular/core";
import {Platform, NavController} from "ionic-angular";
import {StatusBar, Splashscreen} from "ionic-native";
import {TranslateService} from "ng2-translate/src/translate.service";
import {CustomErrorHandler} from "../providers/custom-error-handler";
import {DepartmentsPage} from "../pages/departments/departments";

@NgModule({
    providers: [{provide: ErrorHandler, useClass: CustomErrorHandler}]
})
@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild('myNav') nav: NavController;

    public rootPage: any;

    constructor(private platform: Platform, private translate: TranslateService, public global: GlobalVars) {
    }

    ngOnInit() {
        console.log('MyApp ngOnInit');
        this.platform.ready().then(() => {
            this.global.init().then(() => {
                // Okay, so the platform is ready and our plugins are available.
                // Here you can do any higher level native things you might need.
                this.translate.setDefaultLang(this.global.getDefaultLang());
                this.translate.use(this.global.getUserLang());
                // Let's call the first page
                this.rootPage = LoginPage;
                StatusBar.styleDefault();
                Splashscreen.hide();
            });
        });
    }
}
4

This is the second time now I’ve seen a module and a component mashed together. Where is this idiom coming from and is it actually supposed to work?

5

What do you talking about? Be more clear, I’m a beginner. How this works fine without --prod, I think this would works with --prod. It´s my mistake?

6

Where did you get this code from that has both @NgModule and @Component decorators on the same class?

7

I followed an example that does not seem to follow the pattern. :slight_smile:

I removed @NgModule and put it in the correct place, but the result was the same, the problem persists.