AoT lazy loaded chunk includes both template source and compiled template, vendor.js has no compiled template

[aaronleestic]

OS

Mac OSX (El Capitan)

Versions.

Angular 2.4.4 / CLI Beta.24

Repro steps.

Refactored a module, 'FooModule', into another repository, and used ngc to make it into an AoT compatible library

In main application, I npm install'd my library, and imported it for use,
pages/foo/module.ts:

import { FooModule, FOO_CONFIG } from "my-component-library"
@NgModule({ 
  imports: [ FooModule ],
  providers: [ { provide: FOO_CONFIG, useValue: { title: 'hello bar' } } ]
 })
export class WrappedFooModule {}

routes.ts:

... { path: 'foo', loadChildren: 'pages/foo/module#WrappedFooModule' } ...

The log given by the failure.

Examining foo.chunk.js, I can see my entire template source:

template: '<div><h1>Foo component</h1><*ngIf="bar">...</div>'

But I also see the AoT pre-compiled code:

... this.renderer.createText(this._el_6, "Foo component", null)) ... 

This was not the case prior to the refactoring. Prior, the same chunk only had AoT compiled code.

Also, I refactored some components that are not lazy loaded at all. Prior, these eager components were in the main.bundle.js, only as aot-compiled code. After refactoring, these eager components are in vendor.bundle.js (as expected), but only as a template-source.

[hansl]

Yes, we know. This was after a lot of backlash about decorators being removed. We stopped doing that with a task to only remove the annotations.

[aaronleestic]

@hansl thank you for looking into this. For some time I wasn't sure if I did ngc wrong.

For reference, I was using compiler/compiler-cli 2.4.4. This was my tsconfig-aot.json

{
  "compilerOptions": {
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "noImplicitAny": false,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "mapRoot": "",
    "outDir": "./dist",
    "stripInternal": true,
    "skipLibCheck": true,
    "baseUrl": ""
  },
  "paths": {
    "@angular/core": ["node_modules/@angular/core"],
    "@angular/http": ["node_modules/@angular/http"],
    "@angular/forms": ["node_modules/@angular/forms"],
    "@angular/router": ["node_modules/@angular/router"],
    "@angular/common": ["node_modules/@angular/common"],
    "rxjs/*": ["node_modules/rxjs/*"]
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "./vendor.ts",
    "./polyfills.ts"
  ],
  "files": [
    "src/path/to/index.ts",
  ],
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "debug": true
  }
}

Permutations to angularCompilerOptions didn't make any difference.
index.ts is basically export * from "path/to/some/module.ts or file.ts"

[aaronleestic]

@hansl I see #4301 is in beta.28. I've upgraded from beta.24 to beta.32, angular 2.4.4 to 2.4.8.

Still seeing the duplicate code in the chunks. Also, I see only HTML template in vendor.js. Not AoT as a search for 'createRenderElement' / other pre-compiled codes turns up blank.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}