XHR 错误 (404 Not Found) 加载 http://localhost:3000/traceur [英] XHR error (404 Not Found) loading http://localhost:3000/traceur

查看：60
本文介绍了XHR 错误 (404 Not Found) 加载 http://localhost:3000/traceur的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<预>zone.js:101 GET http://localhost:3000/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(匿名函数) @ zone.js:122send @VM437:3fetchTextFromURL @system.src.js:1156(匿名函数)@system.src.js:1739ZoneAwarePromise@zone.js:607(匿名函数)@system.src.js:1738(匿名函数)@system.src.js:2764(匿名函数)@system.src.js:3338(匿名函数)@system.src.js:3605(匿名函数)@system.src.js:3990(匿名函数)@system.src.js:4453(匿名函数)@system.src.js:4705(匿名函数)@system.src.js:408ZoneDelegate.invoke@zone.js:332Zone.run@zone.js:225(匿名函数)@zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js: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:15ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(匿名函数) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437

代码如下:
app.component.ts:

<预>从@angular/core"导入 { Component, 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 };import { LoginModule } from './login/login.module';从 './home/home.module' 导入 { HomeModule };从'./items/items.module'导入{ItemsModule}；从'./movies/movies.module'导入{电影模块}；@NgModule({进口:[ BrowserModule, FormsModule, HttpModule, MdButtonModule, 路由, LoginModule, HomeModule, ItemsModule, MoviesModule ],声明:[ AppComponent ]，提供者:[ appRoutingProviders ]，引导程序:[ AppComponent ]，})导出类 AppModule {}

app.routing.ts:

<预>从'@angular/core' 导入 { ModuleWithProviders };从'@angular/router' 导入 { Routes, RouterModule };const appRoutes: 路由 = [];导出 const appRoutingProviders: any[] = [];导出常量路由: ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts:

<预>从@angular/platform-b​​rowser-dynamic"导入{platformBrowserDynamic}；从 './app.module' 导入 { AppModule };const 平台 = platformBrowserDynamic();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',},//包告诉系统加载器在没有文件名和/或没有扩展名时如何加载包:{应用程序: {主要:'./main.js'，默认扩展:'js'},rxjs:{主要:'main.js'，默认扩展:'js'},'angular2-in-memory-web-api':{主要:'./index.js'，默认扩展:'js'},'@angular2-材料/核心':{主要:'core.js'，默认扩展:'js'},'@angular2-材料/按钮':{主要:'button.js'，默认扩展:'js'},'@angular2-材料/卡片':{主要:'card.js'，默认扩展:'js'}}});})(这个);

在app.module.ts"的导入列表中添加 MdButtonModule 后，我开始收到错误消息.

解决方案

更新 2.0.0-alpha.9 Cobalt-kraken (2016-09-26)

<块引用>

Angular Material 已从 @angular2-material/... 包更改为@angular/material

下的单个包

因此您的配置可能如下所示:

(函数(全局){系统配置({路径:{//路径作为别名'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','@angular/material': 'npm:@angular/material/bundles/material.umd.js', <== 这一行...},...});})(这个);

并像使用它一样

import { MaterialModule } from '@angular/material';@NgModule({进口:[ BrowserModule, MaterialModule ],声明:[ AppComponent ]，引导程序:[ AppComponent ]})导出类 AppModule { }

旧版本

从 angular2-material alpha 8 开始，您需要使用以下配置:

materialPackages.forEach(name => {包[`@angular2-material/${name}`] = {格式:'cjs',主要:`${name}.umd.js`};});

另见变更日志

<块引用>

all:我们已经更新了我们的包装以匹配 angular/angular 的包装.如果你在你的项目中使用 SystemJS，你可能想要改用我们的 UMD 捆绑包

所以你必须改变你的

system.config.js

包:{...'@angular2-材料/核心':{格式:'cjs',主要:'core.umd.js'},'@angular2-材料/按钮':{格式:'cjs',主要:'button.umd.js'},'@angular2-材料/卡片':{格式:'cjs',主要:'card.umd.js'},...

I'm getting following error when I'm trying to use Angular Material in the code.


    zone.js:101 GET http://localhost:3000/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(anonymous function) @ zone.js:122send @ VM437:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
    login:15 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34)
    Error loading http://localhost:3000/traceur
    Error loading http://localhost:3000/node_modules/@angular2-material/button/button.js as "@angular2-material/button" from http://localhost:3000/app/assets/js/app.module.js(anonymous function) @ login:15ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437

Below is the code:
app.component.ts:


    import { Component, ViewEncapsulation } from '@angular/core';
    import { MdButton } from '@angular2-material/button';
    @Component({
    selector: 'myApp',
    templateUrl: './app/app.html',
    styleUrls: ['./app/app.css'],
    encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
    }

app.module.ts:


    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';
    import { HttpModule }    from '@angular/http';
    import { MdButtonModule } from '@angular2-material/button';
    import { routing, appRoutingProviders } from './app.routing';
    import { AppComponent } from './app.component';
    import { LoginModule } from './login/login.module';
    import { HomeModule } from './home/home.module';
    import { ItemsModule } from './items/items.module';
    import { MoviesModule } from './movies/movies.module';
    @NgModule({
    imports: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, routing, LoginModule, HomeModule, ItemsModule, MoviesModule ],
    declarations: [ AppComponent ],
    providers: [ appRoutingProviders ],
    bootstrap: [ AppComponent ],
    })
    export class AppModule {}

app.routing.ts:


    import { ModuleWithProviders } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    const appRoutes: Routes = [];
    export const appRoutingProviders: any[] = [];
    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

main.ts:


    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);

system.config.js:


    /**
    * System configuration for Angular 2 samples
    * Adjust as necessary for your application needs.
    */
    (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',
    '@angular2-material': 'npm:@angular2-material',
    // other libraries
    'rxjs':                       'npm:rxjs',
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
    app: {
    main: './main.js',
    defaultExtension: 'js'
    },
    rxjs: {
    main: 'main.js',
    defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
    },
    '@angular2-material/core': {
    main: 'core.js',
    defaultExtension: 'js'
    },     
    '@angular2-material/button': {
    main: 'button.js',
    defaultExtension: 'js'
    },      
    '@angular2-material/card': {
    main: 'card.js',
    defaultExtension: 'js'
    }
    }
    });
    })(this);

As soon as I add MdButtonModule in imports list of "app.module.ts", I start getting the error.

解决方案

Update 2.0.0-alpha.9 cobalt-kraken (2016-09-26)

Angular Material has changed from @angular2-material/... packages to a single package under @angular/material

So your config might look like:

(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);

And use it like 

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

Old version

Starting with angular2-material alpha 8 you need to use the following configuration:

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

See also the changelog

all: we've updated our packaging to match angular/angular's packaging. If you're using SystemJS in your project, you will probably want to switch to using our UMD bundles

So you have to change your

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'
  },
  ...

这篇关于XHR 错误 (404 Not Found) 加载 http://localhost:3000/traceur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆