Question

我打算使用Angular 6将大型AngularJS 1.7.3升级到混合应用程序。我完成了准备阶段，在该阶段中，我必须将所有控制器/指令转换为AngularJS组件。我使用命令行创建了一个新的Angular 6项目骨架：

private void endFinishActivity(bool shouldRestart) {
    Intent returnIntent = new Intent();
    returnIntent.putExtra("restart", shouldRestart);
    setResult(Activity.RESULT_OK,returnIntent);
    finish();
}

我将Angular 6应用程序中的AngularJS旧代码复制粘贴到src / ng1文件夹中。

这是我的app.module.ts的外观，以便从Angular 6引导AngularJS 1.x应用程序：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    // Check which request we're responding to
    if (requestCode == REQUEST_CODE) {
        // Make sure the request was successful
        if (resultCode == RESULT_OK) {

            bool shouldRestart = data.getBooleanExtra("restart");
        }
    }
}

当我提供服务时，没有错误，并且我可以看到Angular 6应用程序重定向到默认的AngularJS路由/ login。这是我的AngularJS路由文件：

#import all the neccessaries packages
import plotly
import plotly.graph_objs as go
#Your code almost without changes
lyrics="Ah, Ba Ba Ba Ba Barbara Ann Ba Ba Ba Ba Barbara Ann Oh Barbara Ann " \
       "Take My Hand Barbara Ann You Got Me Rockin' And A-Rollin' Rockin' " \
       "And A-Reelin' Barbara Ann Ba Ba Ba Barbara Ann ...More Lyrics... " \
       "Ba Ba Ba Ba Barbara Ann Ba Ba Ba Ba Barbara Ann" 
list_of_lyrics = lyrics.split(" ") 
print(len(list_of_lyrics)) 
unique_words = set(list_of_lyrics) 
print(len(unique_words)) 
word_histogram = dict.fromkeys(unique_words, 0) 
for word in list_of_lyrics:
    word_histogram[word] = word_histogram[word]+ 1
print(word_histogram)
# Create trace (needed to do a plot)
trace = go.Bar(x = list(unique_words), y = list(word_histogram.values()))
# Set our trace in list which named data
data = [trace]
# Specify layout if you want to add a titles to your plot
layout = go.Layout(title = "Lyrics frequency",
                   xaxis = dict(title="Words from lyrics list"),
                   yaxis = dict(title="Frequency of each word in the list")
                   )
# Create fig, that contains all what we need to do a plot
fig = go.Figure(data=data, layout=layout)
# Call plotly in offline mode, choose name for plot and save him in directory
# where your Python script is
plotly.offline.plot(fig, filename="Lyrics frequency.html", auto_open=False)

如您所见，我有一条通往/ login的默认路由，并且Angular 6应用知道如何到达。我现在遇到的问题是：

控制台没有错误，但是我有一个空白页，看来AngularJS的组件未正确加载，因此在浏览器上未显示任何内容。我试图用一个简单的模板替换模板：

 ng new hybrid-app

它将正确显示。谁知道为什么Angular 6不会加载我的AngularJS组件，这与UIRouter有关吗？

我现在遇到的错误是：

 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {UpgradeModule} from '@angular/upgrade/static';
 import {AppComponent} from './app.component';

 @NgModule({
   declarations: [
    AppComponent
   ],
 imports: [
  BrowserModule,
  UpgradeModule
 ],
 providers: [],
  // bootstrap: [AppComponent] // No Bootstrap-Component
})
 export class AppModule {
   constructor(private upgrade: UpgradeModule) {
 }

 ngDoBootstrap() {
  this.upgrade.bootstrap(document.body, ['myAngularJsModule'], {strictDi: 
   true});
 }
}

Answer 1

我可能需要看看以下内容：https://github.com/ui-router/angular-hybrid

我将删除旧的angular-ui-router，并用它替换。

Angular 6 Hybrid应用程序不加载AngularJS组件

1 个答案: