[plain JS] templateUrl not working with short path

[atao60]

When reporting a bug, please be sure to include the following:

• A descriptive title
• An isolated way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem)
• What version of angular-meteor you're using, and the platform(s) you're running it on
• What packages or other dependencies you're using
• The behavior you expect to see, and the actual behavior

bug?

A working demo is available on atao60/meteor-angular-ionic. This demo is based on Angular Meteor bare. All the code (but the tests) is in plain JS, even the annotations (Component, NgModule,...)

As soon as a path such as:

templateUrl: 'client/imports/app/app.html'

is replaced by:

templateUrl: 'app.html'

the associated part of the view isn't correctly displayed.

Is this the expected behavior with vanilla JS w/o "@" annotations, ie full pathes required?

Should it be possible to keep the same behavior than with TS and "@" annotations, ie short pathes accepted?

dev config

$ uname -srvmpio
Linux 4.13.0-37-generic #42~16.04.1-Ubuntu SMP Wed Mar 7 16:03:28 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

$ cat package.json
{
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "TEST_BROWSER_DRIVER=phantomjs meteor test --driver-package=ardatan:mocha",
    "test:ci": "TEST_BROWSER_DRIVER=phantomjs meteor test --driver-package=ardatan:mocha --once",
    "postinstall": "npm run styles:install",
    "prestyles:install": "mkdirp ./client/stylesheets",
    "styles:install": "npm run ionic-styles:install",
    "ionic-styles:install": "cpy node_modules/ionic-angular/css/ionic.css client/stylesheets"
  },
  "dependencies": {
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@babel/runtime": "^7.0.0-beta.42",
    "@ionic-native/core": "^4.6.0",
    "core-js": "^2.5.3",
    "ionic-angular": "^3.9.2",
    "meteor-node-stubs": "~0.3.3",
    "meteor-rxjs": "^0.4.10",
    "rxjs": "^5.5.7",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.2.9",
    "@types/chai": "^4.1.2",
    "@types/meteor": "^1.4.13",
    "@types/mocha": "^2.2.48",
    "@types/sinon": "^4.3.0",
    "chai": "^4.1.2",
    "cpy-cli": "^1.0.1",
    "mkdirp": "^0.5.1",
    "phantomjs-prebuilt": "^2.1.16",
    "sinon": "^4.4.6",
    "typescript": "^2.7.2"
  }
}

$ cat .meteor/release
[email protected]

$ cat .meteor/packages
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
[email protected]                   # The database Meteor supports right now
[email protected]            # Reactive variable for tracker
[email protected]                 # Meteor's client-side reactive programming library

[email protected]                # ECMAScript 5 compatibility for older browsers
[email protected]              # Enable ECMAScript2015+ syntax in app code
[email protected]            # Server-side component of the `meteor shell` command

angular-compilers

$ cat .meteor/versions
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

UPDATE

After a very long time, error messages are displayed on the browser console:

ERROR 
InternalError: too much recursion
Stack trace:
[object Object]
AppComponent.ngfactory.js:22:24
View_AppComponent_0
ng:///AppModule/AppComponent.ngfactory.js:22:24
proxyClass
http://localhost:3000/packages/modules.js:100440:20
core.umd.js/</DebugContext_</DebugContext_.prototype.logError
http://localhost:3000/packages/modules.js:80662:11
core.umd.js/</ErrorHandler</ErrorHandler.prototype.handleError
http://localhost:3000/packages/modules.js:67175:9
core.umd.js/</ApplicationRef</ApplicationRef.prototype.tick/<
http://localhost:3000/packages/modules.js:71580:63
zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke
http://localhost:3000/packages/modules.js:55841:17
zone.js/</Zone$1</Zone</Zone.prototype.run
http://localhost:3000/packages/modules.js:55591:24
core.umd.js/</NgZone</NgZone.prototype.runOutsideAngular
http://localhost:3000/packages/modules.js:70363:54
core.umd.js/</ApplicationRef</ApplicationRef.prototype.tick
http://localhost:3000/packages/modules.js:71580:13
core.umd.js/</ApplicationRef</ApplicationRef.prototype._loadComponent
http://localhost:3000/packages/modules.js:71639:9
core.umd.js/</ApplicationRef</ApplicationRef.prototype.bootstrap
http://localhost:3000/packages/modules.js:71527:9
core.umd.js/</PlatformRef</PlatformRef.prototype._moduleDoBootstrap/<
http://localhost:3000/packages/modules.js:71247:74
core.umd.js/</PlatformRef</PlatformRef.prototype._moduleDoBootstrap
http://localhost:3000/packages/modules.js:71247:13
core.umd.js/</PlatformRef</PlatformRef.prototype.bootstrapModuleFactory/</</<
http://localhost:3000/packages/modules.js:71168:21
zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke
http://localhost:3000/packages/modules.js:55841:17
onInvoke
http://localhost:3000/packages/modules.js:70415:24
zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke
http://localhost:3000/packages/modules.js:55840:17
zone.js/</Zone$1</Zone</Zone.prototype.run
http://localhost:3000/packages/modules.js:55591:24
scheduleResolveOrReject/<
http://localhost:3000/packages/modules.js:56311:52
zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask
http://localhost:3000/packages/modules.js:55874:17
onInvokeTask
http://localhost:3000/packages/modules.js:70406:24
zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask
http://localhost:3000/packages/modules.js:55873:17
zone.js/</Zone$1</Zone</Zone.prototype.runTask
http://localhost:3000/packages/modules.js:55641:28
drainMicroTaskQueue
http://localhost:3000/packages/modules.js:56048:25
zone.js/</Zone$1</ZoneTask</ZoneTask.invokeTask
http://localhost:3000/packages/modules.js:55953:21
invokeTask
http://localhost:3000/packages/modules.js:56970:9
globalZoneAwareCallback
http://localhost:3000/packages/modules.js:56996:17
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…} }
AppComponent.ngfactory.js:22:24
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
modules.js:69353:9

ERROR CONTEXT Object { view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…} } AppComponent.ngfactory.js:22:24
	View_AppComponent_0 ng:///AppModule/AppComponent.ngfactory.js:22:24
	proxyClass http://localhost:3000/packages/modules.js:100440:20
	core.umd.js/</DebugContext_</DebugContext_.prototype.logError http://localhost:3000/packages/modules.js:80662:11
	core.umd.js/</ErrorHandler</ErrorHandler.prototype.handleError http://localhost:3000/packages/modules.js:67180:13
	core.umd.js/</ApplicationRef</ApplicationRef.prototype.tick/< http://localhost:3000/packages/modules.js:71580:63
	zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke http://localhost:3000/packages/modules.js:55841:17
	zone.js/</Zone$1</Zone</Zone.prototype.run http://localhost:3000/packages/modules.js:55591:24
	core.umd.js/</NgZone</NgZone.prototype.runOutsideAngular http://localhost:3000/packages/modules.js:70363:54
	core.umd.js/</ApplicationRef</ApplicationRef.prototype.tick http://localhost:3000/packages/modules.js:71580:13
	core.umd.js/</ApplicationRef</ApplicationRef.prototype._loadComponent http://localhost:3000/packages/modules.js:71639:9
	core.umd.js/</ApplicationRef</ApplicationRef.prototype.bootstrap http://localhost:3000/packages/modules.js:71527:9
	core.umd.js/</PlatformRef</PlatformRef.prototype._moduleDoBootstrap/< http://localhost:3000/packages/modules.js:71247:74
	core.umd.js/</PlatformRef</PlatformRef.prototype._moduleDoBootstrap http://localhost:3000/packages/modules.js:71247:13
	core.umd.js/</PlatformRef</PlatformRef.prototype.bootstrapModuleFactory/</</< http://localhost:3000/packages/modules.js:71168:21
	zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke http://localhost:3000/packages/modules.js:55841:17
	onInvoke http://localhost:3000/packages/modules.js:70415:24
	zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke http://localhost:3000/packages/modules.js:55840:17
	zone.js/</Zone$1</Zone</Zone.prototype.run http://localhost:3000/packages/modules.js:55591:24
	scheduleResolveOrReject/< http://localhost:3000/packages/modules.js:56311:52
	zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask http://localhost:3000/packages/modules.js:55874:17
	onInvokeTask http://localhost:3000/packages/modules.js:70406:24
	zone.js/</Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask http://localhost:3000/packages/modules.js:55873:17
	zone.js/</Zone$1</Zone</Zone.prototype.runTask http://localhost:3000/packages/modules.js:55641:28
	drainMicroTaskQueue http://localhost:3000/packages/modules.js:56048:25
	zone.js/</Zone$1</ZoneTask</ZoneTask.invokeTask http://localhost:3000/packages/modules.js:55953:21
	invokeTask http://localhost:3000/packages/modules.js:56970:9
	globalZoneAwareCallback http://localhost:3000/packages/modules.js:56996:17

[ardatan]

This is not expected behaviour, because angular compilers only processes TypeScript files, but HTML and SCSS compilers can work in same way, so you can use same syntax with the modification that is done by TypeScript compiler in angular-compilers.
Could you try to add vanillajs version of the code below;

@Component({
moduleId: module.id,
...
})

[atao60]

@ardatan Thank you! It works fine now.

I had to add it on any component where a short path is used. Same thing with the pathes to scss files.

PS. I updated my previous post with error messages displayed on the browser console after a very long time.

[ardatan]

I think there is a wrong path in a source file, because when there is one, it sends index.html as default for 404. After that, this causes recursion by bootstrapping app again and again ( we couldn't find a proper way to handle this ).
So you need to check the path of html and scss files.

[atao60]

I checked all of the 5 pathes of html and scss files existing in the code of atao60/meteor-angular-ionic: there are all fine.

AFAIU, no needs to search for a wrong path. Even if it seems Angular doesn't promote anymore the usage of 'moduleId', it's well documented, see e.g. Component-Relative Paths in Angular which among others states:

We might expect that ./header.component.html is a path relative to the header.component.ts file and that component-relative paths should work, right?

Instead, we get another 404 - Not found - Exception.

that is exactly the observed behavior.

As I'm happy with the moduleId workaround, do we need to keep the present issue open?

[ardatan]

Thank you for your collaboration!
Angular CLI was firstly designed to use with SystemJS. SystemJS loads modules by their path properly, but Angular couldn't have recognized those path in order to load template and style files by their path via XHR like SystemJS. To solve this, moduleId has been used a while. However, this property is still available and not deprecated.
After Angular CLI switched to Webpack, Webpack loaders started to replace templateUrl and styleUrls syntax with CommonJS's require or ES2015's import syntax, and that method is tricky.
All these are from Angular CLI strategy, but we are not using Angular CLI. We don't have to use Angular CLI's way to compile TS or JS files. We are using moduleId instead of making Meteor's bundler(which was really slow because of that) busy by dealing with asset files like Webpack.
I cannot see any official promotion level of Angular in the unofficial post you added your comment.
That's why, html-compiler and scss-compiler work independently from typescript-compiler in development mode to make them asyncronized and faster. html-compiler and scss-compiler adds html and scss files for Angular to be accessed via XHR, but here is the known issue; if Angular couldn't find them, it gets bootstrap/home page by Meteor's default page fallback(this is my thought about the reason of infinite loop).
Finally, we haven't designed the compiler to work with plain-JS. We need to work on this to give support for plain JS.
Stay tuned!