Import of Module does not work in IONIC 3

[mburger81]

We would like to test this lib and after installing it from npm we tried to import it on a component like this

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

But with this we run in this error
Module build failed: Error: ENOENT: no such file or directory, open '/......./node_modules/ng4-fittext/ng4-fittext.js

I'm not an expert on angular/npm builds but I think you do something wrong on it can you provide a solution?

[sollenne]

@mburger81 It doesn't go in the component. Import it into your app.module.ts. You'll then be able to use it anywhere within the app.module, which is most likely your entire app.

app.module:

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

@NgModule({
    imports: [
        BrowserModule,
        Ng4FittextModule,
        // other modules
    ],
})

closing this issue. Let me know if this doesn't fix it.

[mburger81]

Yes, but it has still the same result

import { Ng4FittextModule } from "ng4-fittext/ng4fittext";
@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        BrowserModule,
        HttpModule,
        LATouchModule,
        Ng4FittextModule,
....
Error: Module build failed: Error: ENOENT: no such file or directory, open '/....../node_modules/ng4-fittext/ng4fittext.js'

I'm using it in an Ionic3 app which is still angular4 and which should not be a problem.

Looking to the installed node folder the ng4fittext.js file doesn't exists

[sollenne]

well. that is true, there is no .js file. it's .ts.

Honestly, I haven't considered supporting this in ionic, but I'm building an ionic app to test as we speak. I have a feeling there is a configuration issue with ts/js. What command are you running to get the error? Just ionic serve?

[mburger81]

Yes ionic serve. As mentioned before I'm not an expert on bundling and npm pacakges. But there should no difference using it on ionic or not. We use different other ng2 libs on ionic without problems.

[sollenne]

@mburger81 ... Got it to work using these steps:

1. fresh install of ionic
2. delete node_modules directory,
3. updated all available dependencies in package.json,
4. fresh install of ng4-fittext (v1.0.9),
5. run npm-install
6. in tsconfig.json, add this to include: "node_modules/ng4-fittext/*.ts",
7. in tsconfig.json, remove "node_modules" from exclude,
8. run ionic serve

I have it working locally. Your issue I think is the tsconfig, but that did expose a misnamed export in this repo. I hope this helps man.

[TheBrockEllis]

I'm getting the same error trying to use this package in an Ionic 3 app.

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/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/brockellis/Code/itpg/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts, resolving symbol ɵe in /Users/brockellis/Code/itpg/node_modules/ng4-fittext/node_modules/@angular/core/core.d.ts

Currently using Angular 4.1.3, as that is the default Angular version shipping with the Ionic CLI.

The tsconfig.json file changes doesn't seem to make any difference.

The app is set up to use lazy loading so each component has it's own module with dependencies, but I've attempted both methods; loading the Ng4Fittext module in each components module and also loading it in the app.module for the whole app. No difference between the two.

[sollenne]

I left out a step above, I installed "sw-toolbox": "^3.6.0",. You guys are giving me a run for my money today.

@TheBrockEllis , when researching your error, I actually found a thread that I had used for the same error recently check it out. Appears to be a (known) angular issue.

[TheBrockEllis]

Hi there, @sollenne! Thanks so much for the quick reply!

I've been bashing my head against this issue for 4+ hours now. Made a little progress. Here is the current error that I am seeing:

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/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader-impl.js:14:24)
It seems that all is well and works until I add the Ng4FittextModule to my app.module.ts imports array. As soon as I do that, the build with --prod breaks. If I run the build command without the prod flag, it will work. Also, if I import the Ng4FittextModule but do not include it in the imports array, it will work as well.

I've tried adding the "paths": { "@angular/*": ["node_modules/@angular/*"] } to my compilerOptions in tsconfig.json and also adding "node_modules/ng4-fittext/*.ts" to the include list, but it doesn't seem to help.

I already owe you a beer for your help, but have you seen anything like this before? I'm just about at my whits-end.

[mburger81]

So, I cloned the project and used angular cli and ng-packager to create an angular4 library as described by angular.
Doing this anything is fine and I can install the bundle into ionic or any other angular app without workarounds and without errors.

1. install ng-packagr
   npm install ng-packagr --save-dev
2. create packagr script in package.json
   "packagr": "ng-packagr -p ng-package.json"
3. create ng-package.json file for ng-packagr

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
        "entryFile": "index.ts"
    }
}

4. run packagr script which creats the build under dist folder
   npm run packagr
5. go into dist folder and do an npm pack which creats an npm package to release
   npm pack
6. now you can find the release as ng4-fittextxt-1.0.9.tgz in dist folder, which you can install from you ionic or angular app doing this
   npm install ~/ng4-fittext/dist/ng4-fittext-1.0.9.tgz --save

at the end now you can import the Module into any module you like, you don't have to import it into app module and you can import it only with the npm package name
import { Ng4FittextModule } from "ng4-fittext";

Now anything is working fine.

At the end I got on production build the error mentioned firstly from @TheBrockEllis, this is an angular core problem, I downgraded it to 4.1.3 and anything is working great!

Very great library!!!

@sollenne If you like I can do a pullrequest? I have also done a enhancement on the lib, something we needed for us.

[sollenne]

@mburger81 @TheBrockEllis Are you guys working on the same project?

@mburger81 Go ahead and make PR and I'll review it. If you want to include documentation for ionic 3 that would probably be helpful.

@TheBrockEllis , If @mburger81's fix didn't work, can you open a new issue instead of using this thread? EDIT: this fix is quite involved. You can wait until the PR is merged if you like. I'll work on it now.