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

[asgerjensen]

I can certainly try. I'll have to exfiltrate the setup from my app though.

And, full disclosure, it was made back in rc.0 or 1, so I'm not sure it works with the rc4 router; so maybe don't hold your breath.

Sent from my iPhone

On 24. jul. 2016, at 07.08, Denny Lim notifications@github.com wrote:

+1

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[jinkwon]

+1

[greengerong]

+1

[songbug1024]

+1

[maciejtreder]

+1

[psalkowski]

+1

[rodamora]

+1

[vadjs]

I've found this repository that have starter project with Universal on board. This project is very different with current repository but it probably could help to make working config here.

[malfborger]

+1

[alwayrun]

+1

[asgerjensen]

PR added to showcase how it can be done.
#1165

Note: due to deps from angular/universal, this only seems to work for node version 6 and over.

[katallaxie]

👎 #1165

[fulls1z3]

There's another example repo at https://github.com/nglibs/universal-example-app showcasing both Universal and lean Angular on a single project - using node.js + express.

This application uses platform-server delivered with Angular 4.0.0, and custom implementations of ng-express-engine and transfer-state (both packaged on npm under nglibs scope) until they got officially published on npm.

Furthermore, it covers most of the features of angular2-webpack-starter by AngularClass such as async/lazy routes, SCSS compilation (both inline and external), dev/prod modes, AoT compilation via @ngtools/webpack, tests, TsLint/Codelyzer, @types and maybe more.

I know it's not perfect, might contain issues, and I'm not suggesting that it's a starter/seed project. However, it might help with the use of platform-server. Also hope that angular2-webpack-starter and its community can benefit from at least a small set of its features. Meantime, any help & contributions are welcome :)

[satya-jugran]

I started using this repo for my project but unfortunately I have to leave this project, just because of unavailability of Angular Universal. How can this be missed?

[maciejtreder]

@satya-jugran Check out my boiler plate: https://github.com/maciejtreder/angular-universal-serverless

It includes server side rendering, PWA support (with pushes), can be deployed on Serverless environment (ie AWS Lambda) and much more!

[FabioAntunes]

@satya-jugran you can always do a pull request adding that functionality.