(0.6.1) path problem #50

nick1247 · 2017-02-06T08:39:38Z

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.

The text was updated successfully, but these errors were encountered:

dellax · 2017-02-06T09:12:48Z

same problem

nick1247 · 2017-02-06T10:22:30Z

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

tonimitrevski · 2017-02-06T10:46:53Z

same problem

nick1247 · 2017-02-06T10:58:43Z

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

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

tonimitrevski · 2017-02-06T11:07:13Z

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

jeka5555 · 2017-02-06T14:44:19Z

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

TheLarkInn · 2017-02-07T00:02:06Z

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

TheLarkInn · 2017-02-07T00:04:02Z

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 · 2017-02-07T00:04:20Z

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

mohannad-abwah · 2017-02-07T20:18:03Z

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

TheLarkInn · 2017-02-08T16:27:25Z

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

FabianGosebrink · 2017-02-09T17:28:27Z

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 · 2017-02-23T04:23:28Z

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 · 2017-03-21T18:24:53Z

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:

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 · 2017-03-21T19:17:24Z

@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 · 2017-03-22T00:04:00Z

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 · 2017-03-22T01:07:29Z

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 · 2017-03-22T11:58:02Z

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 · 2017-03-22T14:21:58Z

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: beb5b95#diff-04c6e90faac2675aa89e2176d2eec7d8L65

GiuseppePiscopo · 2017-03-22T14:40:44Z

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 · 2017-03-22T20:58:32Z

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 · 2017-03-23T17:57:19Z

@nikolasleblanc still interested in some kind of repro?

nikolasleblanc · 2017-03-23T18:05:12Z

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

GiuseppePiscopo · 2017-03-23T18:12:20Z

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

habibialkaff · 2017-06-08T23:33:30Z

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 · 2017-06-08T23:54:27Z

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

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.
Similar to previous, create a symlink at a different path. This worked, but for some reason it breaks AOT build
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 · 2017-06-08T23:55:50Z

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

reiday · 2017-09-07T16:03:54Z

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 · 2017-11-08T14:58:01Z

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 · 2018-08-14T10:21:58Z

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 · 2018-08-14T11:01:42Z

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!

nick1247 changed the title ~~(0.6.1) relative path problem~~ (0.6.1) path problem Feb 6, 2017

maksim-tolo mentioned this issue Feb 6, 2017

Fix regexp for cases when templateUrl line is ending by space character #52

Merged

morganjs07 mentioned this issue Feb 6, 2017

Unable to start project after generating with Yeo aspnet/JavaScriptServices#645

Closed

MarkPieszak mentioned this issue Feb 6, 2017

Fix templateUrl regexp for the single line component decorator #44

Merged

TheLarkInn closed this as completed in #52 Feb 7, 2017

TheLarkInn reopened this Feb 7, 2017

SimonTestNet mentioned this issue Feb 7, 2017

angular2-template-loader v0.6.1 is broken aspnet/JavaScriptServices#649

Closed

maxx0r mentioned this issue Feb 8, 2017

Failed to load home.component.html PatrickJS/PatrickJS-starter#1496

Closed

fals mentioned this issue Feb 8, 2017

fallbackLoader option has been deprecated preboot/angular-webpack#292

Closed

gonzofish mentioned this issue Feb 8, 2017

Source maps not working for tests gonzofish/angular-librarian#14

Closed

This was referenced Mar 21, 2017

strange behavior with loading templates by relative paths #47

Open

templateUrl Regex fails to capture when comment follows #58

Open

GiuseppePiscopo mentioned this issue Mar 21, 2017

Is this project active? #41

Closed

Riobe linked a pull request Apr 27, 2017 that will close this issue

Make the ending comma/curlybrace after templateUrl optional. #67

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(0.6.1) path problem #50

(0.6.1) path problem #50

nick1247 commented Feb 6, 2017

dellax commented Feb 6, 2017

nick1247 commented Feb 6, 2017

tonimitrevski commented Feb 6, 2017

nick1247 commented Feb 6, 2017

tonimitrevski commented Feb 6, 2017

jeka5555 commented Feb 6, 2017

TheLarkInn commented Feb 7, 2017

TheLarkInn commented Feb 7, 2017

TheLarkInn commented Feb 7, 2017

mohannad-abwah commented Feb 7, 2017 •

edited

Loading

TheLarkInn commented Feb 8, 2017

FabianGosebrink commented Feb 9, 2017

scoleman81 commented Feb 23, 2017

GiuseppePiscopo commented Mar 21, 2017 •

edited

Loading

nikolasleblanc commented Mar 21, 2017

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017

nikolasleblanc commented Mar 22, 2017

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 23, 2017

nikolasleblanc commented Mar 23, 2017

GiuseppePiscopo commented Mar 23, 2017

habibialkaff commented Jun 8, 2017 •

edited

Loading

GiuseppePiscopo commented Jun 8, 2017

GiuseppePiscopo commented Jun 8, 2017

reiday commented Sep 7, 2017

bohms27 commented Nov 8, 2017 •

edited

Loading

nombrekeff commented Aug 14, 2018

nombrekeff commented Aug 14, 2018

(0.6.1) path problem #50

(0.6.1) path problem #50

Comments

nick1247 commented Feb 6, 2017

dellax commented Feb 6, 2017

nick1247 commented Feb 6, 2017

tonimitrevski commented Feb 6, 2017

nick1247 commented Feb 6, 2017

tonimitrevski commented Feb 6, 2017

jeka5555 commented Feb 6, 2017

TheLarkInn commented Feb 7, 2017

TheLarkInn commented Feb 7, 2017

TheLarkInn commented Feb 7, 2017

mohannad-abwah commented Feb 7, 2017 • edited Loading

TheLarkInn commented Feb 8, 2017

FabianGosebrink commented Feb 9, 2017

scoleman81 commented Feb 23, 2017

GiuseppePiscopo commented Mar 21, 2017 • edited Loading

nikolasleblanc commented Mar 21, 2017

GiuseppePiscopo commented Mar 22, 2017 • edited Loading

GiuseppePiscopo commented Mar 22, 2017 • edited Loading

GiuseppePiscopo commented Mar 22, 2017

nikolasleblanc commented Mar 22, 2017

GiuseppePiscopo commented Mar 22, 2017 • edited Loading

GiuseppePiscopo commented Mar 22, 2017 • edited Loading

GiuseppePiscopo commented Mar 23, 2017

nikolasleblanc commented Mar 23, 2017

GiuseppePiscopo commented Mar 23, 2017

habibialkaff commented Jun 8, 2017 • edited Loading

GiuseppePiscopo commented Jun 8, 2017

GiuseppePiscopo commented Jun 8, 2017

reiday commented Sep 7, 2017

bohms27 commented Nov 8, 2017 • edited Loading

nombrekeff commented Aug 14, 2018

nombrekeff commented Aug 14, 2018

mohannad-abwah commented Feb 7, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 21, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

GiuseppePiscopo commented Mar 22, 2017 •

edited

Loading

habibialkaff commented Jun 8, 2017 •

edited

Loading

bohms27 commented Nov 8, 2017 •

edited

Loading