Enable Angular Universal on existing project


Topic: Enable Angular Universal on existing project

junior5417 pro asked 5 years ago

Hi Mdb Team,

I'm trying to enable Angular Universal for my exisiting project and I've follow the instruction on https://mdbootstrap.com/docs/angular/getting-started/angular-universal, and able to follow the steps. But, I'm getting errors when i tried to run command below:

npm run build:ssr && npm run serve:ssr

Stack Trace:

SyntaxError: Unexpected token {
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:646:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)

What is the problem that causes this issue ya?


Damian Gemza staff answered 5 years ago

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


junior5417 pro answered 5 years ago

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'),
      {}
    )
  ]
}

Damian Gemza staff commented 5 years ago

You shouldn't modify this file if you don't have to. If there's some typo or wrong statement, you can fix it. But our Universal Guide was created to give our users out-of-the-box ssr compatibility.


junior5417 pro answered 5 years ago

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/,
      ]
  })],

Damian Gemza staff answered 5 years ago

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


junior5417 pro answered 5 years ago

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?

enter image description here


Damian Gemza staff answered 5 years ago

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


junior5417 pro answered 5 years ago

that is actually a Google logo,

enter image description here


Damian Gemza staff commented 5 years ago

So if this is not a spinning preloader, I have no idea what's wrong. Please try to comment out some components and check, if app works fine.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.4
  • Device: Mac
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes