web-dev-qa-db-fra.com

Erreur d'obtention angular-universal: vous devez passer un NgModule ou un NgModuleFactory pour pouvoir démarrer

J'ai converti mon application existante angular-cli en angular-universal en suivant ce guide .

Vous pouvez regarder mon code source complet ici .

Je suis capable de construire des projets à la fois navigateur et client, mais j'obtiens l'erreur suivante lorsque je visualise l'application dans le navigateur:

Erreur: Vous devez passer un NgModule ou un NgModuleFactory pour être amarré à View.engine (D:\ng-ssr-demo\dist\server.js: 359545: 23)

Le problème se trouve dans mon fichier server.ts où AppServerModuleNgFactory est indéfini et, cette fabrique étant utilisée pour amorcer l'application dans le back-office express, l'amorçage échoue.

./server.ts:

const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Fix for window error:
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.resolve('./', 'dist', 'browser/', 'index.html')).toString();
const win = domino.createWindow(template);

// workaround for leaflet
global['window'] = win;
global['document'] = win.document;

// workaround for nex-charts
win.screen = { deviceXDPI: 0, logicalXDPI: 0 };
global['MouseEvent'] = win.MouseEvent;
global['navigator'] = mock.getNavigator();


// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// AppServerModuleNgFactory is undefined
console.log('AppServerModuleNgFactory', AppServerModuleNgFactory);

// This is injected
console.log('LAZY_MODULE_MAP', LAZY_MODULE_MAP);

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

./webpack.server.config.js:

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
    prerender: './prerender.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [/node_modules/],
  output: { path: path.join(__dirname, 'dist'), filename: '[name].js' },
  module: { rules: [{ test: /\.ts$/, loader: 'ts-loader'}] },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'), {}
    )
  ]
}

./src/tsconfig.server.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "baseUrl": "./",
    "types": ["node"],
    "typeRoots": ["../node_modules/@types"],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@nebular/*": [
        "../node_modules/@nebular/*"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule",
    "platform": 1
  }
}

./src/main.server.ts:

export { AppServerModule } from './app/app.server.module';

./src/app/app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({appId: 'my-app'}),
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,

    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
    environment.production ? ServiceWorkerModule.register('./ngsw-worker.js') : [],
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }, WebWorkerService,
  ],
})
export class AppModule {
}

./src/app/app.server.module.ts:

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}
javascriptangularangular-cliangular5angular-universal
18
Saurabh Palatkar

J'ai jeté un œil à votre dépôt et j'ai pu visualiser la dist sans que cette erreur se produise dans le navigateur. Peut-être avez-vous oublié d'ajouter le drapeau -prod lors de l'exécution de la construction? S'il vous plaît essayez ceci

ng build --prod

Vous pouvez également supprimer complètement la distribution et/ou supprimer node_modules, faites npm cache clean, exécutez npm install avant de tenter de générer à nouveau.

Si vous utilisez des scripts npm, je remarque que l'indicateur --prod manque dans votre version de serveur. S'il vous plaît essayez ceci

"build:server": "ng build --prod --app 1 --output-hashing=false",
8
Arielle Nguyen

utiliser mode: 'development', pour webpack.config.js

0
gorniv
    const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

pouvez-vous s'il vous plaît vérifier que 'AppServerModuleNgFactory' existe dans votre main.bundle. Il se peut que ce soit sous d'autres noms. Vérifiez donc uniquement avec "ModuleNgFactory" que NgFactory exporte votre application, remplacez-la simplement par le nom de l'usine.

0
sheravanan