Question

我正在使用Angular 4.1.3和Rails 5.1

我正在尝试实现应用程序组件，如果我使用模板并编写我的html，一切正常，但我想使用templateUrl。

这是我的组件。

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

@Component({
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

这是我的文件结构

├── app
|   ├── app.component.html
|   └── app.component.ts
|   └── app.module.ts

我知道在@Component中你可以添加moduleId：module.id，但我认为在角度4.1.3中不再需要它。

如果我添加它，它会告诉我： moduleId should be a string in "AppComponent"

我还认为如果你没有包含从根目录中获取的moduleId angular，但是如果我做了一个绝对路径，它应该工作正常吗？

如果你们能提供帮助，那就太棒了。

Answer 1

我假设你在rails项目中使用了新的webpacker-gem！

有关如何在文档中使用templateUrl的说明：Use HTML templates with Typescript and Angular

Answer 2

如果您想保留templateUrl，可以使用angular2-template-loader webpack插件：

# add plugins to project
yarn add angular2-template-loader raw-loader

并配置它：

# edit config/webpack/loaders/angular.js with
module.exports = {
    test: /.ts$/,
    loaders: ['ts-loader', 'angular2-template-loader'],
    exclude: [/\.(spec|e2e)\.ts$/]
}

# create a new loader for htmls config/webpack/loaders/html.js
module.exports = {
    test: /\.(html)$/,
    loader: 'raw-loader',
    exclude: /\.async\.(html)$/
}

找不到Angular 4 templateUrl文件

2 个答案: