Ionic-app-scripts: Compile issue on 0.0.47

[kodeine]

I updated app-scripts to 0.0.47 and i get the following error, 0.0.45 compiles fine.

[13:04:30]  ionic-app-scripts 0.0.47 
[13:04:30]  build prod started ... 
[13:04:30]  clean started ... 
[13:04:30]  clean finished in 1 ms 
[13:04:30]  copy started ... 
[13:04:30]  ngc started ... 
[13:04:32]  build prod failed: Cannot determine the module for class ControlMessagesComponent in 
            /Projects/SL/src/components/control.messages.ts! Cannot determine the 
            module for class CryptPage in /Projects/SL/src/pages/crypt/crypt.page.ts! 
            Cannot determine the module for class GoogleMapComponent in 
            /Projects/SL/src/pages/map/googlemap.component.ts! Cannot determine the 
            module for class ImageUpload in 
            /Projects/SL/src/utils/image-upload/image-upload.ts! 
[13:04:32]  ionic-app-script task: "build" 
[13:04:32]  Error: Cannot determine the module for class ControlMessagesComponent in 
            /Projects/SL/src/components/control.messages.ts! Cannot determine the 
            module for class CryptPage in /Projects/SL/src/pages/crypt/crypt.page.ts! 
            Cannot determine the module for class GoogleMapComponent in 
            /Projects/SL/src/pages/map/googlemap.component.ts! Cannot determine the 
            module for class ImageUpload in 
            /Projects/SL/src/utils/image-upload/image-upload.ts! 

[danbucholtz]

@kodeine,

That is very likely an ngc error. ngc is an evolving project from the Angular team. Can you look into trying to figure out where the issue is in /Projects/SL/src/pages/map/googlemap.component.ts. ngc cannot determine the module for some classes.

Are you doing anything unique with the imports?

Thanks,
Dan

[kodeine]

this is what my googlemap component looks like

import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { Platform } from 'ionic-angular';
import { GoogleMap } from 'ionic-native';

// declare var GoogleMap:(any);
//https://gist.github.com/ihadeed/9e6cb11eb3ab3efc8ccf3a08ced90bf7

@Component({
    selector: 'GoogleMap',
    template: '<div [id]="id" [style.height]="height" [style.width]="width" style="display: block;"></div>'
})
export class GoogleMapComponent implements AfterViewInit {
    @Input() id: string = 'GoogleMap';
    @Input() height: string = '100%';
    @Input() width: string = '100%';
    @Output() init: EventEmitter<GoogleMap> = new EventEmitter<GoogleMap>();
    public map: GoogleMap;
    constructor(private platform: Platform){}
    ngAfterViewInit(): void {
        this.platform.ready()
            .then(()=>{
                // GoogleMap.isAvailable().then((isAvailable, message)=>{
                //         if(!isAvailable) return console.warn(message);
                        this.map = new GoogleMap(this.id);
                        this.init.emit(this.map);
                    // });
            });
    }
}

[Chuckv01]

I am having the same issue with https://github.com/mattlewis92/angular-calendar. Did you ever find a fix for this?

[Chuckv01]

I have a repro of the issue here: https://github.com/Chuckv01/angular-calendar-ionic2-issue-repo

Running ionic build --prod on this project causes this error:

[15:19:10]  build dev failed: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol 
            CalendarModule in 
            /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, 
            resolving symbol CalendarModule in 
            /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts 
[15:19:10]  ionic-app-script task: "build" 
[15:19:10]  Error: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol CalendarModule in 
            /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, 
            resolving symbol CalendarModule in 
            /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts 
Error: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol CalendarModule in /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, resolving symbol CalendarModule in /Users/u/v/wodLog/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts
    at simplifyInContext (/Users/u/v/wodLog/node_modules/@angular/compiler-cli/src/static_reflector.js:475:23)
    at StaticReflector.simplify (/Users/u/v/wodLog/node_modules/@angular/compiler-cli/src/static_reflector.js:478:22)
    at StaticReflector.annotations (/Users/u/v/wodLog/node_modules/@angular/compiler-cli/src/static_reflector.js:60:36)
    at NgModuleResolver.resolve (/Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:14261:46)
    at CompileMetadataResolver._loadNgModuleMetadata (/Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:14646:45)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:14636:23)
    at addNgModule (/Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:12944:43)
    at /Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (/Users/u/v/wodLog/node_modules/@angular/compiler/bundles/compiler.umd.js:12956:28)

Cordova CLI: 6.3.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.2 Build version 8C38

[mattlewis92]

I think this might be caused by a similar issue that was affecting ngc: https://github.com/angular/angular/issues/11889

tl;dr I don't export my actual components from the module entry point. The metadata.json and d.ts files exist for those components but are not importable from the main modules entry point e.g. import {CalendarDayViewComponent} from 'angular-calendar' will not work.

[danbucholtz]

This is an issue with the library, not with app-scripts. It should be resolved now I think.

Thanks,
Dan

[Sh1d0w]

@danbucholtz It seems it is not fixed yet, since it is still reproducible with app-scripts 1.0.1

If I try to build the project with the --prod flag I get

can't resolve module ./components/day/calendarDayView.component from /path/to/project/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts
[09:08:29]  build prod failed: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol 
            CalendarModule in 
            /path/to/project/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, resolving 
            symbol CalendarModule in 
            /path/to/project/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts 
[09:08:29]  ionic-app-script task: "build" 
[09:08:29]  Error: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol CalendarModule in 
            /path/to/project/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, resolving 
            symbol CalendarModule in 
            /path/to/project/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts 
Error: Cannot read property 'CalendarDayViewComponent' of undefined, resolving symbol CalendarModule in /Users/radoslav/Projects/workrest/node_modules/angular-calendar/dist/esm/src/calendar.module.d.ts, resolving symbol CalendarModule in .....

Any help around resolving this will be appreciated.

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.1
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.5.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[danbucholtz]

@Sh1d0w,

It's not an Ionic issue so there isn't much I can do. The developer of the library needs to try running in on an Angular project that uses AoT, see it fail, and then try again. It _seems_ like CalendarDayViewComponent is not exported from the entry point.

Thanks,
Dan

[mattlewis92]

@danbucholtz the calendar does work on normal AoT with both ngc and ngtools/webpack, the issue only occurs with ionic-app-scripts. I purposefully don't export the components from the entry point as I don't want them as part of the public API (yet), but they're made available by the NgModule. I reported the same issue to the angular team and they fixed it in 2.1.2: https://github.com/angular/angular/issues/11889

[danbucholtz]

@mattlewis92, what is the issue and how do I fix?

Thanks,
Dan

[mattlewis92]

I have several components in the library but I don't export any of them from the library. I only export a single NgModule with the components listed in the declarations on the module. i.e. you can do:

import {CalendarModule} from 'angular-calendar';

but you can't do this (as you shouldn't need to - the NgModule takes care of it - the end user only uses the component selector in their template)

import {CalendarDayViewComponent} from 'angular-calendar';

As for fixing it I have no idea how the internals of the angular AoT compiler works, this was the commit that fixed it for angulars codebase: https://github.com/angular/angular/commit/0fd859ca0bd70df30f1ca80ea5d8a4aff615c09b

I believe you folks have a good relationship with the angular team - I'd suggest reaching out to them and asking for help.

[danbucholtz]

Can you verify that this works with the Angular CLI? We run AoT the same way they do, we copy-and-pasted the code. It seems like it is missing a .d.ts definition from the error message.

Thanks,
Dan

[mattlewis92]

I have a playground app here that I use to verify all of my OSS components works with AoT - it uses ngtools/webpack which is the same as what the CLI uses. I just ran a rebuild to be completely certain and it compiled without errors. All of the metadata and .d.ts files are generated for the component, you can see them on npmcdn.

[mattlewis92]

If you copy / pasted the code, could it be possible that you copied it before the bug was fixed in angular itself?

[Sh1d0w]

Hey @danbucholtz thank you for your hard work on ionic app scripts so far!

Do you have any info regarding this issue? My team is currently blocked by this, since we have to release a prod build which currently fails because of this error. Choosing another calendar library is not an option since this happens with other angular libraries too ....

Just to mention that the stated problem is not present in ionic-app-scripts 0.0.45 . The prod build breaks in any version of app-scripts above 0.0.45, so it must be something that has changed in the build process. I will be glad if I can help with something towards resolving this issue, just let me know if you need more info.

Thanks once again for your hard work :)

[Chuckv01]

@Sh1d0w I was able to workaround this issue by forking and modifying the calendar plugin to export all its modules. This issue should not prevent you from releasing.

[Sh1d0w]

@Chuckv01 Thanks. Yes I saw your solution in the @mattlewis92 issue you have opened. But unfortunately as I said this problem is present with other angular 2 libraries the we use. We can fork all of them and modify them which will take additional time for us, but I believe the problem should be resolved on the ionic side as well since it has been for a while :)

Thanks for the suggestion tho.

[Chuckv01]

Ah I see. Yes that quickly becomes unmanageable with multiple libraries.

[danbucholtz]

I will look at it today. I don't think it's our issue but I will try to figure it out.

Thanks,
Dan

[loyalpocket]

@danbucholtz Thanks for your work! We have same issue here, I am looking forward to seeing if there is any solution. Much appreciated!

[danbucholtz]

We did a quick test and this is an issue with app-scripts. It works with Angular CLI. We'll fix in the coming weeks.

Thanks,
Dan

[mattlewis92]

@danbucholtz When I originally reported this bug to the angular team I made this minimal module that might be handy for you in writing an integration test 😄

[danbucholtz]

@mattlewis92,

Can you give me the bear minimum reproduction for this issue? I just want to include a directive and not bind any data to it.

Thanks,
Dan

[danbucholtz]

I have no issue compiling an app with this library.

I am including the following template:

<mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events">
  </mwl-calendar-month-view>

and the following component:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public viewDate: Date = new Date();
  public event: any[] = [];
  constructor(public navCtrl: NavController) {

  }
}

And it built fine. At runtime I have an error about a missing provider. I am okay with that since I have no idea how to use this library.

In short, It doesn't seem like there is an issue here. If there was, it's likely because the API for ngc changed with Angular 2.3 and Ionic is (was?) using 2.2. I'm not 100% sure. I know we added support for Angular 2.3+ ngc recently, so that could have something to do with it.

Please upgrade your @ionic/app-scripts to the nightly and let me know how it goes.

npm install @ionic/app-scripts@nightly

Thanks,
Dan

[danbucholtz]

I don't know why, but I can recreate it now.

Thanks,
Dan

[danbucholtz]

This is an ngc issue, not an Ionic issue. You can try updating to Angular 2.4.5. It works with that. Note: Ionic does not officially support Angular 2.4.5 right now, but we will soon - probably next week. That's all I did to get it to work, and why I couldn't originally recreate it (I was originally using Angular 4 beta 7 to test).

Thanks,
Dan

[EnricoPicci]

Could you just send the package.json you are using to fix the problem (I just installed angular2.4.5 but something else now breaks).
Thanks

[danbucholtz]

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.5",
    "@angular/compiler": "2.4.5",
    "@angular/compiler-cli": "2.4.5",
    "@angular/core": "2.4.5",
    "@angular/forms": "2.4.5",
    "@angular/http": "2.4.5",
    "@angular/platform-browser": "2.4.5",
    "@angular/platform-browser-dynamic": "2.4.5",
    "@angular/platform-server": "2.4.5",
    "@ionic/storage": "1.1.7",
    "angular-calendar": "^0.7.2",
    "ionic-angular": "2.0.1",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.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": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "CalendarTest: An Ionic project"
}

tsconfig

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

[liangwenzhong]

any solution?

[liangwenzhong]

[11:04:53] ionic-app-scripts 1.1.4
[11:04:54] build prod started ...
[11:04:54] clean started ...
[11:04:54] clean finished in less than 1 ms
[11:04:54] copy started ...
[11:04:54] ngc started ...
[11:04:56] build prod failed: Cannot determine the module for class LockPage in....

package.json

"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/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2",
"angular2-jwt": "0.1.28",
"@types/lodash": "4.14.52",
"socket.io-client": "1.7.2",
"ng2-pdf-viewer": "1.0.1"
},