XHR錯誤（404 Not Found）加載http：// localhost：3000/traceur

我在嘗試在代碼中使用Angular Material時遇到以下錯誤。XHR錯誤（404 Not Found）加載http：// localhost：3000/traceur

 

    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

下面是代碼：
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);

只要我在「app.module.ts」的導入列表中添加MdButtonModule，就開始出現錯誤。

來源

2016-09-12 Shashank Sachan

你的'package.json'看起來像什麼？ – yurzui

更新2.0.0 alpha.9鈷海妖（2016年9月26日）

角材料已經從@ angular2材料/ ...包到單包下@角/材料

那麼你的配置可能類似於：

(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材料阿爾法8開始，你需要使用以下配置：

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

參見changelog的

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

所有：我們已經更新了包裝，以匹配角/角度的包裝。如果您使用在您的項目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' 
    }, 
    ...

來源

2016-09-13 05:01:14 yurzui

這解決了這個問題。謝謝:) –

@Shashank：如果它解決了您的問題，請將其標記爲選定的答案。 –

XHR錯誤（404 Not Found）加載http：// localhost：3000/traceur

回答

相關問題