(0.6.1) path problem

[nick1247]

0.6.1 version doesn't recognize some of my relative paths.

This component

@Component({
	selector: 'home',
	templateUrl: 'home.component.html'
})
export class HomeComponent ...

builds to

HomeComponent = __decorate([
    core_1.Component({
        selector: 'home',
        templateUrl: 'home.component.html'
    }),
    __metadata("design:paramtypes", [router_1.ActivatedRoute])
], HomeComponent);

Looks like loader doesn't recognize templateUrl path.

When I roll back to 0.6.0 it works fine.

[dellax]

same problem

[nick1247]

This should fix it. @dellax as temporary workaround you can add the comma symbol after templateUrl

[tonimitrevski]

same problem

[nick1247]

@tonimitrevski do u have the same problem with teplateUrl ended with comma symbol?

@Component({
	selector: 'home',
	templateUrl: 'home.component.html', // <<--
})
export class HomeComponent ...

[tonimitrevski]

yup , but i try withcomma and it's fixed, but i have 100 component's that is the problem for now :)

[jeka5555]

because of you, I spent the whole day, until I realized that this is a bug after upgrading to 0.6.1

[TheLarkInn]

Hey sorry about this folks. I'll take a look at this and fix right away.

[TheLarkInn]

I don't have time to publish this just yet as I have to run, but I will be happy to do so tonight or tomorrow.

[TheLarkInn]

Going to leave open until I publish fix. Thanks for your patience everyone.

[mohannad-abwah]

@TheLarkInn Have you had a chance to publish the fix yet?

[TheLarkInn]

Closing as this is now published, thank you so much for being patient. Also looking for maintainers willing to help.

[FabianGosebrink]

Works again, thank you. Would be glad to help! Sent you an email but no response. How can I get in contact with you best?

[scoleman81]

I think there still may be a issue here. I am really new to angular 2 and web pack. Working on my first project. I built from scratch using Full framework and the spa template as an example. Using version 0.6.2 in both and the core(standard 1.0) works fine like everyone else says. the Core(full .net) gives the same error as before. I was able to get the core(full) to work by going to 0.6.0 and adding the require statements as talked about above. I don't really understand how these two could be different since all of this should not be dependent on the framework but I can't figure it out.

[GiuseppePiscopo]

Hi everyone,
it seems to me I'm getting into the same issue. Put my hands back on a project that I left for a couple of weeks, and now got this new errors.

Building and bundling goes fine, but then at runtime in dev console I see a couple of wrong HTML requests:

GET http://localhost:51254/templates/default/color-picker.component.html 404 (Not Found) GET http://localhost:51254/component.html 404 (Not Found)

with their accompanying Failed to load ... error messages. It seems like all of a sudden relative templateUrl are not respected anymore. Originally those are:

// some component file
templateUrl: './templates/default/color-picker.component.html',

// another component file
templateUrl: './component.html',

and, by chance (for our code convetion), there's already a trailing comma. I also tried swapping single quotes for double quotes.

I tried with angular2-template-loader 0.6.0 and 0.6.2, with no luck. Other dependencies:

• @angular/*** 2.4.8
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Side note, in case might be related:
before this runtime problem, I incurred into a new build time error, apparently due to an issue with awesome-typescript-loader, which required upgrading that dependency.

EDIT bundled JS code still shows templateUrl: "./templates/default/color-picker.component.html", while I guess it should have transformed that into some template: require(...), if I recall correctly

[nikolasleblanc]

@GiuseppePiscopo, do any of your other templateUrls have this issue, or is it specific to these two templateUrls, or do you only have two components? It would be good if you could post the full @Component metadata for each of these two cases.

Also, just because why not, have you tried without the ./ at the beginning of the templateUrl?

[GiuseppePiscopo]

No. All templateUrls instances show up untouched in generated main-bundle.js. I have a couple of components with template, they of course are left with their string content. Then some components from node_modules dependencies show template with string content, but again those do not matter here.

Same happens for styleUrls. Here's one of the many and similar component metadata, which worked until now:

@Component({
  selector: '[sideBar]',
  templateUrl: './component.html',
  styleUrls: ['./component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SideBarComponent {
  // ...
}

found in some my\project\path\src\private\view\side-bar\ subdirectory, containing component.[css|html|ts]

Tried also with templateUrl: 'component.html', or templateUrl: 'templates/default/color-picker.component.html', for another component: no change.

EDIT Webpack configuration has not changed since switching from 2.1.0-beta.25 to 2.2.1. For typescript in JIT build is:

    test: /\.ts$/,
    use: [
      'awesome-typescript-loader',
      'angular2-template-loader',
      'angular-router-loader',
    ],
    include: [
      paths.clientSrc,
    ],
    exclude: [
      paths.nodeModules, // skip all node modules
      paths.buildOutput, // skip output
      paths.codegen, // skip (AOT) generated code
      /\.(spec|e2e|async)\.ts$/, // skip all test and async TS files
    ],

[GiuseppePiscopo]

Oh well ... more findings: production AOT build goes fine and show no errors in console. Its (multiple) chunks generated out of custom code show all my templateUrl ~turned into template + content~ still as templateUrl + relative path.

AOT build has typescript loaders changed to:

  typescript: {
    test: /\.ts$/,
    use: [
      'awesome-typescript-loader?silent=true',
      'angular2-template-loader',
      'angular-router-loader?aot=true&debug=false&genDir=./codegen',
    ],
    include: [
      paths.clientSrc,
      paths.codegen, // include (AOT) generated code
    ],
    exclude: [
      paths.nodeModules, // skip all node modules
      paths.buildOutput, // skip output
      /\.(spec|e2e|async)\.ts$/, // skip all test and async TS files
    ],
  },

Development JIT build instead has only a main bundle for our custom code (beside vendor bundle, that is). But this main bundle only has components common to whole app, and their templateUrl is untouched. Furthermore, there are no component from other "lazy loaded" modules. It's like if angular-router-loader had no effect at all in JIT build.

By peeking at other sample projects, JIT bundle should instead show something like template: __webpack_require__(/*! ./hero-detail.component.html */ 633),, right?

[GiuseppePiscopo]

I temporarily added logs to node_modules\angular2-template-loader\index.js, and replacement between original source and newSource does work:

• Original: templateUrl: './not-found.component.html',
• Replaced: template: require('./not-found.component.html'),

But indeed when I look at whole bundled JS, I find:

NotFoundComponent = tslib_1.__decorate([
    core_1.Component({
        selector: 'not-found',
        templateUrl: './not-found.component.html',
        styles: ["\n    .container {\n      margin-top: 40px;\n    }\n  "],
    }),
    tslib_1.__metadata("design:paramtypes", [router_1.Router])
], NotFoundComponent);

as if loader output is somehow ignored.

[nikolasleblanc]

Are you using the latest versions of angular2-template-loader and awesome-typescript-loader? If not, you may need the config settings that were removed in this commit: https://github.com/TheLarkInn/angular2-template-loader/commit/beb5b95b7c8e9e6085ee1b663c63e3548ec52897#diff-04c6e90faac2675aa89e2176d2eec7d8L65

[GiuseppePiscopo]

Thanks for suggestion @nikolasleblanc . Project is using current latest versions:

+-- [email protected] +-- [email protected] +-- [email protected]

I missed that change in awesome-typescript-loader settings, hence this project still kept "useWebpackText": true in its tsconfig.json files. I tried just now deleting that bit, leaving an empty "awesomeTypescriptLoaderOptions": {}, but nothing changed.

One more finding, which I think is moving the culprit somewhere else, is the following: I temporarily turned on debugging in angular-router-loader, and at least from its output one can say that replacement does happen:

[angular-router-loader]: Original: loadChildren: '../private/module#PrivateModule'
[angular-router-loader]: Replacement: loadChildren: () => new Promise(function (resolve) { (require as any).ensure([], function (require: any) { resolve(require('..\private\module')['PrivateModule']); })

while in main-bundle.js I still find loadChildren: '../private/module#PrivateModule',. So, again, it looks like those two loaders output is not fed into awesome-typescript-loader, or anyway does not make it to the final bundling phase.

[GiuseppePiscopo]

One step more: temporarily added console logs to node_modules\awesome-typescript-loader\dist\index.js (original TS here), dumping text and resultText within transform function. Result seems quite strange to me:

Input text (excerpt):

// ...
@Component({                                                 
  selector: 'not-found',                                     
  template: require('./not-found.component.html'),           
  styles: [`                                                 
    .container {                                             
      margin-top: 40px;                                      
    }                                                        
  `],                                                        
})                                                           
export class NotFoundComponent implements OnInit {
// ...

Output text (excerpt):

// ...
NotFoundComponent = tslib_1.__decorate([
    core_1.Component({
        selector: 'not-found',
        templateUrl: './not-found.component.html',
        styles: ["\n    .container {\n      margin-top: 40px;\n    }\n  "],
    }),
    tslib_1.__metadata("design:paramtypes", [router_1.Router])
], NotFoundComponent);
// ...

?? why decorate shows back initial, original templateUrl instead of template + require, or something else? Might that be related to using tslib helpers instead of webpack TS helpers? EDIT Answer: nope, even skipping tslib helpers, same thing, with __decorate in place of tslib_1.__decorate.

[GiuseppePiscopo]

@nikolasleblanc still interested in some kind of repro?

[nikolasleblanc]

Sure if you've got one handy. Sorry, got swamped.

[GiuseppePiscopo]

No need for excuse. Sure, I'll send you something by email.

[habibialkaff]

Hi @GiuseppePiscopo, did you manage to sort out the issue? I'm having the same problem, 2 of my components template are reset back to "templateUrl". The regex matching is not the issue. Like you said, it seems that the result of this loader is not fed into the at-loader

My current workaround is to swap angular2-template-loader and awesome-typescript-loader

[GiuseppePiscopo]

Hi there. At that time, I found some alternative workarounds:

1. Move project to another path. Yes, definitely absurd, but I had the issue come and go when changing path. In detail, the original path was longer, but nothing exaggerated. And had no blanks in it.

2. Similar to previous, create a symlink at a different path. This worked, but for some reason it breaks AOT build

3. As you found, switch to another TS loader

Now, more recently, I'm running the build not from standalone command prompt, but from VS Code integrated terminal and for some reason I got no error, with project still being at original path. I also upgraded angular and webpack in meantime, but I'm not sure that matters. HTH

[GiuseppePiscopo]

Sorry, item 3: what I described is not the same switch as you described

[reiday]

I encountered what might be the same problem; I found out the problem was that I had a bunch of compiled .js files lying around from running tsc manually. Deleting them resolved the issue, so what was probably happening was webpack was picking those up, rather than the ones output by the loaders. Lesson learned, hopefully this helps someone else.

[bohms27]

I had the issue with the comma missing, but only when there was a comment on the next line.

templateUrl: "foo.html" works fine but ...

templateUrl: "foo.html" // Test comment Expects a comma after it.

[nombrekeff]

Hi, Any news on this? Im having the same issue here. My absolute path tempaltes are not beeing replaced by require(...) in the bundle.

[nombrekeff]

Could not fix it. I just changed to relative paths... wich is not ideal for big projects as the one I just fixed... It had over 60 components. Any news on this would be apreciated. Cheers!