Angular 2 - 未捕获（承诺）：错误：XHR 错误（404 未找到）答案

【问题标题】：Angular 2 - Uncaught (in promise): Error: XHR error (404 Not Found)Angular 2 - 未捕获（承诺）：错误：XHR 错误（404 未找到）
【发布时间】：2016-11-10 05:09:42
【问题描述】：

我的英语很差，对此我深表歉意:)

我在使用 Angular 2 时遇到问题。我会创建一个登录表单，但在调用 Web 服务并获得响应后，我在下面出现此错误。

对于我的应用程序上被阻止和授权的用户，我基于角度教程的 auth-guard.service.ts。

此错误发生在我的路由上的 canLoad 操作之后。

我用的是angular 2最新版本，我的项目是基于webpack的。

我的错误：

core.umd.js?e2a5:3004 EXCEPTION: Uncaught (in promise): Error: XHR error (404 Not Found) loading http://localhost:9090/app/home/home.module
    Error loading http://localhost:9090/app/home/home.module
Error: XHR error (404 Not Found) loading http://localhost:9090/app/home/home.module
    at o (https://code.angularjs.org/tools/system.js:4:12694)
    at XMLHttpRequest.I.s.onreadystatechange (https://code.angularjs.org/tools/system.js:4:13219)
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:698:29)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:265:35)
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:9090/vendor.js:100:2), <anonymous>:6197:41)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:264:40)
    at Zone.runTask (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:154:47)
    at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> (http://localhost:9090/polyfills.js:2195:2), <anonymous>:335:33)

如果你有任何解决方案:)

【问题讨论】：

你已经创建了 home.module.ts 你在 app.module 文件中导入那个模块了吗？
我的主模块是：import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HomeRoutingModule } from './home-routing.module'; import { HomeComponent } from './home.component'; @NgModule({ imports: [ BrowserModule, HomeRoutingModule ], declarations: [ HomeComponent ] }) export class HomeModule { }
和我的 app.module ：import { HomeModule } from './home/home.module'; @NgModule({ imports: [ BrowserModule, AppRoutingModule, AuthRoutingModule, HomeModule ], declarations: [ AppComponent, AuthComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
我已经对实现 Home 组件进行了修改这解决了问题，但我的旧问题又回来了:'(stackoverflow.com/questions/40497167/…
我已经解决了我的问题......在 Webpack 的上下文中使用路由器 loadChidren 你必须在你的 webpack 配置中实现 'angular2-router-loader'，如下所示：loaders: [ { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader','angular2-router-loader'] }, 并使用这个路由器loader 你必须安装它：npm install angular2-router-loader — save-dev 我在这个网站上看到了解决方案：medium.com/@daviddentoom/…

标签： angular xmlhttprequest

【解决方案1】：

我的问题已经解决了……

在Webpack的上下文中使用Router loadChidren：

---> 你必须像这样在你的 webpack 配置中实现 'angular2-router-loader' ：

loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader','angular2-router-loader']
      },
...
],

而且，要使用这个路由器加载器，你必须安装它：

npm install angular2-router-loader -- save-dev

我在这个网站上看到了解决方案：

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.p5wy52jv1

并且，不能在父模块中导入子模块；）

【讨论】：