Ionic-app-scripts: Error: The Angular AoT build failed. See the issues above

[mu250234]

Hi,
I have built an angular library and exported components , when trying to consume in ionic project ionic serve is perfect , but when i give ionic build --prod getting errors ,
[12:22:36] typescript error
Unexpected value 'LibComponent in
C:/vakaCommonLib/21Dec/ionic/myApp/node_modules/quickstart-lib/dist/
bundles/quickstart-lib.umd.js' imported
by the module 'AppModule in C:/vakaCommonLib/21Dec/ionic/myApp/src/a
pp/app.module.ts'. Please add a
@NgModule annotation.

Error: The Angular AoT build failed. See the issues above
at C:\vakaCommonLib\21Dec\ionic\myApp\node_modules@ionic\app-scripts\dist\a
ot\aot-compiler.js:233:55
at step (C:\vakaCommonLib\21Dec\ionic\myApp\node_modules@ionic\app-scripts
dist\aot\aot-compiler.js:32:23)
at Object.next (C:\vakaCommonLib\21Dec\ionic\myApp\node_modules@ionic\app-s
cripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (C:\vakaCommonLib\21Dec\ionic\myApp\node_modules@ionic\app-scr
ipts\dist\aot\aot-compiler.js:4:58)
at

//////////////////////////// my package.son

"dependencies": {
"angular/common": "5.0.0",
"angular/compiler": "5.0.0",
"angular/compiler-cli": "5.0.0",
"angular/core": "5.0.0",
"angular/forms": "5.0.0",
"angular/http": "5.0.0",
"angular/platform-browser": "5.0.0",
"angular/platform-browser-dynamic": "5.0.0",
"ionic-native/core": "4.3.2",
"ionic-native/splash-screen": "4.3.2",
"onic-native/status-bar": "4.3.2",
"ionic/storage": "2.1.3",
"gen2": "file:../../gen2/gen2-0.1.0.tgz",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"quickstart-lib": "file:../../../../vakaCommonMaster/seed/angular-quickstart-lib/quickstart-lib-1.0.0.tgz",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"ionic/app-scripts": "3.1.2",
"typescript": "2.4.2"
},

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

],

"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
////////////////////////////////// here is snapshot of my lib

[Alzmoth]

i am getting the same error
anyone help ?

[mauricewipf]

+1

[Alzmoth]

anyone help ?

[Alzmoth]

I fix it bro.
https://stackoverflow.com/questions/47987092/ionic-cordova-build-android-failed-due-to-aot?rq=1

[brianwang]

+1

[rafbgarcia]

+1, did anyone manage to workaround this annoying issue?

[MarcioQuimbundo]

Solution:
run > npm i [email protected]

[rafbgarcia]

Actually, this was my solution: https://forum.ionicframework.com/t/issue-running-ionic-build-prod/120435/16?u=rafbgarcia

tldr: can't export default class, I had to export class instead.

[AadityaDev]

There are two steps which you have to follow:
Step1. delete all *.module.js, *module.jsmap file
Step2. remove the @IonicPage() from your .ts

[Ice745]

your steps don't work @AadityaDev

[othecos]

Like @AadityaDev said, this issue is related with @IonicPage(), removing then should work. But if you guys still couldn't resolve this issue, try to run ionic build --aot --minifyjs --minifycss . Personally I don't know the performance between both, but it helped me!

[harshadduasane]

facing same issue

Error: The Angular AoT build failed. See the issues above
at D:\xyx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:232:55
at step (D:\vinod\ref\SelfHelp_180718_v1\SelfHelp\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (D:\xyx\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (D:\xyz\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)

My Ionic Info:
cli packages: (C:\Users\Admin\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.7-201801172029
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2-201807062122

System:

Node : v6.11.4
npm  : 6.2.0
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Dependencies:

"dependencies": {
"@angular/animations": "5.0.0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@ionic-native/core": "4.3.3",
"@ionic-native/device": "4.4.2",
"@ionic-native/document-viewer": "^4.7.0",
"@ionic-native/file": "^4.5.2",
"@ionic-native/file-transfer": "^4.5.3",
"@ionic-native/google-analytics": "^4.12.2",
"@ionic-native/network": "^4.4.2",
"@ionic-native/social-sharing": "^4.5.3",
"@ionic-native/splash-screen": "4.3.3",
"@ionic-native/status-bar": "4.3.3",
"@ionic/storage": "2.1.3",
"chart.js": "^2.7.1",
"cordova-android": "~6.3.0",
"cordova-browser": "5.0.4",
"cordova-ios": "4.5.4",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-document-viewer": "^0.9.9",
"cordova-plugin-file": "^5.0.0",
"cordova-plugin-file-transfer": "^1.7.0",
"cordova-plugin-google-analytics": "^1.8.6",
"cordova-plugin-ionic-webview": "1.1.16",
"cordova-plugin-network-information": "^1.3.4",
"cordova-plugin-splashscreen": "4.0.3",
"cordova-plugin-statusbar": "2.2.2",
"cordova-plugin-whitelist": "1.3.1",
"cordova-plugin-x-socialsharing": "^5.3.2",
"cordova-sqlite-storage": "2.1.2",
"es6-promise-plugin": "^4.2.2",
"ionic-angular": "nightly",
"ionic-plugin-keyboard": "2.2.1",
"ionic-tooltips": "^2.0.1",
"ionic2-super-tabs": "4.1.5",
"ionic2-zoom-area": "^1.0.14",
"ionicons": "3.0.0",
"pdfmake": "^0.1.36",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "nightly",
"typescript": "~2.4.2"
},

Plz help.

[david95thinkcode]

Hi I know it's late but I was facing the same problem since 5 days ago.

To fix that problem, you just have to read instructions shown before the error itself.
Read it carefully and make sure you didn't import a page using lazy loading inside app.module.ts.
Compilation fails because your page is already defined inside its own module so it's not efficient to import it again inside app.module.ts
Remember, after you remove it from app.module.ts, make sure to replace invocation to this page from others pages of your app by recommanded way for lazy loading with Ionic 3.
Official Ionic Lazy loading explaination here

Hope it helps !

[taofik-nos]

Don't forget to use the --verbose option when building. The error for me was a module I forgot to import.

[caoxiemeihao]

+1