Angular 通用 SSR CRUD 应用程序：NullInjectorError：StaticInjectorError(AppServerModule)[router_RouterOutlet -> ChildrenOutletContexts]：

Question

我正在开发一个 CRUD 应用程序，使用 MongoDB 为 Angular Universal 提供服务器端渲染。我之前用表单和验证做过一些简单的单页 Angular 工作，但这是我第一次使用带数据库的 Angular Universal 应用程序。

以下是我使用的 Angular 版本、软件包等的统计信息。值得注意的是，我使用的是 Macbook，起初在正确安装 Angular 时遇到了很多问题。我使用自制包管理器来让它工作。

Angular CLI: 8.3.26
Node: 12.13.1
OS: darwin x64
Angular: 8.2.14

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.26
@angular-devkit/build-angular              0.803.26
@angular-devkit/build-optimizer            0.803.26
@angular-devkit/build-webpack              0.803.26
@angular-devkit/core                       8.3.26
@angular-devkit/schematics                 8.3.26
@angular/cdk                               8.2.3
@angular/cli                               8.3.26
@angular/material                          8.2.3
@ngtools/webpack                           8.3.26
@nguniversal/express-engine                8.2.6
@nguniversal/module-map-ngfactory-loader   8.2.6
@schematics/angular                        8.3.26
@schematics/update                         0.803.26
rxjs                                       6.4.0
typescript                                 3.5.3
webpack                                    4.39.2

我可以使用 CLI 命令 npm run build:ssr && npm run serve:ssr 让它编译好

当我打开http://localhost:4000/ 时，页面显示如下：

  StaticInjectorError(Platform: core)[router_RouterOutlet -> ChildrenOutletContexts]: 
    NullInjectorError: No provider for ChildrenOutletContexts!
    at NullInjector.get (/Users/dominickdufner/music-app/dist/server/main.js:41980:27)
    at resolveToken (/Users/dominickdufner/music-app/dist/server/main.js:56898:24)
    at tryResolveToken (/Users/dominickdufner/music-app/dist/server/main.js:56824:16)
    at StaticInjector.get (/Users/dominickdufner/music-app/dist/server/main.js:56674:20)
    at resolveToken (/Users/dominickdufner/music-app/dist/server/main.js:56898:24)
    at tryResolveToken (/Users/dominickdufner/music-app/dist/server/main.js:56824:16)
    at StaticInjector.get (/Users/dominickdufner/music-app/dist/server/main.js:56674:20)
    at resolveNgModuleDep (/Users/dominickdufner/music-app/dist/server/main.js:67861:29)
    at NgModuleRef_.get (/Users/dominickdufner/music-app/dist/server/main.js:68927:16)
    at resolveDep (/Users/dominickdufner/music-app/dist/server/main.js:69458:45)
    at createClass (/Users/dominickdufner/music-app/dist/server/main.js:69311:32)
    at createDirectiveInstance (/Users/dominickdufner/music-app/dist/server/main.js:69122:22)
    at createViewNodes (/Users/dominickdufner/music-app/dist/server/main.js:80402:38)
    at callViewAction (/Users/dominickdufner/music-app/dist/server/main.js:80852:13)
    at execComponentViewsAction (/Users/dominickdufner/music-app/dist/server/main.js:80757:13)
    at createViewNodes (/Users/dominickdufner/music-app/dist/server/main.js:80431:5)

我的命令行错误最后也有这个：

  ngTempTokenPath: null,
  ngTokenPath: [ 'router_RouterOutlet', [Function: ChildrenOutletContexts] ]

输出的浏览器控制台给了我这个： “内容安全策略：页面的设置阻止在http://localhost:4000/favicon.ico（“default-src”）加载资源。”

我已经尝试了 @NgModule 导入：[RouterModule.forRoot(routes)] 在我的“app.module.ts”文件中的这篇文章中提到的，但它不起作用。

我可以根据要求添加其他文件信息，或者您可以查看我的 GitHub 存储库： https://github.com/DDufner/Angular-Music-App

不幸的是，由于必须登录才能看到它，所以我无法发布演练信息。如果有任何可能有用的信息，我可以稍后发布。

提前谢谢你。

Answer 1

你缺少路由配置，所以在你的app-routing.module.ts 中这样做

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