JiT would not work with templateUrl

[sj82516]

Hi,
Thanks for the amazing example code. I have worked for AoT and JiT for days to figure out the correct way.
My components link html by "templateUrl" and strangely AoT mode works as usual , however JiT mode goes wrong and log "cannot find main.html"
Could you tell me how to fix this issue?
Thanks a lot . :)

[IAMtheIAM]

Hi please post your entire component.ts code for review.

[IAMtheIAM]

Also your app.routes.ts

[sj82516]

Here is my account.component.ts

@Component({
    moduleId: module.id,
    selector:'my-account',
    templateUrl:'./account.html',
    styleUrls:['./account.css']
})

Here is my app.routes.ts

export const APP_ROUTES: Routes = [
    { path:'', component: AccountComponent},
    { path:'account', component: AccountComponent},
    { path:'main', loadChildren:"es6-promise?,[name]!./main/console.module#ConsoleModule", canLoad:[UserCanLoadGuard]},
    { path:'**', component: AccountComponent},
];

export const routes = RouterModule.forRoot(APP_ROUTES, { useHash: true});

In AoT works well, in JiT log not found "account.html".
I am the angular2 newbie. Sorry for bothering you.

[sj82516]

My file structure is

-app
   |-- src
          |--components
                 |-- account
                          |-- account.component.ts / account.html / account.css
                 |-- app.routes.ts
                 |-- main.module.ts (root Module)
          |--index.ts / index.aot.js (bootstrap MainModule)
   |--package.json / webpack.config.json...

[sj82516]

I changed your sample code "sub.component.ts" to load templateUrl instead of inline template.
It show the same issue.

@Component({
  selector: "sub-home",
  templateUrl:'./sub.html' //also try 'sub.html'
})
export class SubAppComponent {
}

I change the content to make sure that URL is correct

<h2>Sub ADDpp</h2>
<router-outlet></router-outlet>

Is that bundle problem ?

[IAMtheIAM]

The problem is because it does not understand the relative path unless specially configured to do so. Check your tsconfig.json file, make sure you have "module":"commonjs". If you do, then something is not configured correctly in your web package configuration most likely.

Last resort you can put absolute path from project root to the component template file, that will work for sure. But it's better if you can locate which configuration is incorrect. (either tsconfig.json or webpack config).

If you can't figure it still, post your entire config files for webpack and TypeScript and I will analyze them.

[IAMtheIAM]

You can check my repo files to compare and find what is different. Remember you need two tsconfig.json files, one for JIT and one for AOT.

See my tsconfig.json JIT

See my tsconfig.aot.json

See webpack.common.js