Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using index.html and templateUrl path issue #51

Closed
TrikinCurt opened this issue Dec 25, 2015 · 7 comments
Closed

Using index.html and templateUrl path issue #51

TrikinCurt opened this issue Dec 25, 2015 · 7 comments

Comments

@TrikinCurt
Copy link

Ok, keep in mind I am new to ng2 and meteor, but...

I have an index.html file, since I was converting an app, it has header information that I need in it.

Essentially:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PM Toolbelt: Tools for Property Managers</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="assets/css/carousel.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
  <link href="assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <base href="/">
</head>


<body>
    <app></app>
</body>

My app.ts uses a template called app.html

<header></header>
<router-outlet></router-outlet>
<footer></footer>

In my template files, if I paste all of the html inline using template: <b>All my happy html</b> it works just fine.

If I simply change it to templateUrl it will no longer compile.

EXCEPTION: Template parse errors:
Unexpected closing tag "head" ("
  <base href="/">

[ERROR ->]</head>
<body>

"): HeaderComponent@72:0
Unexpected closing tag "html" ("

</body>
[ERROR ->]</html>
"): HeaderComponent@91:0

Am I crazy? Am I going about this wrong? I tried to use some of the Angular 1 docs to get that far. So it works, but I can't stand the site of full html pages inline.
@TrikinCurt
Copy link
Author

I wrote an actual app, in production. I use index.html and template files. Clearly i was crazy before so closing.

@barbatus
Copy link
Collaborator

barbatus commented Jan 8, 2016

Good to know) We are actually quite busy now, so issues like this are not of first priority, apologies

@swunderlich
Copy link

@TrikinCurt , could you please explain what you actually changed? Having the same issue here. Thanks in advance.

@nodeEnthu
Copy link

+1 having same issue .. here is my code in 4 files:

//filereader.ts

import {Component, ElementRef, EventEmitter, Output} from 'angular2/core';
@Component({
  selector: 'filereader',
  templateUrl: './commons/inputfilereader/filereader.html',
  styleUrls: ['./commons/inputfilereader/filereader.css'],
  providers: [ElementRef]
})

export class InputFileReader {
  @Output() complete :any = new EventEmitter();
  resultSet:Array<Array<string>>=[];
  changeListener($event: any) {
    var self = this;
    var file:File = $event.target.files[0];
    var myReader:FileReader = new FileReader();
    myReader.readAsText(file);
    let resultSet: Array<any> = [];
    myReader.onloadend = function(e){
      // you can perform an action with readed data here
      var columns = myReader.result.split(/\r\n|\r|\n/g);
      for (var i = 0; i < columns.length; i++) {
          resultSet.push(columns[i].split(' '));
      }
      self.resultSet=resultSet;
      self.complete.next(self.resultSet);
    };
  }
}
// filereader.html'
<input type="file" (change)="changeListener($event)"/>

Usage: in dfs.ts
import {Component, ElementRef} from 'angular2/core';
import {InputFileReader} from '../../commons/inputfilereader/inputfilereader';
@Component({
  selector: 'dfs',
  templateUrl: './components/dfs/dfs.html',
  styleUrls: ['./components/dfs/dfs.css'],
  providers: [ElementRef],
  directives:[InputFileReader],
  events:['complete']
})
export class DfsCmp {
    render(): void {
         // some logic here
    }
}
//dfs.html
<filereader (complete)="render($event)"></filereader>

@steven166
Copy link

I encountered the same issue. It was caused by a wrong templateUrl.
I've changed the url and everything was working again.

Anyway....odd error message.

@TrikinCurt
Copy link
Author

Sorry i didn’t respond back, but following along with the 15 step example,
I have built very basic marketing sites, using template in one, templateUrl
in the other. I use an index.html page that looks like:

<script>System.import('client/app');</script> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script> <script src="js/bootstrap.min.js" type="text/javascript" language="javascript"></script>

and the rest is typical. Works fine.

Curt Fluegel
Trikin Properties - Your Twin Cities Landlord
Broker/Owner
2015 MHA Independent Owners Chair
2014 NARPM® MN Chapter President
Serving the Twin Cities Metro and Western Wisconsin
curt@trikinproperties.com
TwinCitiesLandlord.com
651.964.3812 x101
651.964.3814 fax

On Thu, Jan 21, 2016 at 5:09 AM, steven166 notifications@github.com wrote:

I encountered the same issue. It was caused by a wrong templateUrl.
I've changed the url and everything was working again.

Anyway....odd error message.

—
Reply to this email directly or view it on GitHub
#51 (comment)
.

@tachyon-ops
Copy link

Actualy, it does make sense to send a variable with a base path (think if you want diferent css files for diferent looks).
From ng2 'hero' example

dashboard.component.ts:
@Component({ selector: 'my-dashboard', templateUrl: baseURL+'app/dashboard.component.html', styleUrls: [baseURL+'app/dashboard.component.css'] })
Would be nice to be able to do something like this 'baseURL', or to provide it from the System.config({paths:{}}) ??

Perhaps this is easy to do, but I am just begining on ng2 (second day).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@swunderlich @tachyon-ops @steven166 @barbatus @TrikinCurt @nodeEnthu