Question

我在6月开始学习Angular2，当时angular.io快速入门和“英雄之旅”（教程）基于路由器弃用和旧的main.ts-syntax（现在我们有ngModules）。

我在升级这两件事时遇到问题：使用ngModule（app.module.ts）并使用新路由器。

错误：

http://localhost:3000/traceur无法加载资源：服务器响应状态为404（未找到）localhost /：22错误：（SystemJS）XHR错误（404 Not Found）加载 http://localhost:3000/traceur（...）

在index.html中抛出：

System.import('app').catch(function(err){ console.error(err); });

main.ts （OLD，有效）

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object



// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);

main.ts （新功能，无效）

import { AppComponent }   from './app.component';
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { routing, appRoutingProviders } from './app.routing';

// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';


@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent ],
  providers: [
        appRoutingProviders,
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

旧路由（在app.component.ts中）

  @RouteConfig([
  { path: '/unsere-angebote',
    name: 'UnsereAngebote', 
    component: UnsereAngeboteComponent,
    useAsDefault: true
  },
  { path: '/ihre-loesungen',
    name: 'IhreLoesungen',
    component: IhreLoesungenComponent
  },
  ...

新路由（在app.routes.ts中）

import { Routes, RouterModule } from '@angular/router';
...
import { TrainingsComponent } ...
...
import {NewsComponent} from ...


const appRoutes: Routes = [
  ...
  { path: '/news',
    component: NewsComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(appRoutes);

systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

的package.json

{
  "name": "abc-project",
  "version": "0.1.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },

  "dependencies": {
    "@angular/common":                    "2.0.0-rc.5",
    "@angular/compiler":                  "2.0.0-rc.5",
    "@angular/core":                      "2.0.0-rc.5",
    "@angular/http":                      "2.0.0-rc.5",
    "@angular/platform-browser":          "2.0.0-rc.5",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.5",
    "@angular/router":                    "3.0.0-rc.1",
    "@angular/router-deprecated":         "2.0.0-rc.2",
    "@angular/upgrade":                   "2.0.0-rc.5",
    "systemjs": "0.19.36",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.7"
  },

  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings":"^1.3.2"
  }
}

Answer 1

我发现了错误，我遇到了类似的问题：Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"

ts文件开头的注释会杀死应用程序。好吧，至少在评论中输入。疯狂的虫..

我的 main.ts -file看起来像这样：

/*import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object
*/

/*
// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);*/


import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object



// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);

从路由器弃用的2.0.0-rc.2迁移到router@3.0.0-rc.1

1 个答案: