Angular2 template is not working with component-relative paths

[bampakoa]

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

I have created an application using Angular2 template and organized my components in folders using component-relative paths such as:

When I start the application I get the following error from the compiler:

"Template parse errors:
'anonymous' is not a known element:
1. If 'anonymous' is an Angular component, then verify that it is part of this module.
2. If 'anonymous' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (":\test-project\node_modules\electron-compile\lib\file-change-cache.js:127:41
    at Generator.next ([ERROR ->]<anonymous>)
    at step (D:\test-project\node_modules\electron-compile\lib\file-change-cache.js:27:1"): DemoComponent@10:23"

Console output when you run electron-forge init with the environment variable DEBUG=electron-forge:*. (Instructions on how to do so here). Please include the stack trace if one exists.

WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:lifecycle Process Started: Checking your system +0ms
  electron-forge:lifecycle Process Succeeded: Checking your system +51ms
  electron-forge:runtime-config setting key: verbose to value: false +6ms
WARNING: DEBUG environment variable detected.  Progress indicators will be sent over electron-forge:lifecycle
  electron-forge:init Initializing in: D:\test-project +0ms
  electron-forge:lifecycle Process Started: Initializing Project Directory +3ms
  electron-forge:init:directory creating directory: D:\test-project +2ms
  electron-forge:lifecycle Process Succeeded: Initializing Project Directory +5ms
  electron-forge:lifecycle Process Started: Initializing Git Repository +1ms
  electron-forge:init:git executing "git init" in directory: D:\test-project +1ms
  electron-forge:lifecycle Process Succeeded: Initializing Git Repository +89ms
  electron-forge:lifecycle Process Started: Copying Starter Files +1ms
  electron-forge:init:starter-files creating directory: D:\test-project\src +1ms
  electron-forge:init:starter-files copying "C:\Users\abampakos\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_gitignore" --> "D:\test-project\.gitignore" +1ms
  electron-forge:init:starter-files copying "C:\Users\abampakos\AppData\Roaming\npm\node_modules\electron-forge\tmpl\_compilerc" --> "D:\test-project\.compilerc" +3ms
  electron-forge:init:starter-files copying "C:\Users\abampakos\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.js" --> "D:\test-project\src\index.js" +2ms
  electron-forge:init:starter-files copying "C:\Users\abampakos\AppData\Roaming\npm\node_modules\electron-forge\tmpl\index.html" --> "D:\test-project\src\index.html" +1ms
  electron-forge:lifecycle Process Succeeded: Copying Starter Files +1ms
  electron-forge:lifecycle Process Started: Initializing NPM Module +1ms
  electron-forge:init:npm writing package.json to: D:\test-project +5ms
  electron-forge:lifecycle Process Succeeded: Initializing NPM Module +4ms
  electron-forge:lifecycle Process Started: Installing NPM Dependencies +1ms
  electron-forge:init:npm installing dependencies +2ms
  electron-forge:dependency-installer installing ["electron-compile"] in: D:\test-project dev=false,exact=false,withYarn=false +17ms
  electron-forge:dependency-installer executing ["install","electron-compile","--save"] in: D:\test-project +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +7ms
  electron-forge:init:npm installing devDependencies +15s
  electron-forge:dependency-installer installing ["babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator"] in: D:\test-project dev=true,exact=false,withYarn=false +0ms
  electron-forge:dependency-installer executing ["install","babel-preset-env","babel-preset-react","babel-plugin-transform-async-to-generator","--save-dev"] in: D:\test-project +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +7ms
  electron-forge:init:npm installing exact dependencies +14s
  electron-forge:dependency-installer installing ["electron-prebuilt-compile"] in: D:\test-project dev=true,exact=true,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","electron-prebuilt-compile","--save-exact","--save-dev"] in: D:\test-project +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +8ms
  electron-forge:init:npm not installing linting deps +37s
  electron-forge:lifecycle Process Succeeded: Installing NPM Dependencies +6ms
  electron-forge:lifecycle Process Started: Locating custom template: "angular2" +2ms
  electron-forge:init:custom using local template +3ms
  electron-forge:lifecycle Process Succeeded: Locating custom template: "angular2" +2ms
  electron-forge:lifecycle Process Started: Installing Template Dependencies +1ms
  electron-forge:init:custom installing dependencies +1ms
  electron-forge:dependency-installer installing ["@angular/common@^2.4.1","@angular/compiler@^2.4.1","@angular/core@^2.4.1","@angular/platform-browser@^2.4.1","@angular/platform-browser-dynamic@^2.4.1","@types/electron@^1.4.30","electron-devtools-installer@^2.0.1","reflect-metadata@^0.1.9","tslib@^1.4.0","zone.js@^0.7.4"] in: D:\test-project dev=false,exact=false,withYarn=false +0ms
  electron-forge:dependency-installer executing ["install","@angular/common@^2.4.1","@angular/compiler@^2.4.1","@angular/core@^2.4.1","@angular/platform-browser@^2.4.1","@angular/platform-browser-dynamic@^2.4.1","@types/electron@^1.4.30","electron-devtools-installer@^2.0.1","reflect-metadata@^0.1.9","tslib@^1.4.0","zone.js@^0.7.4","--save"] in: D:\test-project +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +7ms
  electron-forge:init:custom installing devDependencies +9s
  electron-forge:dependency-installer installing ["tslint@^4.2.0","typescript@~2.1.4"] in: D:\test-project dev=true,exact=false,withYarn=false +1ms
  electron-forge:dependency-installer executing ["install","tslint@^4.2.0","typescript@~2.1.4","--save-dev"] in: D:\test-project +1ms
  electron-forge:runtime-config fetching key verbose +1ms
  electron-forge:runtime-config fetching key verbose +6ms
  electron-forge:lifecycle Process Succeeded: Installing Template Dependencies +10s
  electron-forge:lifecycle Process Started: Copying Template Files +1ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/_compilerc" --> "D:\test-project\.compilerc" +7ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/app.component.ts" --> "D:\test-project\src\app.component.ts" +3ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/bootstrap.ts" --> "D:\test-project\src\bootstrap.ts" +2ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/index.html" --> "D:\test-project\src\index.html" +1ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/src/index.ts" --> "D:\test-project\src\index.ts" +1ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/tsconfig.json" --> "D:\test-project\tsconfig.json" +1ms
  electron-forge:init:starter-files copying "C:/Users/abampakos/AppData/Roaming/npm/node_modules/electron-forge/node_modules/electron-forge-template-angular2/tmpl/tslint.json" --> "D:\test-project\tslint.json" +2ms
  electron-forge:lifecycle Process Succeeded: Copying Template Files +1ms

What command line arguments are you passing?

start

What does your config.forge data in package.json look like?

"make_targets": {
        "win32": [
          "squirrel"
        ],
        "darwin": [
          "zip"
        ],
        "linux": [
          "deb",
          "rpm"
        ]
      },
      "electronPackagerConfig": {},
      "electronWinstallerConfig": {
        "name": "test_project"
      },
      "electronInstallerDebian": {},
      "electronInstallerRedhat": {},
      "github_repository": {
        "owner": "",
        "name": ""
      },
      "windowsStoreConfig": {
        "packageName": "",
        "name": "testproject"
      }

Please provide either a failing minimal testcase (with a link to the code) or detailed steps to
reproduce your problem.

https://drive.google.com/file/d/0B9H4CfCJzrtGVW85UWNfM3duVzQ/view?usp=sharing

[jamesmoore]

There appears to be some problem with Angular 2 resolving these components paths from the filesystem, and it probably only affects Windows users.

A workaround is to alter the module id in the component declaration:

moduleId : module.id.split('\\').join('/'),

[quentint]

Thanks for the fix!
Do you know if there's a way to apply this trick globally, and not on a component-to-component basis?

[bampakoa]

@quentint If you are using SystemJS, you can use systemjs-angular-loader.js plugin that Angular built in order to get rid of moduleId. For more info see the changelog