Enable Angular Universal on existing project

Dear @junior5417

I'm unable to debug this problem. Somewhere in the server code (I think that is server code) there is { sign which is unexpected in this place.

Please try to debug this problem on your own - check if in one of the files which are modified (git status should help you) there's unexpected { char.

Best Regards,

Damian

Hmm, all codes are generated by system or copied from the snippet.

Btw, do i have to modify code below? Since u mentioned it might be due to { char, then i found this part of snippet in the webpack.server.config.js?

module.exports = {
  mode: 'none',
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [/node_modules/, nodeExternals({
    whitelist: [
        /^@agm\/core/,
        /^hammerjs/
      ]
  })],
  output: {
    // Puts the output at the root of the dist folder
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      {
        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
        // Removing this will cause deprecation warnings to appear.
        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
        parser: { system: true },
      },
    ]
  },
  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'),
      {}
    )
  ]
}

ahh i see, since it out-of-the-box it should work without modifying it then.

I've traced where does the error come from, it is come from 3rd party library i've installed. I've remove the package to try execute the command again but then the next library returned error too. Anything I have to configure for package i've installed for my project?

btw, when executing it in AOT with ng serve --prod, all is well.

Edited: I found the the issue is related to package installed in the project. Do you know what is the purpose of the snippet below? Because i tried to add package name into the whitelist and the error is gone and will show next package syntax error.

externals: [/node_modules/, nodeExternals({
    whitelist: [
        /^@agm\/core/,
        /^hammerjs/,
      ]
  })],

Dear @junior5417

This whitelist is an array of libraries which will be added by webpack to your project. Without it, if you're using some external libraries, they may break your application.

So it's recommended to add every external library to whitelist.

Best Regards,

Damian

Oh i see, nice to know that.

At the moment i solved all the errors on the terminal, but the page keeps on loading without showing any content/errors on terminal. What is your advice on how do i proceed to debug this cases?

I see, that you're using spinning preloader. Please try to remove it, and check one more time. I suppose, that this problem may be caused by this component.

Please let me know if am I right.

Best Regards,

Damian

that is actually a Google logo,