Ionic 3 with Lazy Loading Module Not Found Error

[TheBrockEllis]

There was some discussion in #2 about the initial error. I have created a much cleaner repo and tried to import the ng4-fittext module into my app.module.ts file, but I get the following error when attempting to run ionic serve.

Runtime Error Module build failed: Error: ENOENT: no such file or directory, open '/Users/brockellis/Code/itpg-2/node_modules/ng4-fittext/ng4fittext.js'

This, luckily, seems like a much more straight forward error than the ones being discussed in #2. 😄

I have tried adding "node_modules/ng4-fittext/*.ts" to my includes statement in tsconfig.json, but to no avail. There is indeed no .js file in this package. I'm sure this is a simple setting needed to point the module loader to the .ts file instead, but I am not quite sure what it is.

Here is my ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 6.5.0

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.1

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.8
    Node       : v7.6.0
    npm        : 5.3.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b

[sollenne]

Can you post your tsconfig.json?

[TheBrockEllis]

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

This is the stock file as it comes from the Ionic CLI, except for the node_modules/ng4-fittext/*.ts line, which I've added to try and get things working.

[sollenne]

Try removing node_modules from the exclude array.

[TheBrockEllis]

Removing that line allows the app to run locally using the Ionic live reloading server just fine. Yay!

However, when trying to build using ionic cordova build ios --prod --release --verbose I get the following error:

Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/brockellis/Code/itpg-2/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/brockellis/Code/itpg-2/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/brockellis/Code/itpg-2/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts

[sollenne]

ok so we are back to this... When I had this issue, I ended up adding a paths array to my tsconfig.json.

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "paths": {
        "@angular/*": ["../node_modules/@angular/*"]
    }
  }
}

[TheBrockEllis]

Adding the paths entry by itself did nothing to the error. But, if I defined a baseUrl on the compilerOptions and set it to an empty string, we get a new error. Here's the current tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",  <-- added this guy
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "paths": {
      "@angular/*": ["node_modules/@angular/*"] <-- new as well
    }
  },
  "include": [
    "src/**/*.ts",
    "node_modules/ng4-fittext/*.ts" <-- explicitly trying to grab all typescript files from this package  
  ], 
  "exclude": [ <-- no longer excluding node_modules
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

And the new error:

Error: ./node_modules/ng4-fittext/src/ng4fittext.module.ts
Module build failed: TypeError: Cannot read property 'content' of undefined
    at Object.optimizationLoader (/Users/brockellis/Code/itpg-2/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)

[sollenne]

I wouldn't change your baseUrl, we have the url info coming from a server so we needed it clear. Try updating to v1.1.0 from npm. it should bypass some of this nonsense now.

[TheBrockEllis]

Before upgrading to ng4-fittext@1.1.0

So it looks like this error is taking place because the optimization compiler cannot find node_modules/ng4-fittext/src/ng4fittext.module.js. I found that out from digging into the webpack optimization-loader and throwing some console.logs around.

After upgrading to ng4-fittext@1.1.0

I had to change the import statement in the app.module.ts file from

import { Ng4FittextModule } from "ng4-fittext/ng4fittext";

to

import { Ng4FittextModule } from "ng4-fittext";

!! BUT IT WORKED !!

The build went through successfully! Not sure what wizardy you did in that update, but things are looked better (at least for me). Still need to run through the whole Ionic gammut of commands to get an app built, but I definitely owe you a beer. Let me know where/how I can tip you for your time. I'll keep this post updated with any new happenings. (I may also blog about this if you don't mind- since it was a huge learning experience (read: pain in the ass) for me) 😆

For posterity purposes, here is the final tsconfig.json (in case some poor soul run across these issues at a later time)

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

[sollenne]

Yeah, I updated the docs in npm in v1.1.1 (that was the only change from 1.1.0 to 1.1.1), I just need to push it to git. I'm now having a very strange problem of the actual directive not working at all. I'm not sure what happened but you may want to test the usage before you buy that beer.

[TheBrockEllis]

I will start testing usage ASAP. Just happy to get past those build errors. They were starting to affect my vision.

Let me know if there's anything you need me to test out or try. You've gone above and beyond. I'll do anything I can to help out.

[TheBrockEllis]

It does look like the directive isn't being recognized. I get the following errors when trying to use it:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'fittext' since it isn't a known property of 'h1'. ("<h1 [ERROR ->][fittext]="true" [activateOnResize]="true" [container]="container" [useMaxFontSize]="false">"): ng:///BreweriesPageModule/BreweriesPage.html@36:10

[sollenne]

Do you have CUSTOM_ELEMENTS_SCHEMA in your app.module.ts?

[TheBrockEllis]

I did not. I added it to the app.module.ts file and no longer got any errors ( 🎉 ), but now the text is not being resized. I'm continuing to dive into the source to figure out what's going on.

Edit

I had actually attached #container to the wrong element. Text was not resizing because of this error.

However, after reassigning the parent element, I got the following error Cannot read property 'clientWidth' of undefined. Continuing to research.

[sollenne]

It's working now.

steps:

• delete node_modules dir
• delete package-lock.json
• run npm install --save ng4-fittext (v1.1.1)
• run npm install
• run ng-serve

it works.

[sollenne]

so something changed with the html implementation. Probably due to an update with angular, or a way ng-packagr compiles the code.

now there is a requirement for a parent container so instead of:

<div #fittextstatus style="width:80%">
        <h2 class="text-xs-center"
            [fittext]
            [container]="fittextstatus"
            [maxFontSize]="600"
            [compression]="1.2">
            hey there
        </h2>
    </div>

now this has to have a parent container with a block level set width, so:

<div style="width: 80%;">
    <div #fittextstatus>
        <h2 class="text-xs-center"
            [fittext]
            [container]="fittextstatus"
            [maxFontSize]="600"
            [compression]="1.2">
            hey there
        </h2>
    </div>
</div>

Alternatively, you could set a width on the body of your app itself (like 100%), and that should fix it. I made this for the way I normally make apps, with a CSS lib like bootstrap using their grid pattern with containers.

I'll modify it to not need this width but for now it should work. Closing this issue for now. If you want to work on it, feel free to issue a pull-request