Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NullInjectorError: No provider for p! #1

Open
haleyDesignhouse opened this issue Jun 16, 2020 · 0 comments
Open

NullInjectorError: No provider for p! #1

haleyDesignhouse opened this issue Jun 16, 2020 · 0 comments

Comments

@haleyDesignhouse
Copy link

I have followed the guidelines of setting this up to a T. I'm not sure what is means by AppBrowserModule since I only have an AppModule and a AppServerModule. But when running npm run dev:ssr, I get the following error:

NullInjectorError: R3InjectorError(AppServerModule)[InjectionToken AuthServiceInterface -> CookieService -> p -> p -> p]: NullInjectorError: No provider for p!

Here is my following code:

// Other imports
import { BrowserCookiesModule } from 'ngx-deepsnowneel-universal-cookies/browser';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserCookiesModule.forRoot({
      path: '/',
      domain: environment.rootDomain,
    }),
    AppRoutingModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my app.module.ts file.

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { environment } from '@environment';
import { ServerCookiesModule } from 'ngx-deepsnowneel-universal-cookies/server';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerCookiesModule.forRoot({
      path: '/',
      domain: environment.rootDomain,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

This is my app.server.module.ts file.

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import * as cookieParser from 'cookie-parser';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import { environment } from '@environment';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/ideal-sale-circular/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  server.use(cookieParser(environment.secretKey));

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

This is my server.ts file. Again, not sure how to use the LAZY_MODULE_MAP since that doesn't work in Angular 9 anymore.

Then last, but not least, my file that is injecting the cookies service.

import { CookiesService } from 'ngx-deepsnowneel-universal-cookies';

@Injectable({
  providedIn: 'root'
})
export class CookieService {

  constructor(private cookies: CookiesService) { }

}

This is just a cookies service that my app interacts to get, remove, etc. It's basically a wrapper for any cookie package I was planning on using.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant