Are there any plans to incorporate Angular Universal?

[louisscruz]

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [X] question about the decisions made in the repository

Are there any plans to incorporate Angular Universal? For me (and I assume for many others), this is a coveted feature. Perhaps there's a way to replace the http-server with this express server setup?

If there is no intent to include Universal, then maybe someone (more knowledgable than myself) could write a wiki on it? I'll be making an attempt in the next few weeks. If I happen to figure it out by then, I'll be happy to write one.

[asgerjensen]

well, I got it working.

Using the universal-starter as an offset, I created a seperate webpack config for the server build. Important notes:

1. Dont use chunks (vendor/polyfills). Build everything as one entry.
2. In tsconfig.json, remove the "noEmitHelpers" entry, or you will get errors like

__declare is undefined.

3. merge the dependencies from universal-starter (package.json and typings.json)
4. Add seperate scripts to the package.json (copy the dev or test targets).

To run, you'd then have two terminals open, one doing "watch" to rebuild, and one running nodemon to run/restart the server

I dont have the expertise to make it one single webpack config.

[0cv]

Would be happy to see that also as I've not been very successful so far to integrate Universal with this starter. Especially, importing "angular2-universal/polyfills" introduces some unexplainable bugs in my project.

[asgerjensen]

My webpack-universal.json, placed in the config directory.

 * @author: @AngularClass
 */

const webpack = require('webpack');
const helpers = require('./helpers');
var path = require('path');

/*
 * Webpack Plugins
 */
// problem with copy-webpack-plugin
var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin);
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;


const ENV = process.env.NODE_ENV = process.env.ENV = 'development';

/*
 * Webpack Constants
 */
const METADATA = {
  ENV: ENV,
  title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
  baseUrl: '/'
};

/*
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = {
  target: 'node',
  externals: helpers.checkNodeImport,
  context: helpers.root(''),
   /*
   * Static metadata for index.html
   *
   * See: (custom attribute)
   */
  metadata: METADATA,

  /*
   * Cache generated modules and chunks to improve performance for multiple incremental builds.
   * This is enabled by default in watch mode.
   * You can pass false to disable it.
   *
   * See: http://webpack.github.io/docs/configuration.html#cache
   * cache: false,
   *
   * The entry point for the bundle
   * Our Angular.js app
   *
   * See: http://webpack.github.io/docs/configuration.html#entry
   */
  entry: {

    //'vendor': './src/vendor.ts',
    //'main': './src/main.browser.ts',
    'main': './src/perpendicular/server/server.ts',
  },

  // Options affecting the resolving of modules.

  //
  // See: http://webpack.github.io/docs/configuration.html#resolve
  resolve: {

    /*
     * An array of extensions that should be used to resolve modules.
     *
     * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
     */
    extensions: ['', '.ts', '.js'],

    // Make sure root is src
    root: helpers.root('src'),

    // remove other default values
    modulesDirectories: ['node_modules'],

    alias: {
      'angular2/core': helpers.root('node_modules/@angular/core/index.js'),
      'angular2/testing': helpers.root('node_modules/@angular/core/testing.js'),
      '@angular/testing': helpers.root('node_modules/@angular/core/testing.js'),
      'angular2/platform/browser': helpers.root('node_modules/@angular/platform-browser/index.js'),
      'angular2/router': helpers.root('node_modules/@angular/router-deprecated/index.js'),
      'angular2/http': helpers.root('node_modules/@angular/http/index.js'),
      'angular2/http/testing': helpers.root('node_modules/@angular/http/testing.js')
    },

  },

  /*
   * Options affecting the normal modules.
   *
   * See: http://webpack.github.io/docs/configuration.html#module
   */
  module: {

   noParse: [
      helpers.root('zone.js', 'dist'),
      helpers.root('angular2', 'bundles')
    ],

    /*
     * An array of applied pre and post loaders.
     *
     * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
     */
    preLoaders: [

      /*
       * Tslint loader support for *.ts files
       *
       * See: https://github.com/wbuchwalter/tslint-loader
       */
      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },

      /*
       * Source map loader support for *.js files
       * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
       *
       * See: https://github.com/webpack/source-map-loader
       */
      {
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: [
          // these packages have problems with their sourcemaps
          helpers.root('node_modules/rxjs'),
          helpers.root('node_modules/contentful'),
          helpers.root('node_modules/@angular2-material'),
          helpers.root('node_modules/@angular'),
        ]
      }

    ],

    /*
     * An array of automatically applied loaders.
     *
     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
     * This means they are not resolved relative to the configuration file.
     *
     * See: http://webpack.github.io/docs/configuration.html#module-loaders
     */
    loaders: [

      /*
       * Typescript loader support for .ts and Angular 2 async routes via .async.ts
       *
       * See: https://github.com/s-panferov/awesome-typescript-loader
       */
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader',
        exclude: [/\.(spec|e2e)\.ts$/]
      },


      /*
       * Json loader support for *.json files.
       *
       * See: https://github.com/webpack/json-loader
       */
      {
        test: /\.json$/,
        loader: 'json-loader'
      },

      /*
       * Raw loader support for *.css files
       * Returns file content as string
       *
       * See: https://github.com/webpack/raw-loader
       */
      {
        test: /\.css$/,
        loader: 'raw-loader'
      },

      /* Raw loader support for *.html
       * Returns file content as string
       *
       * See: https://github.com/webpack/raw-loader
       */
      {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: [helpers.root('src/index.html')]
      },


      // TM customization - SASS / SCSS support
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      },

     ]

  },

  output: {

    /**
     * The output directory as absolute path (required).
     *
     * See: http://webpack.github.io/docs/configuration.html#output-path
     */
    path: helpers.root('dist/'),

    /**
     * Specifies the name of each output file on disk.
     * IMPORTANT: You must not specify an absolute path here!
     *
     * See: http://webpack.github.io/docs/configuration.html#output-filename
     */
    filename: 'server.js',

    /**
     * The filename of the SourceMaps for the JavaScript files.
     * They are inside the output.path directory.
     *
     * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
     */
    sourceMapFilename: 'server.map',

    /** The filename of non-entry chunks as relative path
     * inside the output.path directory.
     *
     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
     */
    chunkFilename: '[id].chunk.js'

  },
  /*
   * Add additional plugins to the compiler.
   *
   * See: http://webpack.github.io/docs/configuration.html#plugins
   */
  plugins: [

    /*
     * Plugin: ForkCheckerPlugin
     * Description: Do type checking in a separate process, so webpack don't need to wait.
     *
     * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
     */
    new ForkCheckerPlugin(),

    /*
     * Plugin: OccurenceOrderPlugin
     * Description: Varies the distribution of the ids to get the smallest id length
     * for often used ids.
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
     * See: https://github.com/webpack/docs/wiki/optimization#minimize
     */
    new webpack.optimize.OccurenceOrderPlugin(true),

    /*
     * Plugin: CommonsChunkPlugin
     * Description: Shares common code between the pages.
     * It identifies common modules and put them into a commons chunk.
     *
     * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
     * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app

    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor'].reverse()
    }),
*/

  ],

  /*
   * Include polyfills or mocks for various node stuff
   * Description: Node configuration
   *
   * Change process:false to process:true to get access at runtime to process.env.foo
   * See: https://webpack.github.io/docs/configuration.html#node
   */
  node: {
    global: true,
    __dirname: true,
    __filename: true,
    process: true, 
    Buffer: true
  }

};

I added the function checkNodeImport to helpers.js

// Helpers
function checkNodeImport(context, request, cb) {
  if (!path.isAbsolute(request) && request.charAt(0) !== '.') {
    cb(null, 'commonjs ' + request); return;
  }
  cb();
}

And removed noEmitHelpers:true from tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": [
    "./node_modules",
    "./typings/main.d.ts",
    "./typings/main",
    "parkedAssets",
    ".git"
  ],
  "filesGlob": [
    "./src/app/**/*.ts",
    "./src/platform/**/*.ts",
    "!./node_modules/**",
    "!./parkedAssets/**/*.ts",
    "./src/custom-typings.d.ts",
    "./typings/index.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": true,
    "forkChecker": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

[0cv]

Thanks, there was indeed a glitch in my webpack config. Now I get a new error "No Directive annotation found on App" ("App" being my top class-component quite similar to this). Not sure whether it's because I'm using the new router (not yet supported by Angular Universal) or anything else.

[joe-lloyd]

I agree this should be a main feature because the project is so awesome its a shame it doesn't ship with it as its a must have these days. I'm going to add the files @asgerjensen pasted above and see if i can get it to work.

[vadimsg]

Any updates on this? This is basically the must have feature in modern javascript web apps. It should be included and configured.

@joeLloyd Hi, did you manage to get it to work?

[joe-lloyd]

@vadimsg I haven't had the chance. I decided to build the whole thing from scratch without this repo until I understand angular2 better. Then I will revisit this repo

[ivanmayes]

+1

[ivanmayes]

Got this running via @asgerjensen script, however the server throws huge memory errors and crashes if you inline your scss files in the components. Why is this so hard? Can't wait for a documented solution.

[mchambaud]

+1

[maciejtreder]

+1 definetely

[maciejtreder]

@asgerjensen Could you place your project on branch? I am trying to marge universal-starter with this project, but I am doing something wrong... :)

[iamdenny]

+1