Ionic – No provider for t! …

$ ionic info

Ionic:

ionic (Ionic CLI) : 4.10.2 (/home/tanguy/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 19 other plugins)

System:

Android SDK Tools : 26.1.1 (/home/tanguy/Softwares/android-sdk/Sdk)
NodeJS : v8.11.3 (/home/tanguy/.nvm/versions/node/v8.11.3/bin/node)
npm : 6.5.0
OS : Linux 4.15

 

I was building for production, on Android a project using Push native plugin.

I encountered an error “No provider for t! white screen”

The problem was caused because I forgot to add Push to the providers of my app.module.ts and the documentation say nothing about it on the plugin page.

However, it was stated here: https://ionicframework.com/docs/native/#angular

Import the plugin in a @NgModule and add it to the list of Providers. For Angular, the import path should end with /ngx. Angular’s change detection is automatically handled.

Building angular app with source map fail with “CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory”

I’m building an Angular app with this command:

ng build --prod --configuration=prod --source-map

The versions of Angular and other packages were:

tanguy@tanguy-Aspire-E5-575G:~/Projects/Piximate/web$ ng version

Angular CLI: 6.1.2
Node: 8.10.0
OS: linux x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.7.2
@angular-devkit/build-angular 0.7.2
@angular-devkit/build-optimizer 0.7.2
@angular-devkit/build-webpack 0.7.2
@angular-devkit/core 0.7.2
@angular-devkit/schematics 0.7.2
@angular/cdk 6.4.2
@angular/cli 6.1.2
@angular/material 6.4.2
@ngtools/webpack 6.1.2
@schematics/angular 0.7.2
@schematics/update 0.7.2
rxjs 6.2.2
typescript 2.9.2
webpack 4.9.2

There is a Github thread about this issue: https://github.com/angular/angular-cli/issues/5618
But it has never been resolved. However it contains some potential solutions.

What finally worked for me is the solution proposed in this comment: Increase the max size of Node.js for the command by running this:

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --configuration=staging --source-map

To make my life easier, I created an alias for this command in my package.json

 

// package.json

"scripts": {
  "ng-high-mem": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng",
  "build:prod": "npm run ng-high-mem -- build --prod --configuration=prod --source-map",
  ...
}

Note the double dash “–” before passing the arguments of the build. This is needed to ensure theses arguments are not swallowed by npm run and make sure they are passed to ng-high-mem

So I can build successfully with

npm run build:staging

 

TypeError: Cannot read property ‘length’ of undefined

When running npm test, I had this error:


Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\typescript\lib\typescript.js:8586:109)
at parseSourceFileWorker (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\typescript\lib\typescript.js:8516:26)
at Object.parseSourceFile (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\typescript\lib\typescript.js:8477:26)
at Object.createSourceFile (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\typescript\lib\typescript.js:8339:29)
at new TypeScriptFileRefactor (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@ngtools\webpack\src\refactor.js:29:35)
at Object.resolveEntryModuleFromMain (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@ngtools\webpack\src\entry_resolver.js:105:20)
at AotPlugin._setupOptions (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@ngtools\webpack\src\plugin.js:143:50)
at new AotPlugin (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@ngtools\webpack\src\plugin.js:26:14)
at _createAotPlugin (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12)
at Object.exports.getNonAotTestConfig (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@angular\cli\models\webpack-configs\typescript.js:103:19)
at WebpackTestConfig.buildConfig (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@angular\cli\models\webpack-test-config.js:17:31)
at init (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\@angular\cli\plugins\karma.js:79:94)
at Array.invoke (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\di\lib\injector.js:75:15)
at Injector.get (D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\di\lib\injector.js:48:43)
at D:\tangu\Documents\UCL\cours\SINF2MS\Q4\Thesis\HAppi\node_modules\karma\lib\server.js:143:20
at Array.forEach (native)
npm ERR! Test failed. See above for more details.

With package.json

{
  "name": "HAppi-mobile",
  "author": "Geohealth Crew",
  "homepage": "https://github.com/GeoHealth/HAppi_mobile",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test": "ng test --code-coverage",
    "test-travis": "npm run lint && ng test --single-run --code-coverage && npm run protractor",
    "build-translation": "po2json resources/locales/fr_BE/fr_BE.po src/assets/locales/fr_BE.json --pretty && po2json resources/locales/en/en.po src/assets/locales/en.json --pretty",
    "lint": "npm run tslint \"src/**/*.ts\" && npm run tslint \"e2e/**/*.ts\"",
    "tslint": "tslint",
    "protractor": "webdriver-manager update && protractor"
  },
  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/compiler-cli": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/platform-server": "^2.4.0",
    "@ionic/cloud-angular": "^0.9.1",
    "@ionic/storage": "1.1.7",
    "angular2-moment": "^1.2.0",
    "chart.js": "^2.5.0",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "localforage": "^1.4.3",
    "lokijs": "^1.4.1",
    "rxjs": "^5.1.0",
    "stacktrace-js": "^1.3.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.4",
    "@angular/compiler-cli": "^2.4.0",
    "@ionic/app-scripts": "1.1.4",
    "@types/jasmine": "2.5.41",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "connect": "^3.6.2",
    "jasmine": "^2.6.0",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^4.1.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "po2json": "^0.4.5",
    "protractor": "^5.1.2",
    "ts-node": "^3.0.4",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.3.0",
    "typescript": "~2.0.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "HAppi: An Ionic project"
}

 

This solution helped me out: https://github.com/angular/angular-cli/issues/5053#issuecomment-283951922

TypeErrorCannot read property 'length' of undefined

Angular 2 – Fresh project cannot find module added with npm

Note: the version of Angular 2 is:


@angular/cli: 1.0.0-rc.0
node: 6.9.5
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.10

I started a new project Angular 2 using the CLI and just added the parse npm package using


npm install parse --save

So I’m all happy and want to try my new app with ng serve -o and BIMERROR in D:/tangu/Documents/Projects/cannot-find-parse/src/app/app.component.ts (2,21): Cannot find module ‘parse’.)

Here is the commit with the project failing 😥

SOLUTION

I added a file named declarations.d.ts under /src and now it works fine 🙂

Content of src/declarations.d.ts:


declare module '*';

 

Here is the github project: https://github.com/seza443/cannot-find-parse