Angular-cli build -prod 加上 LazyLoading 問題?

General
1

在 app-routing.module 中 lazyloading module

{ path: ‘setting’, loadChildren: ‘./setting/setting.module#SettingModule’ },

使用 angular-cli build

指令 ng b --> 瀏覽 http://localhost:5000/setting 正常
指令 ng b -prod --> 編譯過程無錯誤，但瀏覽時 http://localhost:5000/setting , 出現錯誤

ERROR Error: Uncaught (in promise): Error: Cannot find module ‘./setting/setting.module’.

以下是 setting.module 程式，用 angular-cli 產生

import { CommonModule } from ‘@angular/common’;
import { SettingRoutingModule } from ‘./setting-routing.module’;

@NgModule({
imports: [
CommonModule,
SettingRoutingModule
],
declarations: []
})
export class SettingModule { }

指令 ng b -prod -aot=false --> 瀏覽 http://localhost:5000/setting 正常

請問 aot + lazy loading 是否有什麼特別要設定之處?

2

這一段 loadChildren的路徑，我的習慣是給予完整的路徑

app/setting/setting.module#SettingModule

1個讚
3

感謝回覆，

完整的路徑也嘗試過了 app/setting/setting.module#SettingModule

會產生一樣的錯誤，只是路徑有變動

ERROR Error: Uncaught (in promise): Error: Cannot find module ‘app/setting/setting.module’.

由於載入的策略是使用 PreloadAllModules

RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules }),

在非使用 aot 時，可以看到 預載了 0.*.chunk.js ，但只要使用 aot , 就不會預載。

4

有Github可以看嗎? 我這邊測試並沒有遇到這個問題

5
6

這問題已經被修正了吧，我手上最新在寫的東西就是 aot + lazyloading，跑起來完全沒有問題
我也有測試過 aot+lazyloading with PreloadAllModules 的模式，也是完全正常。
但是我的 cli 和 angular 都是最新版的。

7

這樣看來，推測可能是其它 module 的問題

列出目前使用的 npm 套件

package.json

 "dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/router": "^4.1.0",
    "angular2-busy": "^2.0.4",
    "angular2-jwt": "^0.2.2",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "d3": "^4.7.4",
    "devextreme": "^16.2.6",
    "devextreme-angular": "^16.2.6",
    "highcharts": "^5.0.10",
    "jquery": "^3.2.1",
    "ng-sidebar": "^4.2.1",
    "ngx-bootstrap": "^1.6.6",
    "rxjs": "^5.3.1",
    "topojson": "^3.0.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.2",
    "@angular/compiler-cli": "^4.0.0",
    "@types/d3": "^4.7.0",
    "@types/highcharts": "^4.2.54",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.41",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

另外再貼上 .angular-cli.json include 的 styles 及 scripts

   "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/angular2-busy/build/style/busy.css",
        "../node_modules/devextreme/dist/css/dx.common.css",
        "../node_modules/devextreme/dist/css/dx.light.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/d3/build/d3.min.js",
        "../node_modules/topojson/dist/topojson.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

再重新 create 一個新的 ng-project ，一一加入這些 module ，
測試看看 aot 的影響，有進度會再來回報。感謝

8

不清楚，我現在在用animation 也有類似問題

1個讚
9

交叉測試後，發現 Angular2-Busy + AOT + LazyLoading 會發生

ERROR Error: Uncaught (in promise): Error: Cannot find module

的問題。

在 angular2-busy 中有使用 BrowserAnimationsModule ，不確定

是不是會引起 alan 所說的問題點

10

不會發生在嵌入BrowserAnimationsModule那層，在我的情況會發生在我自訂的exported class