Angular Typescript组件：模板工作，但templateurl不工作

我正在使用Ionic 2进行开发，但是Typescript组件模板有问题

从下面代码中的页面，

DataPage

，我需要在单击按钮时生成并显示一个模式视图。当我在模态组件中使用

templateUrl

时，会出现一个错误，如第二个代码块所示

我确信文件本身正在被检测到，因为在Ionic为应用程序提供服务时，更改路径会产生传输错误。另外，使用

模板

并简单地复制引用文件中的内容也很有效——因此我对标记的有效性相当有信心。我还尝试了

template

和

templateUrl

，使用了更简单的标记，得到了相同的结果

import { Component } from '@angular/core';
import { NavController, ViewController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-data',
  templateUrl: 'data.html'
})
export class DataPage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {}

  testKnowledge() {
    console.log('Click');
    let knowledgeModal = this.modalCtrl.create(DataModal);
    console.log('Modal created');
    knowledgeModal.present();
    console.log('Modal presented');
  }
}

@Component({
  selector: 'page-dataModal',
  templateUrl: 'dataModal.html'
})
export class DataModal {
  constructor(public viewCtrl: ViewController) {}

  modalDismiss() {
    this.viewCtrl.dismiss();
  }
}

错误消息：

md@MBP:~/Documents/Development/MobileDevelopment/aq$ ionic serve --lab

> ionic-hello-world@ ionic:serve /Users/md/Documents/Development/MobileDevelopment/aq
> ionic-app-scripts serve "--lab"

keywords if/then/else require v5 option
[14:46:10]  ionic-app-scripts 0.0.47 
[14:46:10]  watch started ... 
[14:46:10]  build dev started ... 
[14:46:10]  clean started ... 
[14:46:10]  clean finished in 9 ms 
[14:46:10]  copy started ... 
[14:46:10]  transpile started ... 
[14:46:14]  transpile finished in 3.79 s 
[14:46:14]  webpack started ... 
[14:46:14]  copy finished in 3.99 s 
/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:95
      var code = nextLine.substr(0, mapping.generatedColumn -
                         ^

TypeError: Cannot read property 'substr' of undefined
at Function.<anonymous> (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:95:30)
at Array.forEach (native)
at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/node_modules/source-map/lib/source-map-consumer.js:155:14)
at Function.SourceNode_fromStringWithSourceMap [as fromStringWithSourceMap] (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:80:24)
at SourceMapSource.node (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/lib/SourceMapSource.js:42:20)
at ReplaceSource.node (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/lib/ReplaceSource.js:66:29)
at CachedSource.node (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/lib/CachedSource.js:12:23)
at /Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/lib/ConcatSource.js:40:49
at Array.map (native)
at ConcatSource.node (/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack-sources/lib/ConcatSource.js:39:60)

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.3.0/bin/node" "/usr/local/bin/npm" "run" "ionic:serve" "--" "--lab"
npm ERR! node v7.3.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:serve: `ionic-app-scripts serve "--lab"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic-hello-world@ ionic:serve script 'ionic-app-scripts serve "--lab"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts serve "--lab"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/md/Documents/Development/MobileDevelopment/aq/npm-debug.log
There was an error serving your Ionic application: There was an error with the spawned command: serve

md@MBP：~/Documents/Development/MobileDevelopment/aq$ionic-service——实验室
>爱奥尼亚hello world@爱奥尼亚：服务/用户/md/Documents/Development/MobileDevelopment/aq
>爱奥尼亚应用程序脚本服务--“实验室”
关键词if/then/else需要v5选项
[14:46:10]爱奥尼亚应用程序脚本0.0.47
[14:46:10]开始观看。。。
[14:46:10]构建开发已启动。。。
[14:46:10]清洁开始。。。
[14:46:10]清洁在9毫秒内完成
[14:46:10]复制已开始。。。
[14:46:10]传输已开始。。。
[14:46:14]Transbile在3.79秒内完成
[14:46:14]网页已启动。。。
[14:46:14]复制在3.99秒内完成
/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/node_modules/source map/lib/source node.js:95
var code=nextLine.substr（0，mapping.generatedColumn-
^
TypeError:无法读取未定义的属性“substr”
在功能区。（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/node_modules/source map/lib/source node.js:95:30）
at Array.forEach（本机）
在BasicSourceMapConsumer.SourceMapConsumer_eachMapping[作为eachMapping]（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/node_modules/source map/lib/source map consumer.js:155:14）
在Function.SourceNode_fromStringWithSourceMap[与fromStringWithSourceMap一样]（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/node_modules/source map/lib/source node.js:80:24）
在SourceMapSource.node（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/lib/SourceMapSource.js:42:20）
在ReplaceSource.node（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/lib/ReplaceSource.js:66:29）
在CachedSource.node（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/lib/CachedSource.js:12:23）
at/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/lib/ConcatSource.js:40:49
at Array.map（本机）
在ConcatSource.node（/Users/md/Documents/Development/MobileDevelopment/aq/node_modules/webpack sources/lib/ConcatSource.js:39:60）
npm ERR！达尔文16.3.0
npm ERR！argv“/usr/local/cillar/node/7.3.0/bin/node”“/usr/local/bin/npm”“运行”“离子服务”“--”“实验室”
npm错误！节点v7.3.0
npm ERR！npm v3.10.10
npm错误！代码错误周期
npm ERR！爱奥尼亚hello world@爱奥尼亚：服务：`爱奥尼亚应用程序脚本服务”--实验室`
npm错误！退出状态1
npm错误！
npm ERR！在ionic hello world@ionic:serve脚本“ionic应用程序脚本服务”--lab”中失败。
npm错误！请确保已安装最新版本的node.js和npm。
npm ERR！如果您这样做，这很可能是爱奥尼亚hello world软件包的问题，
npm错误！与npm本身无关。
npm ERR！告诉作者此操作在您的系统上失败：
npm错误！ionic应用程序脚本服务“-lab”
npm ERR！您可以通过以下方式获取有关如何打开此项目问题的信息：
npm错误！npm错误！你好，世界
npm ERR！如果不可用，您可以通过以下方式获取他们的信息：
npm ERR！npm所有者ls ionic hello world
npm ERR！上面可能还有其他日志输出。
npm ERR！请在任何支持请求中包含以下文件：
npm ERR！/Users/md/Documents/Development/MobileDevelopment/aq/npm-debug.log
为您的Ionic应用程序提供服务时出错：生成的命令serve出错

关于如何解决这个问题，有什么建议吗？我不介意在短期内使用

模板

，但在我准备发布的时候，这是行不通的

编辑：

---

根据他们的指导说明，我正在安装Ionic，我没有直接安装Webpack，但CLI反馈表明它正在运行。

如果您正在使用Webpack，您可以这样做：

import { Component } from '@angular/core';
import { NavController, ViewController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-data',
  templateUrl: 'data.html'
})
export class DataPage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {}

  testKnowledge() {
    console.log('Click');
    let knowledgeModal = this.modalCtrl.create(DataModal);
    console.log('Modal created');
    knowledgeModal.present();
    console.log('Modal presented');
  }
}

@Component({
  selector: 'page-dataModal',
  templateUrl: require('./dataModal.html') //<-- check the path of your html
})
export class DataModal {
  constructor(public viewCtrl: ViewController) {}

  modalDismiss() {
    this.viewCtrl.dismiss();
  }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{NavController、ViewController、ModalController}；
@组成部分({
选择器：“页面数据”，
templateUrl:'data.html'
})
导出类数据页{
构造函数（公共navCtrl:NavController，公共modalCtrl:ModalController）{}
testKnowledge（）{
console.log（'Click'）；
让knowledgeModal=this.modalCtrl.create（DataModal）；
console.log（'Modal created'）；
knowledgeModal.present（）；
console.log（'Modal presented'）；
}
}
@组成部分({
选择器：“页面数据模式”，
templateUrl:require（'./dataModal.html'）/如果您使用的是网页，您可以这样做：

import { Component } from '@angular/core';
import { NavController, ViewController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-data',
  templateUrl: 'data.html'
})
export class DataPage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {}

  testKnowledge() {
    console.log('Click');
    let knowledgeModal = this.modalCtrl.create(DataModal);
    console.log('Modal created');
    knowledgeModal.present();
    console.log('Modal presented');
  }
}

@Component({
  selector: 'page-dataModal',
  templateUrl: require('./dataModal.html') //<-- check the path of your html
})
export class DataModal {
  constructor(public viewCtrl: ViewController) {}

  modalDismiss() {
    this.viewCtrl.dismiss();
  }
}

从'@angular/core'导入{Component}；
从“ionic angular”导入{NavController、ViewController、ModalController}；
@组成部分({
选择器：“页面数据”，
templateUrl:'data.html'
})
导出类数据页{
构造函数（公共navCtrl:NavController，公共modalCtrl:ModalController）{}
testKnowledge（）{
console.log（'Click'）；
让knowledgeModal=this.modalCtrl.create（DataModal）；
console.log（'Modal created'）；
knowledgeModal.present（）；
console.log（'Modal presented'）；
}
}
@组成部分({
选择器：“页面数据模式”，
templateUrl:require（'./dataModal.html'）/我认为您只需将
templateUrl更改为以下内容：

  templateUrl: './data.html'

及

我想你必须这么做
@Component({ selector: 'page-dataModal', templateUrl: 'dataModal.html' })