Lazy loading error when trying to AoT output code to es6

[MaklaCof]

I am trying to merge my application with latest aspnetcore-angular2-universal after a few months.
Is lazy loading module supported in latest release?
I get error at runtime in code:

path: 'team-support', canActivate: [AuthGuard], loadChildren: './modules/team-support/team-support.module#TeamSupportModule',

which is transpile to:

path: 'team-support', canActivate: [AuthGuard], loadChildren: () => new Promise(function (resolve) {  (require as any).ensure([], function (require: any) {    resolve(require('.\\modules\\team-support\\team-support.module')['TeamSupportModule']);  });}),

And the error happens here:

function getParentCtor(ctor) {
    var /** @type {?} */ parentProto = Object.getPrototypeOf(ctor.prototype);
    var /** @type {?} */ parentCtor = parentProto ? parentProto.constructor : null;
    // Note: We always use `Object` as the null value
    // to simplify checking later on.
    return parentCtor || Object;
}

With error:

vendor.js?version=5.0.0:6587 Uncaught TypeError: Cannot convert undefined or null to object
at Function.getPrototypeOf ()
at getParentCtor (vendor.js?version=5.0.0:6587)
at ReflectionCapabilities.annotations (vendor.js?version=5.0.0:6439)
at JitReflector.annotations (vendor.js?version=5.0.0:72024)
at DirectiveResolver.resolve (vendor.js?version=5.0.0:58942)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (vendor.js?version=5.0.0:59777)
at CompileMetadataResolver._getEntryComponentMetadata (vendor.js?version=5.0.0:60501)
at vendor.js?version=5.0.0:60487
at Array.forEach ()
at CompileMetadataResolver._getEntryComponentsFromProvider (vendor.js?version=5.0.0:60486)

[MarkPieszak]

Lazy loading works by default yes, I just removed the webpack folder (since it's no longer being used), maybe that was causing some issues?

 { path: 'lazy', loadChildren: './containers/lazy/lazy.module#LazyModule'},

[MaklaCof]

@MarkPieszak
Can you try switching module to es6 instead of es5 in tsconfig.json and confirm it is not working and you get same error.
I just tried this on clear installation of aspnetcore-angular2-universal and it is not working.
Thanks.

[MarkPieszak]

So this is because yes, unfrotunately right now you can't output es6 code during AoT.
You can follow the original Core issue here: angular/angular#15127

[swaner]

I am having the same issue with es5, no lazy loading files being created when compiling AOT:
webpack --progress --env.prod

Trying to learn this but shouldn't the AOTPlugin point to tsconfig.spec.json file, or how does the compiler know what typescript configuration file to use?

new AotPlugin({
tsConfigPath: './ClientApp/tsconfig.spec.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})

[MarkPieszak]

Each one simply points to the browser or server NgModule, and ignores the other files (browser or server boot files).

           new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })

            new AotPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
                exclude: ['./**/*.browser.ts']
            })

The spec tsconfig is for unit tests (.spec files).

As for Lazy routing not being initialized during server renders it's most likely that you need the additional Router options we have in the template. initialNavigation gets it to lazy load it immediately, as you need it right away during server renders.

        RouterModule.forRoot([
            /* all the routes */
        ], {
          // Router options
          useHash: false,
          preloadingStrategy: PreloadAllModules, // <---
          initialNavigation: 'enabled' // <--- especially this one
        })

Hope that helps!

[swaner]

Thanks Mark, but my issue is when publishing the latest version of aspnetcore-angular2-universal.
No chunks are being created and an error occurs:
ERROR in Cannot read property 'getSourceFile' of undefined
Child ClientApp\app\app.component.scss:

This is the full output:
node node_modules/webpack/bin/webpack.js --env.prod
EXEC(0,0): Warning : Can't resolve all parameters for SignalR in C:/dev/tutorials/aspnetcore-angular2-universal/node_modules/ng2-signalr/src/services/signalr.d.ts: ([object Object], [object Object], ?). This will become an error in Angular v5.x
EXEC(0,0): Warning : Can't resolve all parameters for SignalR in C:/dev/tutorials/aspnetcore-angular2-universal/node_modules/ng2-signalr/src/services/signalr.d.ts: ([object Object], [object Object], ?). This will become an error in Angular v5.x
EXEC(0,0): Warning : Can't resolve all parameters for SignalR in C:/dev/tutorials/aspnetcore-angular2-universal/node_modules/ng2-signalr/src/services/signalr.d.ts: ([object Object], [object Object], ?). This will become an error in Angular v5.x
EXEC(0,0): Warning : Can't resolve all parameters for SignalR in C:/dev/tutorials/aspnetcore-angular2-universal/node_modules/ng2-signalr/src/services/signalr.d.ts: ([object Object], [object Object], ?). This will become an error in Angular v5.x
Hash: 2134139875e51d0ff26474f7f8649864e419081b
Version: webpack 2.3.2
Child
Hash: 2134139875e51d0ff264
Time: 19115ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
main-client.js 303 kB 0 [emitted] [big] main-client

ERROR in Cannot read property 'getSourceFile' of undefined

ERROR in ./ClientApp/boot.browser.ts

Module not found(0,0): Error : Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in 'C:\dev\tutorials\aspnetcore-angular2-universal\ClientApp'
@ ./ClientApp/boot.browser.ts 4:0-95
Child ClientApp\app\app.component.scss:
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
Child
Hash: 74f7f8649864e419081b
Time: 19106ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
main-server.js 2.37 MB 0 [emitted] [big] main-server

ERROR in Cannot read property 'getSourceFile' of undefined
Child ClientApp\app\app.component.scss:
                                     Asset     Size  Chunks             Chunk Names
      f4769f9bdb7466be65088239c12046d1.eot  20.1 kB          [emitted]  
      e18bbf611f2a2e43afc071aa2f4e1512.ttf  45.4 kB          [emitted]  
     fa2772327f55d8198301fdb8bcfc8158.woff  23.4 kB          [emitted]  
    448c34a56d699c29117adc64c43affeb.woff2    18 kB          [emitted]  
      89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]  

C:\dev\tutorials\aspnetcore-angular2-universal\Asp2017.csproj(44,5): Error MSB3073: The command "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 2.

[MarkPieszak]

Are you on Windows 10 by any chance? @swaner
This looks like a patch-fix I had in previously, but removed (it seems ngtools had fixed it in 1.3.1)

What version of ngtools/webpack do you have in the project?
(angular/angular-cli#6063

[swaner]

Yes, Windows 10 Enterprise indeed.

I am using the latest version from git, no changes.
From my package.json:
"@ngtools/webpack": "^1.3.0".

I tried the workaround, got a different error. Will investigate further later:
ERROR in Couldn't resolve original symbol for ./src/render/animation_driver from C:/dev/tutorials/aspnetcore-angular2-universal/node_modules/@angular/animations/browser/index.
d.ts

ERROR in ./ClientApp/boot.browser.ts
Module not found: Error: Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in 'C:\dev\tutorials\aspnetcore-angular2-universal\ClientApp'
 @ ./ClientApp/boot.browser.ts 4:0-95

[MarkPieszak]

Did you try this workaround in your webpack config?
angular/angular-cli#5329 (comment)

Windows 10 is really finicky and has quite a few problems when it comes to command line stuff :(

[swaner]

Yes it got solved, to be honest not quite sure why. I removed the whole folder, cloned into another folder and it just worked.

It even created the lazy loading module (this was my original issue).

In my own project, I needed to add the angular2-router-loader with the aot option set to true.
(https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#aot-default-false)
How come you don't need the router-loader in aspnetcore-angular2-universal?

{ test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] : ['@ngtools/webpack', 'angular2-router-loader?aot=true'] },

[isaacrlevin]

@swaner So you are saying you can get lazy loading to work without angular-router-loader? Is it defined globally maybe?