Getting AoT working

[qdouble]

• I'm submitting a ...
• [x ] bug report
• What modules are related to this Issue?
• [x ] universal
• What is the current behavior?
  When trying to use ngc on Universal project, I get the following error:

Error: Unexpected value 'UniversalModule' imported by the module 'AppModule'

at /Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.
js:14126:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_mo
dules/@angular/compiler/bundles/compiler.umd.js:14111:46)
at /Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/compiler/bundles/compiler.umd.
js:12952:58
at Array.forEach (native)
at OfflineCompiler.analyzeModules (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@AnGula
r/compiler/bundles/compiler.umd.js:12951:21)
at CodeGenerator.codegen (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/compile
r-cli/src/codegen.js:105:47)
at codegen (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/compiler-cli/src/main
.js:7:81)
at Object.main (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/tsc-wrapped/src/m
ain.js:30:16)
at Object. (/Users/qdouble/Sites/EXAMPLE_APPS/angular2webpack2-starter/node_modules/@angular/compiler-c
li/src/main.js:14:9)
Compilation failed.

this is the module:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';

import { APP_DECLERATIONS } from './app.declerations';
import { APP_IMPORTS } from './app.imports';
import { APP_PROVIDERS } from './app.providers';

import { AppComponent } from './app.component';
import { routes } from './app.routing.universal';

@NgModule({
  declarations: [
    AppComponent,
    APP_DECLERATIONS
  ],
  imports: [
    APP_IMPORTS,
    RouterModule.forRoot(routes), // Move to APP_IMPORTS if routes are same in all environments
    UniversalModule // NodeModule, NodeHttpModule, and NodeJsonpModule are included
  ],
  bootstrap: [AppComponent],
  providers: [APP_PROVIDERS]
})
export class AppModule { }

• Angular version: 2.0.0-final
• Language: [TypeScript 2.0.2 ]
• OS: [Mac OS X ]

[PatrickJS]

do you have the repo on github?

[qdouble]

@gdi2290 I just added Universal to my starter repo here: https://github.com/qdouble/angular2webpack2-starter . You can use npm run compile:universal if you want to see the error I'm talking about or just use ./node_modules/.bin/ngc -p tsconfig.aot.universal.json. If you need me to make a more stripped down repo to show the problem, let me know.

[andresantos123]

@gdi2290 I have the same problem trying to use the ngc with universal: "Error: Unexpected value 'UniversalModule' imported by the module 'AppModule'"

[steve8708]

did some looking into this and found for AOT support universal needs to be transpiled with ngc instead of tsc to generate *.metadata.json files for the NodeModule and UniversalModule and their dependencies

created this WIP PR that I verified AOT does compile the UniversalModule with those updates

needs some cleanup and small updates still but have verified it is working 👍

[steve8708]

@qdouble I've been linking to my local universal from your starter to verify things are working. The error you report above is gone with the updates in my PR, but now ngc doesn't like that AppComponent is loaded into two modules (doesn't seem to account for transipiling multiple modules for multiple platforms at once), but that should be workaroundable by running two ngc processes (one on each platform app module) concurrently to compile instead of one to do both modules. Will take a stab at that next and send you a PR with the end to end working if time permits

[qdouble]

@steve8708 okay cool... probably have to use two tsconfigs with one ignoring the server config and the other ignoring the client?

[steve8708]

yeah exactly, or @qdouble what are your thoughts on generating the tsconfig files in a gitignored folder like dist and then running ngc against the generated files? that would avoid excess duplication at least

I'll test with hard coding two tsconfigs for not but may be nice to generate the file variations in the future if so many are needed

[steve8708]

actually, it looks like there is a better solution now

aot support for webpack exists via a loader and a plugin published under the @ngtools namespace from the angular-cli repo

usage by the CLI is here

I'll take a look at this and see how it compares to pregenerating ngfactory code

big thanks to @devCrossNet for pointing this out

[qdouble]

@steve8708 yeah, I tried to play with it a bit earlier. The developer Rob says that it will still be a couple of days before it's ready for public use, just an fyi if you can't get it to work right now.

[steve8708]

ah, good to know, thanks @qdouble!

[andresantos123]

@steve8708 I tried to use your solution, but it still ask for UniversalModule. There is something that I'm missing?

[steve8708]

@andresantos123 what exactly did you try?

My PR is still currently open so the only way to try it out right now would be to checkout my branch locally, do a build, link your local universal modules to the project that depends on universal using npm link, and replace import { /* ... */ } from 'angular2-universal' to import { /* ... */ } from 'angular2-universal/browser' and import { /* ... */ } from 'angular2-universal/node' when needed for the browser and server, respectively

[andresantos123]

@steve8708 Great, thanks! I pointed to your commit from npm but didnt replace the imports. I will try that.

[andresantos123]

@steve8708 Just tried change the imports, but now it give this error:
Error: Unexpected value 'NodeModule' exported by the module 'UniversalModule'