从不推荐使用的路由器2.0.0-rc.2迁移到router@3.0.0-rc.1 [英] Migrating from router-deprecated 2.0.0-rc.2 to router@3.0.0-rc.1
问题描述
我从6月份开始学习Angular2，当时angular.io快速入门和英雄之旅"(教程)是基于弃用的路由器和旧的main.ts语法(现在有了ngModules).
I started learning Angular2 back in June when the angular.io quickstart and the "tour of heroes" (tutorial) were based on router-deprecated and the old main.ts-syntax (now we have ngModules).
我在升级这两件事时遇到问题:使用ngModule(app.module.ts)和使用新的路由器.
I have problems in upgrading both things: Using ngModule (app.module.ts) and using the new router.
错误:
http://localhost:3000/traceur 无法加载资源:服务器 响应状态为404(未找到)localhost/:22错误: (SystemJS)XHR错误(找不到404)加载 http://localhost:3000/traceur (…)
http://localhost:3000/traceur Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:22 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur(…)
在以下行中丢入index.html:
thrown in index.html in line:
System.import('app').catch(function(err){ console.error(err); });
main.ts (旧的，有效)
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"
}
}
推荐答案
I found the error, I had a similar problem like here: Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not Found)"
ts文件开头的注释将终止该应用程序.好吧，至少在评论中输入.疯狂的虫子.
The comment at the beginning of a ts-file kills the application. well, at least imports in a comment. crazy bug..
我的 main.ts 文件看起来像这样:
my main.ts-file looked like this:
/*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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
