在 prod 模式下执行 ionic 2 Android 应用程序时出错，找不到模块 ngfactory

Question

我们在使用 --prod 标志执行 ionic2 应用程序时遇到此错误

在启动画面加载后屏幕变白。

我们启动的命令是：

离子运行 android --prod

我们正在使用一个设备进行部署，一个 Nexus 5x（与模拟器的行为相同）

离子信息：

apache cordova 6.4.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.5.0
Xcode version: Not installed

Cordova 插件：

这些是我们对 package.json 的依赖：

"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"@ionic/storage": "1.1.6",
"angular2-google-maps": "0.16.0",
"ionic-angular": "2.1.0",
"ionic-native": "2.5.1",
"ionicons": "3.0.0",
"localforage": "1.4.3",
"localforage-cordovasqlitedriver": "1.5.0",
"rxjs": "5.0.0-beta.12",
"saml2-js": "1.11.0",
"tslint": "4.0.0",
"zone.js": "0.6.26"
}

还有我们的 devDependencies：

"devDependencies": {
"@ionic/app-scripts": "^1.2.2",
"@types/jasmine": "2.5.38",
"@types/node": "7.0.4",
"angular-cli": "1.0.0-beta.21",
"codelyzer": "2.0.0-beta.1",
"electron": "1.4.12",
"electron-builder": "11.2.3",
"electron-packager": "8.5.0",
"jasmine-core": "2.5.2",
"karma": "1.3.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-mocha-reporter": "2.2.1",
"karma-remap-istanbul": "0.2.1",
"sw-toolbox": "3.5.1",
"typescript": "^2.0.9"
}

tsconfig.json 内容：

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

如您所见，我们已将 ionic-script 更新到最新版本，只是为了检查问题是否已解决，但没有成功。

使用相同的堆栈和 1.2.0 版本的@ionic/app-scripts，似乎生成了 ngfactory 文件，但我们有另一个错误（在运行时）：

缩放：

我们在github上看到了一个关于这个错误的问题，但是已经修复了这个错误建议更新到1.2.1版本，并且再次出现“找不到模块..ngfactory”的错误

https://forum.ionicframework.com/t/error-after-updating-app-scripts-to-1-2-0/84207

https://github.com/driftyco/ionic-app-scripts/issues/836

知道为什么 ngfactory 文件没有在包含这些版本的包中生成吗？

应感谢任何帮助，因为这是将出色且非常完整的应用程序投入生产的最新步骤，以减少开始时的加载时间。 提前感谢您的无价帮助。

问候

Answer 1

删除 package.json 中“typescript”和“@ionic/app-scripts”包前的“^”符号。它应该如下所示：

"typescript": "2.0.9",
"@ionic/app-scripts": "1.2.2"

运行npm install，然后重试。

Answer 2

我们发现了问题。只做几件事就解决了：

1) 使用这些依赖项更新 package.json：

  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.3.0",
    "ionic-native": "2.5.1",
    "ionicons": "3.0.0",
    "localforage": "1.4.3",
    "localforage-cordovasqlitedriver": "1.5.0",
    "angular2-google-maps": "0.16.0",
    "saml2-js": "1.11.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.2",
    "typescript": "2.0.9",
    "tslint": "4.0.0"
  },

2) 移除我们在 package.json 上的这个配置：

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "#inline-source-map"
  }

默认情况下 ionic 2 使用 webpack，所以是多余的。 唯一的问题是删除这一行：

"ionic_source_map_type": "#inline-source-map"

我们不能直接在浏览器上使用 typescript 进行调试，但是我们会根据环境生成不同的配置。

好消息是，我们的应用在 Android Nexus 5X 上运行只需 3 秒而不是 12 秒，javascript 包从 14Mb 减少到 2Mb，所以值得！感谢 ionic 2 家伙提供了很棒的框架和很棒的脚本。该应用程序在中型移动设备上的表现非常好，因此对我们来说它接近原生，并且仅在 3 个月内针对 ios（尚未测试）和 android 开发，我们对结果非常满意。

希望这篇文章对某人有所帮助

祝你有美好的一天！