<p dir="auto">[x ] bug report =&gt; search github for a similar issue or PR before submitting<br>
[ ] feature request<br>
[ ] support request =&gt; Please do not submit support request here, instead see <a href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question">https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="I have separated my application into `js` directory where all my generated `.js` files are
 and an `app` directory where I keep my `.ts`, `.html` and `.css` files together.

For the AoT compilation I use the `tsconfig.aot.json`

    {
      &quot;compilerOptions&quot;: {
        &quot;target&quot;: &quot;es2015&quot;,
        &quot;module&quot;: &quot;es2015&quot;,
        &quot;moduleResolution&quot;: &quot;node&quot;,
        &quot;declaration&quot;: false,
        &quot;removeComments&quot;: true,
        &quot;noLib&quot;: false,
        &quot;emitDecoratorMetadata&quot;: true,
        &quot;experimentalDecorators&quot;: true,
        &quot;lib&quot;: [&quot;es6&quot;, &quot;es2015&quot;, &quot;dom&quot;],
        &quot;sourceMap&quot;: true,
        &quot;pretty&quot;: true,
        &quot;allowUnreachableCode&quot;: false,
        &quot;allowUnusedLabels&quot;: false,
        &quot;noImplicitAny&quot;: true,
        &quot;noImplicitReturns&quot;: true,
        &quot;noImplicitUseStrict&quot;: false,
        &quot;noFallthroughCasesInSwitch&quot;: true,
        &quot;outDir&quot;: &quot;js&quot;,
        &quot;typeRoots&quot;: [
          &quot;./node_modules/@types&quot;,
          &quot;./node_modules&quot;
        ],
        &quot;types&quot;: [
        ]
      },
      &quot;files&quot;: [
        &quot;app/main.ts&quot;
      ],
      &quot;exclude&quot;: [
        &quot;node_modules&quot;,
        &quot;js&quot;,
        &quot;app&quot;
      ],
      &quot;compileOnSave&quot;: false
    }


and the script: `&quot;ngc&quot;: &quot;ngc -p tsconfig.aot.json &amp;&amp; npm run copy \&quot;app/*\&quot; \&quot;compiled\&quot; &quot;`



Because I have seprated my app into `js` and `app` folders I have to use it like this: 


     @Component({
         moduleId: module.id.replace(&quot;/js/&quot;, &quot;/app/&quot;),
         selector: 'escl-mainbar',
         templateUrl: './mainbar.component.html'
     })
    export class MainbarComponent {

But when I try to run the script it gives me this error:


    &gt; angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
    &gt; ngc -p tsconfig.aot.json &amp;&amp; npm run copy &quot;app/*&quot; &quot;compiled&quot;
    
    Error encountered resolving symbol values statically. Calling function 'module', function calls are not supported. 
Consider replacing the function or lambda with a reference to an exported function,
 resolving symbol MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts, resolving symbol
     MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts


I tried with using:

 export function moduleId() {
     return module.id.replace(&quot;/js/&quot;, &quot;/app/&quot;);
 }

 @Component({
     moduleId: moduleId(),
     selector: 'escl-mainbar',
     templateUrl: './mainbar.component.html'
 })
export class MainbarComponent { }


but that still gives me  Error encountered resolving symbol values statically....


I'm using `@angular/comiler-clie` and the other stuff of version 2.4.6 and typescript version is 2.1.5.

Any idea where, the problem is or if it is really a bug."><pre class="notranslate"><code class="notranslate">I have separated my application into `js` directory where all my generated `.js` files are
 and an `app` directory where I keep my `.ts`, `.html` and `.css` files together.

For the AoT compilation I use the `tsconfig.aot.json`

    {
      "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es6", "es2015", "dom"],
        "sourceMap": true,
        "pretty": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitUseStrict": false,
        "noFallthroughCasesInSwitch": true,
        "outDir": "js",
        "typeRoots": [
          "./node_modules/@types",
          "./node_modules"
        ],
        "types": [
        ]
      },
      "files": [
        "app/main.ts"
      ],
      "exclude": [
        "node_modules",
        "js",
        "app"
      ],
      "compileOnSave": false
    }


and the script: `"ngc": "ngc -p tsconfig.aot.json &amp;&amp; npm run copy \"app/*\" \"compiled\" "`



Because I have seprated my app into `js` and `app` folders I have to use it like this: 


     @Component({
         moduleId: module.id.replace("/js/", "/app/"),
         selector: 'escl-mainbar',
         templateUrl: './mainbar.component.html'
     })
    export class MainbarComponent {

But when I try to run the script it gives me this error:


    &gt; angular-quickstart@1.0.0 ngc C:\dev_escal\project\escal\ui\src\main\webapp
    &gt; ngc -p tsconfig.aot.json &amp;&amp; npm run copy "app/*" "compiled"
    
    Error encountered resolving symbol values statically. Calling function 'module', function calls are not supported. 
Consider replacing the function or lambda with a reference to an exported function,
 resolving symbol MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts, resolving symbol
     MainbarComponent in C:/dev_escal/project/escal/ui/src/main/webapp/app/mainbar/mainbar.component.ts


I tried with using:

 export function moduleId() {
     return module.id.replace("/js/", "/app/");
 }

 @Component({
     moduleId: moduleId(),
     selector: 'escl-mainbar',
     templateUrl: './mainbar.component.html'
 })
export class MainbarComponent { }


but that still gives me  Error encountered resolving symbol values statically....


I'm using `@angular/comiler-clie` and the other stuff of version 2.4.6 and typescript version is 2.1.5.

Any idea where, the problem is or if it is really a bug.
</code></pre></div>
<p dir="auto">JIT path use relative to wwwroot but AoT use relative path</p>
<p dir="auto">for JIT: templateUrl:'app/app.html'<br>
for AoT: templateUrl:'app.html'</p>
<p dir="auto">this bothers me everytime I change from or to AoT compile</p>