首页 文章

通过Webpack忽略Angular 5 templateUrl

提问于
浏览
0

所以我有两个项目,第一个是包含可重用资产的实用程序项目,包括自定义服务和Angular组件 . 第二个是客户端项目,它将通过node_modules使用此实用程序项目 .

我目前正在使用Angular 5.1.1和Webpack 3.10.0通过AOT构建并通过Webpack捆绑到一个名为bundle.js的文件中

实用程序项目构建为commonjs构建和ngc(aot)5.1.1,因此实用程序项目的输出是可重用的aot模块 . 问题出在客户端及其生成的bundle.js文件中 . utilties项目包含使用templateUrl / styleUrls的Angular组件以及每个组件的html和css文件的相对路径 . 当我构建客户端(通过node_modules利用这个实用程序的内置版本)时,webpack根本没有引用每个组件的实用程序项目的html部分,因此bundle.js中缺少它

Webpack确实成功导入了utiltities模块和服务,但是templateUrl和StyleUrl保持不变 . 因此,当我启动浏览器时,它所抱怨的文件是在实用程序中返回的html文件(node_modules)

我的webpack在下面......

const path = require('path');

module.exports = {
    entry: './main.ts',
    output: {
        filename: 'bundle.js',
        sourceMapFilename: "bundle.js.map",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {

        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/],
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                loaders: ['raw-loader', 'style-loader', 'css-loader']
            },
        ]
    },
};

来自我的bundle.js的片段,MyComponent在作为node_modules的一部分提供的实用程序项目中,请注意Urls的问题

MyComponent.decorators = [
	{ type: __WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */], args: [{
				moduleId: module.i.toString(),
				selector: "my-component",
				styleUrls: ["my-component.css"],
				templateUrl: "my-component.html",
				animations: [
					__WEBPACK_IMPORTED_MODULE_2__core_my_animation_module__["a" /* MyAnimationModule */].scaleHeight("scaleHeight", "175ms"),
				],
				providers: [{ provide: __WEBPACK_IMPORTED_MODULE_1__directives_my_selectable_item_directive__["a" /* MySelectableItemDirective */], useExisting: Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_19" /* forwardRef */])(function () { return MyComponent; }) }],
			},] },

1 回答

相关问题