Angular2 templateUrl Loading template will not work

Question

I try to load a template in my component via templateUrl. But it will not work. It throws the error in console: error TS2304: Cannot find name 'module'. The property moduleId: module.id is set. When i try to write the template inside the component, it works fine. I use SystemJS. The structure looks like:

-app
  |
  |- components
  | |
  | |-projects
  |   |
  |   |-project.component.ts
  |   |-project.component.html
  |
  |-app.component.ts
  |-app.module.ts

project.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'project',
    moduleId: module.id,
    templateUrl: './project.component.html' 
})

export class ProjectComponent {
    title: string;
    projectName: string;
    projectCity: string;

    constructor () {}

    addProject () {
        console.log('Add project);
    }
}

The very simple html:

<div>
    <form novalidate (ngSubmit)="addProject(form.value)" #form="ngForm">

        <div class="form-group">
            <label for="">Projectname</label>
            <input type="text" name="projectName" class="form-control" required [(ngModel)]="projectName">    
        </div>

        <div class="form-group">
             <label for="">Ort</label>
             <input type="text" name="projectCity" class="form-control" required [(ngModel)]="projectCity">    
        </div>

        <button type="submit" [disabled]="!form.valid" class="btn btn-default">Project anlegen</button>

     </form>
</div>

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectComponent } from './components/projects/project.component';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, ProjectComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

http://stackoverflow.com/questions/36700693/typescript-error-in-angular2-code-cannot-find-name-module — MChaker, Feb 12 '17 at 11:27

score 0 · Answer 1 · answered Feb 12 '17 at 11:09

0

Have you tried templateUrl: './project.component.html'? You need to add .html

answered Feb 12 '17 at 11:09

Tuong Le

18,533
11
50
44

score 0 · Answer 2 · edited Feb 12 '17 at 15:28

0

Try using this:

template: require('./project.component.html')

edited Feb 12 '17 at 15:28

FelixSFD

6,052
10
43
117

answered Feb 12 '17 at 12:51

Rahul Singh

19,030
11
64
86

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/15184785) – j_4321 Feb 12 '17 at 15:19
I guess this is what he is looking for his template doesn't load – Rahul Singh Feb 12 '17 at 15:21
But the way your answer is formulated makes it sound more like a comment than a proper answer. You could add a few details/explanations. – j_4321 Feb 12 '17 at 15:24
Okay i could but it is self explanatory – Rahul Singh Feb 12 '17 at 15:25

score 0 · Answer 3 · answered Feb 12 '17 at 16:38

Everything is working fine in your code.

Just change your component code as following:

From : 

@Component({
 selector: 'project',
 moduleId: module.id,
 templateUrl: './project.component.html' 
})


To : 

@Component({
 selector: 'project',
 moduleId: module.id,
 templateUrl: 'components/projects/project.component.html' 
})

This will definitely work for you.

Angular2 templateUrl Loading template will not work

3 Answers3