Question

我正在跟踪一个有关如何从此处创建一些父子项目的示例：https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

我的结构基本相同：

-projects
  -child
    -src
      -app
        -app.component.ts
        -app.module.ts
        ...
      -assets
      ...
-src
  -app
    -app,component.ts
    -app.module.ts
    ...
  -assets
  ...
-angular.json
-package.json
...

我按照说明进行操作，并为子app.module使用forRoot函数创建了一个共享模块，如下所示：

const routes: Routes = [
    {
        path: 'main',
        component: MainComponent
    },
    {
        path: 'child',
        loadChildren: '../../projects/child/src/app/app.module#ChildSharedModule'
    },
    {
        path: '**',
        redirectTo: '/main'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        ChildSharedModule.forRoot()
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

到目前为止，路由器工作正常。现在，我想添加一项服务，该服务将在父级项目和将存在的所有可能的子项目中使用。为此，我尝试在父项目（src/app/shared/shared.module.ts）下创建一个共享模块：

@NgModule({
    imports: [
    ],
    providers: [
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [
                SharedService
            ]
        }
    }
}

注意，我在forRoot下的providers部分中添加了SharedService。之后，我将SharedModule.forRoot（）添加到父级的app.module.ts中：

@NgModule({
    declarations: [
        AppComponent,
        MainComponent
    ],
    imports: [
        SharedModule.forRoot(),
        AppRoutingModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

并且还将SharedModule添加到孩子的app.module.ts：

@NgModule({
    declarations: [
        AppComponent,
        ChildComponent
    ],
    imports: [
        SharedModule,
        AppRoutingModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({})
export class ChildSharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: AppModule,
            providers: [
            ]
        }
    }
}

我尝试在子项目的组件中使用SharedService，但没有编译问题，但是在启动父应用程序时遇到了这个问题：

compiler.js:1016 Uncaught Error: Can't resolve all parameters for ChildComponent: (?).
    at syntaxError (compiler.js:1016)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10429)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:11013)
    at compiler.js:11004
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentsFromProvider (compiler.js:11003)
    at compiler.js:10976
    at Array.forEach (<anonymous>)

我也尝试跳过SharedModule的创建，并在SharedService中添加了provideIn: 'root'，但得到的结果相同。关于如何实现这一目标的任何线索？

Angular父子项目-提供者

0 个答案: