Libs not found in prod mode

[MathieuNls]

Short description of the problem:

I have one Angular2 project created with the ng-cli and one Ionic2 project.
The angular2 project, called core is a library that I intend to reuse in many Angular2/Ionic2 projects.
core exports a NgModule, Services and all kind of sweets.

My Ionic2 project has core as a NPM dependency and it can use/extend the classes contained in core as long as I import them : import { CoreModule } from 'core'; for example.

The content of myionic/node_modules/core is as follows:

package.json 
dist/
-index.js
-index.js.map
-src/
--core.module.js
--directives/
--pipes/
--...

In package.json I have "main": "./dist/index.js and index.js exports all my classes like so : export * from './src/core.module';

In development mode (i.e. ionic serve|run|emulate) everything work as expected. In production mode, however, the minification breaks my import with the following error: Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/math/myionic/node_modules/core/src/core.module.js'
The build folder only contains one big js and no node_modules folder; which is kind of the point of minification.

What behavior are you expecting?

Steps to reproduce:

1. create new project using ng-cli
2. create new project using ionic-cli
3. add ng project as dependency of ionic project and use some classes
4. ionic serve -> works
5. ionic build ios --prod -> file not found leading to a white screen.

Which @ionic/app-scripts version are you using?

2-rc4/1.0.0

[rehiy]

me too

[severus1990]

Same issue with me also

[ksendra]

Having the same issue with RC5

[themastersoda]

Same thing here.

[severus1990]

Check for case sensitive imports! See if the folder and component name in your imports are matching exactly with the actual folder name and component name. Eg. login == login and Login != login

[themastersoda]

@severus1990, that's definitely not case related. All libs that I'm trying to import are lowercase, they're just outside of node_modules or src.

[themastersoda]

Any news on this issue?
As a temporary solution I've found that reverting to app-scripts 0.0.45 works for prod builds, but serve and dev builds do not work with that, so i'm switching between 1.0.0 for development and 0.0.45 for building production builds.

[danbucholtz]

Can someone create a minimal reproduction repo and share it here? I have not seen this issue.

Thanks,
Dan

[themastersoda]

Hey @danbucholtz, here's a repo with problem displayed: https://github.com/themastersoda/-ionic-app-scripts-632

external library sits in ./api folder. Everything works with ionic serve and ionic run android, however 'ionic run android --prod' completes, but app crashes after splashscreen with error:
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '...\libProb\api\external.js'

[danbucholtz]

@themastersoda,

Thanks for the repo.

Where are you importing external in this app? I didn't see it in my quick look.

What is transpiling the code to javascript? It is outside of the TypeScript source path.

Thanks,
Dan

[themastersoda]

@danbucholtz, sorry, forgot to mention that. Import is in the home component.
Building with app-scripts@0.0.45 works though, so something must have changed since then.

[themastersoda]

@danbucholtz another worthy mention is that with 0.0.45 the build process generated js, map and metadata files for this lib, so it seems that it was getting transpiled just fine during ngc.

[danbucholtz]

@themastersoda,

I will take a look.

Thanks,
Dan

[patwaswapnil]

Same thing here, any update?

while using https://www.npmjs.com/package/angular2-tag-input .

[danbucholtz]

This is user error. If you want to reference a TypeScript file outside of the context of the src directory, you need to include it in the include array in the tsconfig.json file.

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

It's working fine for me with ionic serve and ionic run android --prod after making that change. TypeScript won't be compiled unless it's in the include array. Typically, libraries are not distributed as TypeScript, rather they're distributed as .js files and .d.ts files that are generated by compiling the TypeScript.

Thanks,
Dan

[patwaswapnil]

Thanks @danbucholtz , It worked. Any settings for modules inside node_module directory.
I install package from npm and it works fine with serve and development build APK but not with --prod build.

[goleary]

@danbucholtz I'm curious why this problem manifests when building/running with the --prod flag, but not normally?

[danbucholtz]

@goleary,

I'm not sure I'm following what you're asking.

Thanks,
Dan

[goleary]

@danbucholtz I am curious why when I or others (above) build or run the app in dev mode everything works correctly, but when the --prod flag is applied things start breaking.

I had files that were "excluded" in my tsconfig because I didn't want them to be compiled on their own. They were imported from other .ts files that were included in the compilation process. This caused no problems when building/running in dev mode. When I switched over to prod mode these files were no longer accessible and caused errors to be generated (and surfaced at run-time). Any idea what the behaviour changes between dev & prod?

[themastersoda]

@goleary Prod mode performs ahead of time compilation, so it has to be able to reach all source files used in your app. Since not all of them are available, compilation fails. Dev mode does not perform compilation, it just uses the existing files instead.

[danbucholtz]

@goleary,

Off the top of my head, I'm not sure. We assemble a list of typescript files and transpile them for dev mode, and then for prod mode we delegate that to ngc, the Angular AoT compiler. I'm sure it's something in there.

Thanks,
Dan

[goleary]

@themastersoda @danbucholtz cool thanks for the info!

[mu250234]

@danbucholtz ,
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
}
}