malept
commented
7 years ago How is this different from #272?
Closed PythonDevOp closed 7 years ago
malept
commented
7 years ago How is this different from #272?
PythonDevOp
commented
7 years ago Well, for one, he has logic via *ngIf inside his template which would show or hide the component based on certain conditions. Also, the app setup might be different, as I am not sure how he got his components to show <app-main-toolbar></app-main-toolbar>, etc, because if they are inline it might work, but if they are referenced via templateUrl it might not
malept
commented
7 years ago Is this as minimal of a testcase as you can make?
ebordon
commented
7 years ago You can see in the first lines of the error
Tue, 22 Aug 2017 02:23:01 GMT electron-compile:protocol-hook Intercepting url file:///D:/login.component.html
Tue, 22 Aug 2017 02:23:01 GMT electron-compile:compiler-host Compiling D:/login.component.html
Tue, 22 Aug 2017 02:23:01 GMT electron-compile:protocol-hook Failed to compile D:/login.component.html: ENOENT: no such file or directory, lstat 'D:\login.component.html'
Error: ENOENT: no such file or directory, lstat 'D:\login.component.html'You are using absolute path to login.component.html. Routes in the declaration has to be relatives to the root of the project.
PythonDevOp
commented
7 years ago @malept - You can move those out to the root of src, or just create an html file and reference it in app.component.ts like so:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './myTemplate.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
And myTemplate.html can just be something like so:
<div> my app is named {{app}} </div>@ebordon - I do believe I tried referencing 'D:\path\to\file` with the same results. Were you able to produce a working example otherwise with what you had suggested?
ebordon
commented
7 years ago @PythonDevOp try by modifying the reference to the template and style
import{Component} from '@angular/core'
@Component({
moduleId: module.id,
selector: 'login-form',
templateUrl: './app/loginForm/login.component.html',
styleUrls: ['./app/loginForm/login.component.css']
})
export class LoginForm{
name = 'app';
}All the references are from src folder.
I made a starter repo if you want to try it https://github.com/ebordon/electron-forge-angular4-starter/
PythonDevOp
commented
7 years ago Ok. I reviewed the code you had in your repo and I found my problem. It was 2 fold; addition of moduleId: module.id AND the path were the issue. I did need to add the folder that the HTML was in.
I was not aware that I had to use the relative path, so thank you for pointing that out. With a typical Angular app, the convention I have seen is something like ./login.component.html. The addition of the module code was to troubleshoot, but apparently that was only for Angular 2 and may not apply now with Angular 4.
In any event, it works! Thanks!
Old Code:
import{Component} from '@angular/core'
@Component({
moduleId: module.id,
selector: 'login-form',
templateUrl: './login.component.html',
styleUrls: ['login.component.css']
})
export class LoginForm{
name = 'app';
}
New Code:
import{Component} from '@angular/core'
@Component({
selector: 'login-form',
templateUrl: './app/loginForm/login.component.html',
styleUrls: ['login.component.css']
})
export class LoginForm{
name = 'app';
}
Please describe your issue:
Similar to https://github.com/electron-userland/electron-forge/issues/272.
I basically took the angular 2 template, and 'upgraded' to Angular 4 by changing the dependencies in the package.json file. I added a new component, and tried to link an html file using angular 4
templateUrl, which threw the error with the electron-compiler. However, if I change totemplateand inline it, it works fine. the issue also exists with thestyleUrl. I don't believe this is an Angular4 issue, but something related to how electron-forge is working with electron-compiler to serve up the app.I did a little bit of troubleshooting, and found this issue might be related to electron-compile. Below is the debug log from electron-compile using :
DEBUG=electron-compile:* npm startThe relevant part, I think, is this:
Below is the full output
What command line arguments are you passing?
What does your
package.jsonlook like?Please provide either a failing minimal testcase (with a link to the code) or detailed steps to reproduce your problem. Using
electron-forge initis a good starting point, if that is not the source of your problem.I basically took the angular 2 template, and 'upgraded' to Angular 4 by changing the dependencies in the package.json file. I added a new component, and tried to link an html file using angular 4
templateUrl, which threw the error with the electron-compiler. However, if I change totemplateand inline it, it works fine. the issue also exists with thestyleUrl. I don't believe this is an Angular4 issue, but something related to how electron-forge is working with electron-compiler to serve up the app.These are the basic bare bones to my project. Not much done to change what was already present in the angular 2 template, except for adding a new component.
index.html main.ts app.component.ts app.module.ts .compilerc
Login Component:
Folder Structure:
For what its worth, it looks like a path issue with electron-compile, but I am not sure.