加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – XHR错误(404 Not Found)加载http:// localhost:300

发布时间:2020-12-17 07:18:10 所属栏目:安全 来源:网络整理
导读:当我在代码中尝试使用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(anonymous function)
当我在代码中尝试使用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(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','angular2-in-memory-web-api': {
    main: './index.js','@angular2-material/core': {
    main: 'core.js','@angular2-material/button': {
    main: 'button.js','@angular2-material/card': {
    main: 'card.js',defaultExtension: 'js'
    }
    }
    });
    })(this);

一旦我在“app.module.ts”的导入列表中添加MdButtonModule,我就开始收到错误.

更新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

所以您的配置可能如下所示:

(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/material': 'npm:@angular/material/bundles/material.umd.js',<== this line

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

并使用它

import { MaterialModule } from '@angular/material';
@NgModule({
  imports:      [ BrowserModule,MaterialModule ],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: 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

所以你必须改变你的

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读