Question

我正在使用Ionic 2进行开发，并且遇到了Typescript组件模板的问题。

在下面的代码中的DataPage页面中，我需要在单击按钮时生成并显示模态视图。当我在模态组件中使用templateUrl时，出现错误，显示在第二个代码块中。

我确信正在检测文件本身，因为当Ionic为应用程序提供服务时，更改路径会产生转换错误。此外，使用template并简单地复制引用文件中的内容也很有效 - 因此我对标记的有效性有了合理的信心。我还尝试了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

有关如何解决此问题的任何建议？我不介意在短期内与template合作，但是当我准备好发布时，它不会飞。

编辑：

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

Answer 1

如果你正在使用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();
  }
}

我认为问题是你的道路..如果你使用webpack尝试使用require

Answer 2

我认为您只需将templateUrl更改为此：

  templateUrl: './data.html'

和

  templateUrl: './dataModal.html'

Answer 3

我不知道你是否解决了它，但是我遇到了同样的问题并通过在一行中编写模态组件装饰器来解决它：

@Component({ selector: 'page-dataModal', templateUrl: 'dataModal.html' })

如上所述here，它似乎是 source-map 的问题。

Typescript组件：模板有效，但templateurl没有

3 个答案: