Angular2 AoT - module.id is not detected when installing module.id in a component

Question

I ran into a problem with Angular2 AoT and any help would be great for me since I'm stuck.

I have a simple hello world application that has main.js, home.module.ts, home.component.ts, home.component.html and home.service.ts. This code works well using Angular2 without AoT.

After doing AoT and Rollup exactly in accordance with the angular.io steps in the cookbook, I get an error: "Uncaught ReferenceError: module is not defined", and I do not know why this is happening.

My Home.Component.ts is marked as follows:

@Component({
    selector: 'rf-home',
    moduleId: module.id,   // i m setting this module.id so that I can use relative template paths in my code. Helps in Dev env.
    templateUrl: 'Home.component.html',
    providers: [HomeService]
})

Someone out there, please help!

Answer 1

: 22 2016 .

Angular 2.1 AOT (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) .

<script>window.module = 'aot';</script>

index.html aot.

TL;DR

, , , , , .

• : rollup-module.provider.ts

  export function RollupModuleProvider(params: any) {
      return function (target: any) {
          // Setup the 'module' variable globally. The rollup javascript has its own module system, but there is still a
          // reference to the Commonjs module.id in the code, so setup a module object to allow that code to execute
          // without throwing an exception
          try {
              // In dev mode with commonjs the following line will execute without a problem
              // In AoT mode with rollup the following line will trigger an exception that will be
              // caught and handled to allow the AoT build to run without issue
              let testIfRunningWithCommonJSandModuleIsAvailable = module.id;
          } catch (e) {
              // Declare Module for rollup based production builds.
              // When running dev builds CommonJS automatically provides the module definition
              console.log("Defining Module");
              var globalScope: any;
              if (typeof window === 'undefined') {
                  globalScope = global;
              }
              else {
                  globalScope = window;
              }
              globalScope.module = "test";
              try {
                  let moduleShouldBeAvailable = module;
              }
              catch (e) {
                  // Our attempt to register module failed so we are not in an unrecoverable error state.
                  console.error("Module not defined");
              }
          }
      }
  }
  

• app.component.ts . , app.component.ts , "bootstrap" app.module.ts.

  import {RollupModuleProvider} from "./rollup-module.provider";
  
  @RollupModuleProvider({})
  

app.component.ts . . . "" html "templateUrl", html . , app.component.ts, /.

    import { Component } from '@angular/core';

    import './rxjs-operators';
    import {ModalService} from "./shared/modal.service";
    import {RollupModuleProvider} from "./rollup-module.provider";

    @RollupModuleProvider({})
    @Component({
        selector: 'myapp',
        /* For only the top level component inline the template which simplifies the build process. By in-lining the
         * template we don't need to setup the "module: module.id" on the Component decorator. We use the RollupModuleProvider
         * to setup the module variable when running in a ngc/rollup build. In a dev build the CommonJs module system is used
         * so module.id is available. In a ngc/rollup build the module does not need to be set on the component so it can be
         * set to a valid value and then is essentially ignored.
         */
        template:
            `<div [class.modalDisplayed]="modalService.isModalDisplayed()"></div>
                <nav-header></nav-header>
                <div class="container-fluid">
                <router-outlet> </router-outlet>
            </div>`
    })

    export class AppComponent {
        constructor (public modalService: ModalService) {
        }
    }

app.module.ts.

    import {NgModule}      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule } from '@angular/http';

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

    import { Logger } from './logger.service';
    import { HttpClient } from './http.client.service';
    import {WindowSize} from './window-size.service';
    import {ModalService} from "./shared/modal.service";
    import {SharedModule} from "./shared/shared.module";

    @NgModule({
        imports: [BrowserModule, HttpModule, routing, SharedModule],
        declarations: [AppComponent],
        providers: [ Logger, HttpClient, WindowSize, ModalService ],
        bootstrap: [ AppComponent ]
    })

    export class AppModule { }

moduleId , tsc commonjs . AoT moduleId. UncaughtReferenceError AoT, "", ( JavaScript). commonjs , .

AoT , , AoT. , , , .

- Angular 2, .

Answer 2

:

• moduleId: module.id

• templateUrl: 'Home.component.html' : ( ' !. /Home.component.html.html')

  @Component ({
     : "rf-home",
    template: require ('to-string!./Home.component.html.html'),
    : [HomeService]
  })