XHR 错误 (404 Not Found) 加载 http://localhost:3000/traceur

Posted 2023-02-22

【中文标题】XHR 错误 (404 Not Found) 加载 http://localhost:3000/traceur

【英文标题】：XHR error (404 Not Found) loading http://localhost:3000/traceur

【发布时间】：2017-01-20 10:43:05

【问题描述】：

当我尝试在代码中使用 Angular Material 时出现以下错误。

zone.js:101 GET http://localhost:3000/traceur 404（未找到）[e-mail]:[e-mail]:[e-mail]:282（匿名函数）@zone。 js:122send@VM437:[e-mail]:1156(匿名函数)@system.src.js:[e-mail]:607(匿名函数)@system.src.js:1738(匿名函数)@ system.src.js:2764(匿名函数)@system.src.js:3338(匿名函数)@system.src.js:3605(匿名函数)@system.src.js:3990(匿名函数)@system.src.js:3990(匿名函数) src.js:4453(匿名函数)@system.src.js:4705(匿名函数)@system.src.js:[e-mail]:[e-mail]:225(匿名函数)@ zone.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:437 登录：15 错误：错误：XHR 错误（404 未找到）正在加载 http://localhost:3000/traceur 在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38) 在 Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48) 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34) 加载 http://localhost:3000/traceur 时出错 从 http://localhost:3000/app/assets/js/app.module 将 http://localhost:3000/node_modules/@angular2-material/button/button.js 加载为“@angular2-material/button”时出错。 js(匿名函数)@login:[e-mail]:[e-mail]:225(匿名函数)@zone.js:[e-mail]:[e-mail]: [e-mail]:[e-mail]:437

以下是代码：app.component.ts：

从'@angular/core'导入组件，ViewEncapsulation； 从'@angular2-material/button'导入 MdButton ； @零件（ 选择器：'myApp', templateUrl: './app/app.html', styleUrls: ['./app/app.css'], 封装：ViewEncapsulation.None ) 导出类 AppComponent

app.module.ts：

从'@angular/core'导入 NgModule ； 从“@angular/platform-b​​rowser”导入 BrowserModule ； 从“@angular/forms”导入 FormsModule ； 从“@angular/http”导入 HttpModule ； 从'@angular2-material/button'导入 MdButtonModule ； 从'./app.routing'导入路由，appRoutingProviders； 从'./app.component'导入AppComponent； 从'./login/login.module'导入LoginModule； 从'./home/home.module'导入 HomeModule ； 从'./items/items.module'导入ItemsModule； 从'./movies/movies.module'导入MoviesModule； @NgModule( 导入：[ BrowserModule，FormsModule，HttpModule，MdButtonModule，路由，LoginModule，HomeModule，ItemsModule，MoviesModule ]， 声明：[ AppComponent ]， 提供者：[appRoutingProviders]， 引导程序：[ AppComponent ]， ) 导出类 AppModule

app.routing.ts：

从'@angular/core'导入 ModuleWithProviders ； 从'@angular/router'导入路由，RouterModule； 常量 appRoutes: 路由 = []; 导出 const appRoutingProviders: any[] = []; 导出常量路由：ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts:

从'@angular/platform-b​​rowser-dynamic'导入platformBrowserDynamic； 从'./app.module'导入AppModule； 常量平台 = 平台浏览器动态（）； platform.bootstrapModule(AppModule);

system.config.js：

/** * Angular 2 示例的系统配置 * 根据您的应用需求进行调整。 */ （函数（全局） 系统配置（ 路径： // 路径作为别名 'npm:': 'node_modules/' , // map 告诉系统加载器在哪里寻找东西 地图： // 我们的应用在 app 文件夹中 应用程序：'应用程序'， // 角度束 '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-b​​rowser': 'npm:@angular/platform-b​​rowser/bundles/platform-b​​rowser.umd.js', '@angular/platform-b​​rowser-dynamic': 'npm:@angular/platform-b​​rowser-dynamic/bundles/platform-b​​rowser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular2-material': 'npm:@angular2-material', // 其他库 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', , // packages 告诉系统加载器在没有文件名和/或扩展名时如何加载 包： 应用程序： 主要：'./main.js', 默认扩展：'js' , rxjs： 主要：'main.js'， 默认扩展：'js' , 'angular2-in-memory-web-api': 主要：'./index.js', 默认扩展：'js' , '@angular2-material/core': 主要：'core.js'， 默认扩展：'js' , '@angular2-材料/按钮'： 主要：'button.js'， 默认扩展：'js' , '@angular2-material/card': 主要：'card.js'， 默认扩展：'js' ); ）（这）;

只要我在“app.module.ts”的导入列表中添加MdButtonModule，我就会开始收到错误。

【问题讨论】：

你的package.json是什么样的？

【参考方案1】：

更新 2.0.0-alpha.9 钴海妖 (2016-09-26)

Angular Material 已从 @angular2-material/... 包更改为 @angular/material 下的单个包

所以你的配置可能看起来像：

(function (global) 
  System.config(
    paths: 
      // paths serve as alias
      'npm:': 'node_modules/'
    ,
    // map tells the System loader where to look for things
    map: 
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      '@angular/material': 'npm:@angular/material/bundles/material.umd.js', <== this line

       ...
    ,
    ...
  );
)(this);

并像使用它一样

import  MaterialModule  from '@angular/material';
@NgModule(
  imports:      [ BrowserModule, MaterialModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
)
export class AppModule  

旧版本

从angular2-material alpha 8开始你需要使用如下配置：

materialPackages.forEach(name => 
  packages[`@angular2-material/$name`] = 
    format: 'cjs',
    main: `$name.umd.js`
  ;
);

另见更新日志

https://github.com/angular/material2/blob/master/CHANGELOG.md

all：我们更新了包装以匹配 angular/angular 的包装。 如果您在项目中使用 SystemJS，您可能想要 切换到使用我们的 UMD 包

所以你必须改变你的

system.config.js

packages: 
  ...
  '@angular2-material/core': 
    format: 'cjs',
    main: 'core.umd.js'
  ,     
  '@angular2-material/button': 
    format: 'cjs',
    main: 'button.umd.js'
  ,      
  '@angular2-material/card': 
    format: 'cjs',
    main: 'card.umd.js'
  ,
  ...