TypeError: Cannot read property 'imagepipeline' of undefined

[Niko87]

tns plugin add nativescript-fresco on sample-gorceries, webpaking... ok, npm run start-android-bundle, the app crash on init :

package.json

{
  "name": "Groceries",
  "version": "1.0.0",
  "description": "A NativeScript-built iOS and Android app for managing grocery lists",
  "repository": {
    "type": "git",
    "url": "https://github.com/nativescript/sample-Groceries.git"
  },
  "keywords": [
    "NativeScript"
  ],
  "author": "TJ VanToll <tj.vantoll@gmail.com> (https://www.tjvantoll.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nativescript/sample-Groceries/issues"
  },
  "homepage": "https://github.com/nativescript/sample-Groceries/groceries",
  "nativescript": {
    "id": "org.nativescript.groceries",
    "tns-android": {
      "version": "3.1.1"
    },
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "scripts": {
    "tslint": "tslint -p tsconfig.json",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/common": "~4.1.3",
    "@angular/compiler": "~4.1.3",
    "@angular/core": "~4.1.3",
    "@angular/forms": "~4.1.3",
    "@angular/http": "~4.1.3",
    "@angular/platform-browser": "~4.1.3",
    "@angular/router": "~4.1.3",
    "email-validator": "^1.0.7",
    "nativescript-angular": "next",
    "nativescript-fresco": "^3.0.4",
    "nativescript-iqkeyboardmanager": "1.0.1",
    "nativescript-social-share": "~1.3.2",
    "nativescript-unit-test-runner": "^0.3.3",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.4.0",
    "tns-core-modules": "next",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.1.3",
    "@ngtools/webpack": "~1.4.0",
    "babel-traverse": "6.24.1",
    "babel-types": "6.24.1",
    "babylon": "6.17.0",
    "codelyzer": "^3.0.1",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "filewalker": "^0.1.3",
    "jasmine-core": "^2.6.2",
    "karma": "^1.7.0",
    "karma-jasmine": "^1.0.2",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "^0.4.5",
    "nativescript-dev-webpack": "next",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "tslint": "^5.4.2",
    "typescript": "~2.3.4",
    "webpack": "~2.6.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}

app.module.ts

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { authProviders, appRoutes } from "./app.routing";
import { AppComponent } from "./app.component";
import { setStatusBarColors, BackendService, LoginService } from "./shared";

import { LoginModule } from "./login/login.module";
import { GroceriesModule } from "./groceries/groceries.module";

import { TNSFrescoModule } from "nativescript-fresco/angular";

import * as frescoModule from "nativescript-fresco";
import * as applicationModule from "application";

applicationModule.on("launch", () => {
  if (applicationModule.android) {
    frescoModule.initialize();
  }
});

setStatusBarColors();

@NgModule({
  providers: [
    BackendService,
    LoginService,
    authProviders
  ],
  imports: [
    NativeScriptModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(appRoutes),
    LoginModule,
    GroceriesModule,
    TNSFrescoModule
  ],
  declarations: [
      AppComponent,
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

[VladimirAmiorkov]

Hi @Niko87 ,

It looks like the sample-groceries app uses dispatched Angular dependencies of some sort. I updated the demo app of this repository and was able to run the npm run start-android-bundle command with no issues and the app was deployed to the Android emulator correctly. For all of the currently used deps you can take a look at the demo app package.json here.

Can you try to run that demo app on your side and let us know if you experience the same issues? More information on how to run the demo app with Angular can be found here.

[Niko87]

hi! im using other versions of the packages on my project, and not having this issue anymore.. i think its may be problem of webpack package , not a fresco problem.. thanks!!