feat(universal/express): BUG - BuildClientScript generating wrong path ( Also named TrailsJS Isomorphic Example With Angular2)

[maissani]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
• bug report
• feature request
• support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this pull-request
• express-engine
• grunt-prerender
• gulp-prerender
• hapi-engine
• preboot
• universal-preview
• universal
• webpack-prerender
• Do you want to request a feature or report a bug?
  REPORT A BUG
• What is the current behavior?

When launch the application we get
http://localhost:3000/node_modules/@angular/common/common.umd.js
Instead of http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js

In browser i get errors 404 because buildClientsScripts is pointing to @angular/pakagename/packagename.umd.js intead of @angular/packagename/bundle/packagename.umd.js

Following error is generated when accessing localhost:3000

GET http://localhost:3000/node_modules/@angular/core/core.umd.js  404 (Not Found)
localhost/:31 GET http://localhost:3000/node_modules/@angular/common/common.umd.js  404 (Not Found)
localhost/:32 GET http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js  404 (Not Found)
localhost/:33 GET http://localhost:3000/node_modules/@angular/platform-browser/platform-browser.umd.js  404 (Not Found)
localhost/:34 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js  404 (Not Found)
localhost/:35 GET http://localhost:3000/node_modules/@angular/router-deprecated/router-deprecated.umd.js  404 (Not Found)
localhost/:36 GET http://localhost:3000/node_modules/@angular/http/http.umd.js  404 (Not Found)
localhost/:30 GET http://localhost:3000/node_modules/@angular/core/core.umd.js  404 (Not Found)
localhost/:31 GET http://localhost:3000/node_modules/@angular/common/common.umd.js  404 (Not Found)
localhost/:32 GET http://localhost:3000/node_modules/@angular/compiler/compiler.umd.js  404 (Not Found)
localhost/:33 GET http://localhost:3000/node_modules/@angular/platform-browser/platform-browser.umd.js  404 (Not Found)
localhost/:34 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js  404 (Not Found)
localhost/:35 GET http://localhost:3000/node_modules/@angular/router-deprecated/router-deprecated.umd.js  404 (Not Found) <- do know why deprecated router still there but this is a minor issue

On `/api/Controller/viewController.js you will see the systemjs configuration:

'use strict'

const Controller = require('trails-controller')

const ng2 = require('@angular/core')
const ng2U = require('angular2-universal')
ng2.enableProdMode()

const PACKAGES = {
  'angular2-universal/polyfills': {
    format: 'cjs',
    main: 'dist/polyfills',
    defaultExtension: 'js'
  },
  'angular2-universal': {
    format: 'cjs',
    main: 'dist/browser/index',
    defaultExtension: 'js'
  },
  '@angular/router': {
    format: 'cjs',
    main: 'index.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

const materialPkgs = [
  'core',
  'button',
  'card',
]

var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
]

ngPackageNames.forEach((pkg) => {
  PACKAGES[`@angular/${pkg}`] = {
    format: 'cjs',
    main: `bundles/${pkg}.umd.js`, 
    defaultExtension: 'js' 
  }
})

materialPkgs.forEach((pkg) => {
  PACKAGES[`@angular2-material/${pkg}`] = {
    format: 'cjs',
    main: `${pkg}.js`
  }
})

console.log(PACKAGES);

module.exports = class ViewController extends Controller {
  init() {
    if(!this.madebyhostApp) {
      this.madebyhostApp = require('../../dist/app/madebyhost/app')
    }
  }

  madebyhost(req, res) {
    this.init()
    const madebyhostApp = this.madebyhostApp
    let queryParams = ng2U.queryParamsToBoolean(req.query)
    let options = Object.assign(queryParams , {
      // client url for systemjs
      buildClientScripts: true,
      systemjs: {
        componentUrl: 'madebyhost/browser',
        map: {
          'angular2-universal': 'node_modules/angular2-universal',
          '@angular': 'node_modules/@angular',
          'rxjs': 'node_modules/rxjs', 
          '@angular2-material' : 'node_modules/@angular2-material'
        },
        packages: PACKAGES
      },
      directives: [madebyhostApp.MadebyhostApp],
      platformProviders: [
        ng2.provide(ng2U.ORIGIN_URL, {useValue: 'http://localhost:3000'}),
        ng2.provide(ng2U.BASE_URL, {useValue: '/'}),
      ],
      providers: [
        ng2.provide(ng2U.REQUEST_URL, {useValue: req.originalUrl}),
        ng2U.NODE_LOCATION_PROVIDERS
      ].concat(ng2U.NODE_HTTP_PROVIDERS, ng2U.NODE_ROUTER_PROVIDERS),
      data: {},
      async: queryParams.async !== false,
      preboot: queryParams.preboot === false ? null : {debug: true, uglify: false}
    })

    res.render('madebyhost/index', options)
  }
}

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

The repository is there:

https://github.com/maissani/trails-angular2-isomorphic

You will need to install trails

npm install -g yo generator-trails

Then install requiered packages

npm install

And Launch the application

node server.js

go to http://localhost:3000

• What is the expected behavior?

The expected behavior is that buildClientScript generate the good patern for all bundles making Angular2 Isomorphic Example With Trails working.

• What is the motivation / use case for changing the behavior?
• Please tell us about your environment:
• Angular version: 2.0.0-beta.X
• Browser: [all ]
• Language: [TypeScript| ES6]
• OS: [all ]
• Platform: [NodeJs]
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[jaumard]

I reproduce same behaviour with the repo examples https://github.com/angular/universal/tree/master/examples and npm i && npm start

[scott-wyatt]

I can also reproduce this
https://github.com/angular/universal/tree/master/examples and npm i && npm start

[PatrickJS]

don't use BuildClientScript it's going to be removed

[manekinekko]

@jaumard @scott-wyatt could you guys try again the example repo?

[PatrickJS]

I updated express-engine to 0.15.1 that fixes this but BuildClientScript will be removed so don't use it

[jaumard]

npm i fail to find module @angular/router when install it ask the same for common....

[jaumard]

> node dist/index.js

Trace: { [Error: Cannot find module '@angular/common'] code: 'MODULE_NOT_FOUND' }
    at Object.<anonymous> (/Users/jaumard/Downloads/universal-master/examples/dist/index.js:28:17)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:148:18)
    at node.js:405:3

[jaumard]

Ok after fixing all dependencies problem examples are working great ! Thanks !

Step I do to make it work :

//Download repo as zip && cd repo
npm i 
npm i @angular/router
npm i @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6
npm i zone.js@^0.6.6
npm start

[jaumard]

@gdi2290 examples still using buildClientScripts what should we use instead ?

[scott-wyatt]

This is super now. Also wondering the same thing that @jaumard mentioned, the alt to buildClientScripts

[PatrickJS]

you would manually include the scripts in index.html or generate them yourself the same way. the script generation was not meant to be used outside of the repo

[maissani]

@gdi2290 I ll update my repo and move it to FriendsOfTrails, I ll grant you access the repo if you wanted at anytime made some changes.
I ll remove buildClientScripts mention, and use something like grunt, gulp or webpack to build them every time we start the server.
Your help was welcome.

I made some test and then ask you to close it.
It should be cool to have with angular-cli a command that review what is deprecated and how to fix the deprecated use.

Best Regards.

[jaumard]

@gdi2290 even when I remove the buildClientScripts: true I have this message DEPRECATION WARNING:buildClientScriptsis no longer supported and will be removed in next release.
Is this normal ?

[PatrickJS]

@jaumard that is fixed if you remove universal and install it again