迁移 RC4 -> RC5 故障排除
migration RC4 -> RC5 troubleshooting
更新所有 npm 模块后出现迁移问题
main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import {AppComponent} from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
@NgModule({
declarations: [
AppComponent,
// PartiesListComponent,
// PartyDetailsComponent,
PartiesFormComponent
],
bootstrap: [AppComponent],
imports: [
BrowserModule,
/* Router*/
RouterModule.forRoot(APP_ROUTER_PROVIDERS),
],
providers: [
APP_ROUTER_PROVIDERS
]
})
export class AppModule { }
app.components.ts
import { Component } from '@angular/core';
import { PartiesListComponent } from './imports/parties/parties-list.component';
import template from './app.component.html';
@Component({
selector: 'app',
template,
directives: [
PartiesListComponent,
]
})
export class AppComponent {}
app.routes.ts:
import { RouterConfig, provideRouter } from '@angular/router';
import { PartiesListComponent } from './imports/parties/parties-list.component';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
const routes: RouterConfig = [
{ path: '', component: PartiesListComponent},
// { path: 'party/:partyId', component: PartyDetailsComponent },
// { path: 'edit/:partyId', component: PartyEditComponent },
{ path: 'new', component: PartiesFormComponent},
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
有:
Invalid route configuration: Array cannot be specified
已解决
解决者
app.routes.ts
的变化
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
....some code.....
const appRoutes: Routes = [
....some code.....
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
但现在有:
browser_adapter.js: 93EXCEPTION:
Error: Uncaught (in promise): TypeError: Cannot read property 'completer' of undefined
如下更改您的 app.routes.ts
:
import { Routes } from '@angular/router';
import { PartiesListComponent } from './imports/parties/parties-list.component';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
export const ROUTES: Routes = [
{ path: '', component: PartiesListComponent},
{ path: 'new', component: PartiesFormComponent},
];
如下更改您的 app.module.ts
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ROUTES } from './app.routes';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
import { PartiesListComponent } from './imports/parties/parties-list.component';
@NgModule({
declarations: [
AppComponent,
PartiesFormComponent,
PartiesListComponent
],
bootstrap: [AppComponent],
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES, {useHash: true}),
]
})
export class AppModule { }
更新所有 npm 模块后出现迁移问题
main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import {AppComponent} from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
@NgModule({
declarations: [
AppComponent,
// PartiesListComponent,
// PartyDetailsComponent,
PartiesFormComponent
],
bootstrap: [AppComponent],
imports: [
BrowserModule,
/* Router*/
RouterModule.forRoot(APP_ROUTER_PROVIDERS),
],
providers: [
APP_ROUTER_PROVIDERS
]
})
export class AppModule { }
app.components.ts
import { Component } from '@angular/core';
import { PartiesListComponent } from './imports/parties/parties-list.component';
import template from './app.component.html';
@Component({
selector: 'app',
template,
directives: [
PartiesListComponent,
]
})
export class AppComponent {}
app.routes.ts:
import { RouterConfig, provideRouter } from '@angular/router';
import { PartiesListComponent } from './imports/parties/parties-list.component'; import { PartiesFormComponent } from './imports/parties/parties-form.component'; const routes: RouterConfig = [ { path: '', component: PartiesListComponent}, // { path: 'party/:partyId', component: PartyDetailsComponent }, // { path: 'edit/:partyId', component: PartyEditComponent }, { path: 'new', component: PartiesFormComponent}, ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ];
有:
Invalid route configuration: Array cannot be specified
已解决
解决者 app.routes.ts
的变化import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
....some code.....
const appRoutes: Routes = [
....some code.....
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
但现在有:
browser_adapter.js: 93EXCEPTION:
Error: Uncaught (in promise): TypeError: Cannot read property 'completer' of undefined
如下更改您的 app.routes.ts
:
import { Routes } from '@angular/router';
import { PartiesListComponent } from './imports/parties/parties-list.component';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
export const ROUTES: Routes = [
{ path: '', component: PartiesListComponent},
{ path: 'new', component: PartiesFormComponent},
];
如下更改您的 app.module.ts
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ROUTES } from './app.routes';
import { PartiesFormComponent } from './imports/parties/parties-form.component';
import { PartiesListComponent } from './imports/parties/parties-list.component';
@NgModule({
declarations: [
AppComponent,
PartiesFormComponent,
PartiesListComponent
],
bootstrap: [AppComponent],
imports: [
BrowserModule,
RouterModule.forRoot(ROUTES, {useHash: true}),
]
})
export class AppModule { }