Ionic-framework: [4.0.0-beta.18] @ionic/angular/dist/index"' has no exported member 'Content' (and 'Segment')

[tassiovale]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Considering the following code:

• home.page.ts (line 3)

import { Content } from '@ionic/angular';

• login.page.ts (line 2)

import { Content } from '@ionic/angular';

• network-home.page.ts (line 7)

import { Segment, NavController } from '@ionic/angular';

And running the build command:

ionic cordova build android --prod

I get the following error message:

ERROR in src/app/core/pages/home/home.page.ts(3,10): error TS2305: Module '"/Users/tassiovale/Documents/develop/15158-ui-residential-routers/Code/03.LPI/intelbras-lpi/node_modules/@ionic/angular/dist/index"' has no exported member 'Content'.
src/app/core/pages/login/login.page.ts(2,10): error TS2305: Module '"/Users/tassiovale/Documents/develop/15158-ui-residential-routers/Code/03.LPI/intelbras-lpi/node_modules/@ionic/angular/dist/index"' has no exported member 'Content'.
src/app/modules/network/pages/home/network-home.page.ts(7,10): error TS2305: Module '"/Users/tassiovale/Documents/develop/15158-ui-residential-routers/Code/03.LPI/intelbras-lpi/node_modules/@ionic/angular/dist/index"' has no exported member 'Segment'.

Expected behavior:

The project is built successfully

Steps to reproduce:

npm i
ionic cordova build android --prod

Other information:

• package.json

{
  "name": "lpi",
  "version": "0.0.1",
  "author": " ",
  "homepage": " ",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/router": "^7.0.0",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "^4.0.0-beta.17",
    "@ionic/ng-toolkit": "^1.0.8",
    "@ionic/schematics-angular": "^1.0.6",
    "@ngx-translate/core": "^11.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "cordova-android": "7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.5.0",
    "core-js": "^2.5.4",
    "lodash": "^4.17.11",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "puppeteer": "^1.9.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "description": "Interfaces Product Line",
  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {}
    },
    "platforms": [
      "android",
      "browser",
      "ios"
    ]
  }
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.18
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/tassiovale/Library/Android/sdk)
   NodeJS            : v8.9.4 (/usr/local/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[peterpeterparker]

use IonContent or IonSegment etc.

[CFT-Chris]

Looks by design. See PR #16618 which addresses #16550. Many Ionic exports are now prefixed with Ion to avoid conflicting names. One common conflict was with @angular/core's Input, e.g.

[manucorporat]

Yep, all components are now prefixed: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-prefixed-ion--components

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.