在带有 Webpack 和 Typescript 的 AngularJS 1.5 组件中使用外部 HTML 模板

Posted

技术标签:

【中文标题】在带有 Webpack 和 Typescript 的 AngularJS 1.5 组件中使用外部 HTML 模板【英文标题】:Using an external HTML template in AngularJS 1.5 component with Webpack and Typescript 【发布时间】:2016-09-14 11:11:31 【问题描述】:

我正在尝试将外部 html 文件加载到我的 Angular 组件中:

import  LoginController  from './login.controller';
import './login.scss';
import './login.html';

class LoginComponent implements ng.IComponentOptions 

    public template: string;
    public controller: Function;
    public bindings : any;

    constructor()
        this.controller = LoginController;
        this.bindings = 
            username: '@',
            password: '@'
        ;
        this.template = //login.html referred to here
    



export  LoginComponent ;

我正在使用带有以下tsconfig.json 的打字稿:


  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  ,
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]

我正在尝试使用html-loader 加载。

我不知道如何在组件本身中引用导入的 HTML?

webpack 构建有效。

【问题讨论】:

【参考方案1】:

自己解决了。

我必须在我的typings.json 中添加打字稿定义以供要求。

typings install --save --global require

现在像魅力一样工作:)

【讨论】:

以上是关于在带有 Webpack 和 Typescript 的 AngularJS 1.5 组件中使用外部 HTML 模板的主要内容,如果未能解决你的问题,请参考以下文章

在带有 Webpack 和 Typescript 的 AngularJS 1.5 组件中使用外部 HTML 模板

带有 typescript 的 Webpack 得到 TypeScript 没有输出错误

带有 es6 导入的 Module.exports 用于 typescript 中的 webpack.config.ts

带有 webpack 别名的 Vue-typescript 错误,找不到路径

require 没有在带有 ipcRenderer.on 的 Electron-React-Webpack-Typescript 应用程序中定义

带有 NestJS + Typescript + Webpack + node_modules 的单个文件包