web-dev-qa-db-ja.com

例外：キャッチされません（約束）：エラー：モジュール 'app / home / home.module'が見つかりません

ルータで遅延ロードAngular 2モジュールを試みていますが、このエラーが発生しています：

error_handler.js：50 EXCEPTION：Uncaught（promise）：Error：モジュール 'app/home/home.module'が見つかりません

私はこの問題に直面しているすべての人の解決策であるように見えますが、Angular2 RC7とangular-cliでの遅延読み込み webpack

ここに私のコード：app.module

import { MediatorService } from './home/mediator.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


import appRoutes from "./app.routes";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    appRoutes
  ],
  providers: [MediatorService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routes

import { RouterModule } from '@angular/router';

const routes = [
 {path : '', loadChildren: './home/home.module#HomeModule'},
 {path: 'devis', loadChildren: './forms/forms.module#FormsModule'}
];

export default RouterModule.forRoot(routes);

home.module

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import homeRoutes from "./home.routes";

@NgModule({
  imports:[CommonModule, homeRoutes],
  declarations: [HomeComponent]
})
export default class HomeModule{}

home.routes

import {RouterModule} from "@angular/router";
import {HomeComponent} from "./home.component";
const routes = [
  {path: '', component: HomeComponent}
];

export default RouterModule.forChild(routes);

Package.json

{
  "name": "insurance",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "bootstrap": "^4.0.0-alpha.5",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.34",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.0.2",
    "TypeScript": "~2.0.3"
  }
}

[〜＃〜] update [〜＃〜]

私はそれをplunkerで動作させることができました：

https://plnkr.co/edit/uLxmxDIeCdDzxbFjYQS7?p=preview

それでも私のマシンには何もありません!!!!

[〜＃〜] update [〜＃〜]

新しい仮想マシンubuntu 16.04と同じ問題をインストールしました!!それはモジュールのバージョンに関する何かかもしれません、私はpackage.jsonのものを意味します!! plunkerで使用されているバージョンを知る方法それがそこで働いたので!!!

angularlazy-loadingangular2-routingangular-cliwebpack-dev-server
13
Zecide

私はそれを機能させることができました、ここに私がやったことです：

1-モジュール内に宛先コードを作成します（ファイルではありません）

2-コンポーネントの親ディレクトリにモジュールファイルを作成する

3-このようなエクスポートで「デフォルト」を削除します

export DEFAULT class HomeModule { }

なりました

export class HomeModule { }

ここでベータ24で動作することがわかります： https://github.com/mauricedb/lazy-routes

何が起きているのかわかりません!!!

1
Zecide

私はこの質問に非常によく似た症状とコンテキストで着陸したので、 この別の質問への回答 が私を助けたと言っておくと便利です。

私の特定のケースでは、 レイジーフィーチャモジュールdocs に多少従い、忠実に複製しようとしました 関連するStackBlitzの例 なんらかの理由で、この例は次のようになります：

loadChildren: 'app/customers/customers.module#CustomersModule'

そして、私のAngular CLI（v6）ベースの実験は同様のフォルダー構造を持っていましたが、私はこれを行う必要がありました：

// Full path including `src` at the start:
loadChildren: 'src/app/customers/customers.module#CustomersModule'

またはこれ：

// Relative path from the `app-routing.module.ts` file:
loadChildren: './customers/customers.module#CustomersModule'

StackBlitzの例が最初のコードの例から抜け出す理由はわかりませんが、他の2つは理にかなっており、ng serve。

13
Jeroen

export default class SomeModule { } ...を他のいくつかのニュアンスとともに使用すると、angular-cliレンダラーに遅延読み込みに関する問題があるようです。

これは私が同じ「エラー：モジュールを見つけることができません...」を解決するためにしたことです。

  • アプリのルートからすべてのloadChildrenパスを取得し、モジュール名のハッシュを含めます
    • loadChildren: 'app/main/some-module/some-module.module#SomeModule'
  • export default class SomeModule { }をexport class SomeModule { }に変更します
5
dustintheweb

私にとっては、モジュールマップNgFactoryローダーを使用する必要がありました。

npm install @nguniversal/module-map-ngfactory-loader --save

サーバーモジュールにmodule-map-ngfactory-loaderを追加します。

import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}
2
Khaled Jamal

また、ファイル「app-routing.module.ts」で次のことに注意してください

const routes：Routes = [{path： 'login'、loadChildren： './ login/login.module＃[〜＃〜] l [〜＃〜] oginModule'}、{path： ' registration '、loadChildren：' ./ registration/registration.module＃[〜＃〜] r [〜＃〜] egistrationModule '}];

上記の太字は大文字にする必要があります

1
Ashish Devade

愚かに聞こえるが、Angular 6。

私はこのコマンドを使用していましたng build --aot --watchアプリケーションの開発中。どういうわけか、ゾーンにアクセスして、多くのファイルを保存しました（他のプロジェクトからコピーペースト）。ビルドは機能しましたが、エラーは表示されませんでしたが、ブラウザーはこのエラーを表示しました。

ビルドを閉じて、再度ビルドしました。表示されていないすべてのエラー（上記とは無関係）が表示されました。

0
Abdul Rehman Sayed

角度CLI：6.1.5ノード：8.11.3 OS：win32 x64角度：6.1.6

0
Vishal