我正在将一个大的 angular.js 应用程序(使用 ui-router)一点一点地迁移到 angular,我选择使用 angular.js 应用程序作为基础,一次迁移一个不同的路由,这样一旦我'完成我立即将所有内容切换为 Angular 。
这些是我遵循的步骤:
在我的 main.ts 文件中引导 angular.js 应用程序:
export function bootstrapAngular(extra: StaticProvider[]): any {
setAngularJSGlobal(angular);
if (environment.production) {
enableProdMode();
}
return platformBrowserDynamic(extra)
.bootstrapModule(AppModule)
.catch(err => console.log(err));
}
const downgraded = angular
.module('downgraded', [downgradeModule(bootstrapAngular)])
.directive('appRoot', downgradeComponent({ component: RootComponent, propagateDigest: false }))
;
angular.bootstrap(document, ['app', downgraded.name]);
在我的 index.html 里面
<app id="app"></app>
这工作正常。
在我的主要 angular.js 组件中,我添加了降级的主要 Angular 组件的标签:
<div class="app__view" id="appContent">
<ui-view></ui-view>
<app-root></app-root>
</div>
这就是我的主模块的配置方式
const COMPONENTS = [
TestComponent,
RootComponent,
];
@NgModule({
declarations: COMPONENTS,
imports: [
BrowserModule,
NxModule.forRoot(),
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
useHash: true
})
],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' }
],
entryComponents: COMPONENTS,
exports: COMPONENTS
})
export class AppModule {
ngDoBootstrap(): void { }
}
到目前为止一切正常。我可以在 angular.js 应用程序中看到我的 angular 组件。
当我添加到我的主根组件时,问题就来了
即使路由匹配,我也可以看到路由器 socket 渲染,但旁边没有任何内容。
export const routes: Route[] = [
{ path: 'dashboard', component: TestComponent }
];
当我将浏览器指向/#/dashboard 时,这是我看到的路由器跟踪:
并且测试组件只是不渲染。
我需要一些帮助,想不出其他可以尝试的方法。
最佳答案
首先:如果你想混合并开始将 ng1 的部分移动到 ngx,你需要像你一样从 ngx 引导你的 ng1 应用程序,但不是通过降级:
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
(<any>platformRef.instance).upgrade.bootstrap(document.body, ['nameOfNg1App']);
});
你应该在 app.component.html 中提供 ui-router 的入口点:
<div ui-view></div>
您还需要提供一个 url 处理策略来告诉 angular,要处理哪些路由。我有一个 AppRoutingModule,它是由 AppModule 导入的。这个提供了处理程序:
@NgModule({
imports : [
RouterModule.forRoot(routes, {useHash: true})
],
exports : [
RouterModule
],
// provide custom UrlHandlingStrategy to separate AngularJs from Angular routes
providers: [
{
provide : UrlHandlingStrategy,
useClass: Ng1Ng2UrlHandlingStrategy
}
]
})
export class AppRoutingModule {
}
以及处理策略,我使用路径前缀将 ng1 与 ngx 路由分开,但如果需要,您可以选择更简单的分隔:
import { UrlHandlingStrategy } from '@angular/router';
export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
private ng1Urls: string[];
constructor() {
this.ng1Urls = [
'prefix1',
];
}
shouldProcessUrl(url) {
url = url.toString();
return this.ng1Urls.findIndex(ng1Url => new RegExp(`^\/${ng1Url}([|\?|\/](.*)){0,1}$`).test(url)) === -1;
}
extract(url) {
return url;
}
merge(url, whole) {
return url;
}
}
哦,由于某些原因,我不得不坚持
#
URL,同时运行混合。通过此设置,您将启动一个 ngx 应用程序,该应用程序具有一个运行 ui-router 的容器。然后,您可以在您的 ng1 应用程序中使用降级的 ngx 组件和服务。
要让 ngx-routes 和 ng1 路由并行,您的 (ngx) app.component.html 包括
<div ui-view></div>
<router-outlet></router-outlet>
您可以在此处找到此策略的更多详细信息:https://blog.nrwl.io/upgrading-angular-applications-upgrade-shell-4d4f4a7e7f7b
关于angularjs - @angular/router 在 angular.js 应用程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52199096/