AOT Build Error - Cannot find quill.module.js

[thmclellan]

Hello,

Everything works well when using JIT with ionic serve, but when I try to compile with "ionic build --release --prod", then I get this error when loading my app in the browser:

main.js:93 Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/etc/app/node_modules/ngx-quill/src/quill.module.js'

There's a related issue commenting on how Node Modules are typically pre built here: https://github.com/driftyco/ionic-app-scripts/issues/632

If you have any advice then I'd really appreciate it. Here below are my system details.

Thank you Tom

---

ionic info:

Cordova CLI: 6.3.1 Ionic Framework Version: 2.2.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.2.2 ios-deploy version: 1.9.1 ios-sim version: 5.0.3 OS: macOS Sierra Node Version: v6.9.1 Xcode version: Xcode 8.3.2 Build version 8E2002

package.json excerpt:

"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/core": "^3.4.4", "@ionic-native/onesignal": "^3.4.4", "@ionic/storage": "2.0.0", "cropperjs": "^0.8.1", "intl": "^1.2.4", "ionic-angular": "2.2.0", "ionic-native": "2.4.1", "ionicons": "3.0.0", "moment": "^2.14.1", "ng2-password-strength-bar": "^1.1.2", "ng2-resource-rest": "1.12.2", "rxjs": "5.0.1", "sw-toolbox": "3.4.0", "zone.js": "0.7.2" }, "devDependencies": { "@ionic/app-scripts": "1.2.2", "typescript": "2.0.9" },

[KillerCodeMonkey]

yeah the path is wrong --> '/Users/etc/app/node_modules/ngx-quill/src/quill.module.js' ist not there in src are the original ts files. and under bundles are the compiled js files.

So you could directly import and use the bundled js-file. Better would be to import ngx-quill like import { ... } from 'ngx-quill'; Webpack or ngc should find it, because it is using the original ts sources and bundles them.

Might you show me some code? How you are using ngx-quill?

[KillerCodeMonkey]

Try it with the latest release 1.2.3

[thmclellan]

Thanks for the fast response- tried the new version and it is not working yet. Here are a few details:

excerpts from app.module.ts:

import { QuillModule } from 'ngx-quill'; // import Quill as a rich text editor 

@NgModule({
  declarations: [
    MyApp,
    PAGES,
    DIRECTIVES,
    PIPES
  ],
  imports: [
    IonicModule.forRoot(MyApp, {        }), 
    ResourceModule.forRoot(),
    IonicStorageModule.forRoot(), // added for Ionic storage 2.0 
    QuillModule,
    PasswordStrengthBarModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    PAGES, 
    ThreadDetail
  ],
  providers: [ 
      AppConfig, 
      CORE_SERVICES, 
      {provide: ErrorHandler, useClass: IonicErrorHandler}, 
      RESOURCES, 
      OneSignal
      ], 
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

When I try again with import { QuillModule } from 'ngx-quill/bundles' instead, then the build process breaks with this error:

[09:49:05]  Error: Unexpected value 'QuillModule in 
            /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/bundles/index.js' 

Here are some more details:

tsconfig.json (standard from Ionic-app-scripts). This excludes typescript processing from node_nodules:

{
  "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", "**/spec", "test", "src/test.ts","src/**/*.spec.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Package.json details:

{
  "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",
    "buildprod": "ionic-app-scripts build --prod",
    "ionic:buildrollup": "ionic-app-scripts build --rollup ./buildconfig/rollup.config.js",
    "minifyold": "ionic-app-scripts minify --cleancss ./buildconfig/cleancss.config.js",
    "closure": "ionic-app-scripts closure  ./buildconfig/closure.config.js"
  },
  "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/core": "^3.4.4",
    "@ionic-native/onesignal": "^3.4.4",
    "@ionic/storage": "2.0.0",
    "cropperjs": "^0.8.1",
    "intl": "^1.2.4",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "moment": "^2.14.1",
    "ng2-password-strength-bar": "^1.1.2",
    "ng2-resource-rest": "1.12.2",
    "ngx-quill": "^1.2.3",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.2",
    "typescript": "2.0.9"
  }
}

Hopefully that helps to clarify. Thanks in advance!

[KillerCodeMonkey]

woooah the ionic-app-scripts version is old.

i tried it with latest ionic and app script and it worked:

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.1",
    "ionicons": "3.0.0",
    "ngx-quill": "^1.2.3",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.0",
    "@ionic/cli-plugin-cordova": "0.0.12",
    "@ionic/cli-plugin-ionic-angular": "0.0.6",
    "typescript": "~2.2.1"
  },

Please try to use newer app scripts.

[thmclellan]

Good catch! I just tried with the latest app scripts 1.3.0 but it came back with a missing source map error in the browser. I'm going to try updating to Ionic 3.1 / NG4 and hopefully will solve the issue. Thanks for the package.json example.

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '...app/node_modules/ngx-quill/src/quill.module.js.map'

[growthclick]

I upgraded to Ionic 3.1 and when adding Quill to the app, I'm getting this error when running ionic build --release --prod:

[12:55:22]  ionic-app-script task: "build" 
[12:55:22]  Error: ./~/ngx-quill/src/quill.module.ts Module parse failed: 
            /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill.module.ts
            Unexpected character '@' (5:0) You may need an appropriate loader to handle this file type. | import { 
            QuillEditorComponent } from './quill-editor.component'; | | @NgModule({ | declarations: [ | 
            QuillEditorComponent @ ./src/app/app.module.ngfactory.js 32:0-55 @ 
            ./src/app/main.ts,./~/ngx-quill/src/quill-editor.component.ts Module parse failed: 
            /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill-editor.component.ts
            Unexpected character '@' (23:0) You may need an appropriate loader to handle this file type. | import * as 
            Quill from 'quill'; | | @Component({ | selector: 'quill-editor', | template: ` @ 
            ./src/components/field-editor/field-editor.ngfactory.js 36:0-65 @ 
            ./src/pages/a-onboarding/a-onboarding.ngfactory.js @ ./src/app/app.module.ngfactory.js @ ./src/app/main.ts 
Error: ./~/ngx-quill/src/quill.module.ts
Module parse failed: /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill.module.ts Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| import { QuillEditorComponent } from './quill-editor.component';
| 
| @NgModule({
|   declarations: [
|     QuillEditorComponent
 @ ./src/app/app.module.ngfactory.js 32:0-55
 @ ./src/app/main.ts,./~/ngx-quill/src/quill-editor.component.ts
Module parse failed: /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill-editor.component.ts Unexpected character '@' (23:0)
You may need an appropriate loader to handle this file type.
| import * as Quill from 'quill';
| 
| @Component({
|   selector: 'quill-editor',
|   template: `
 @ ./src/components/field-editor/field-editor.ngfactory.js 36:0-65
 @ ./src/pages/a-onboarding/a-onboarding.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/app/main.ts
    at BuildError.Error (native)
    at new BuildError (/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/preprocess.js:18:21
    at process._tickCallback (internal/process/next_tick.js:103:7)

I read about a related webpack issue at https://github.com/jkuri/ng2-datepicker/issues/136.

At the Ionic app level, my tsconfig.json excludes typescript processing from node_modules as in:

{
  "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", "**/spec", "test", "src/test.ts","src/**/*.spec.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Is this more of an issue with ionic-app-scripts, or is there some way to add Quill to a list of modules to be processed by webpack? The same error seems to come up when I remove the "node_modules" entry from the excluded list in tsconfig.json.

Thanks, Tom

[growthclick]

To help in troubleshooting, could you please share the app.module.ts from your Ionic 3.01 starter?

Was that the only file that was edited to add Quill? I'm assuming for a basic example it should work just to edit app.module.ts, add the CSS files to index.html, and then add tags to a page template - is that correct?

Thanks, Tom

[KillerCodeMonkey]

sorry for the hazzle. i looked into the ionic cli3 an i have to build the app in another way. And there it is also not working :(.

I do not know why ngc is kicking off the dependencies... if i understand it correctly the build process should create extra js files for external dependencies und load this.

But it simply searches a js file in the wrong folder in the node_modules folder...

Maybe you have a hint how ionic build the app

All in all i think i had to make the project aot ready, using module Factories and so on... an additional tsconfig for aot.

[thmclellan]

Thanks for the followup. I'm going to wait another week or two before trying to migrate to Ionic 3.1 again.

I'm still learning the webpack-based AOT build process, but we recently implemented https://www.npmjs.com/package/ng2-password-strength-bar into our app and it seemed to go smoothly enough. I'm curious how that's working from an ngc perspective.

For our app the ionic 3 AOT build sizes are coming in about 40% smaller than Ionic 2.x - good to see that the extra effort for ngc is worth it.

[KillerCodeMonkey]

for your issue with '@' at is not defined --> i think this is an ionic app scripts issue --> try app-scripts 1.3.4 or newest 1.3.6 ;)

with the new cli you can build a prod build for the browser with:

ionic cordova build --prod and when you get asked for the platform (ios, android)

enter browser ;)

[KillerCodeMonkey]

try version 1.3.0. I added an aot step to this repo. for mit it is working with ionic 3.1, cli beta 3 and app-scripts 1.3.4

[growthclick]

Version 1.3.0 is working perfectly on Ionic app scripts 1.3.4 and Ionic 2.2 with NGC webpack build. Thanks for the changes! I'll test out Ionic 3.1 when I get a chance but I think this issue is safe to close.