Question

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

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

实用程序项目构建为commonjs build和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）

我的网络包在下面......

＆＃13;

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']
            },
        ]
    },
};

＆＃13;

我的bundle.js中的一个片段，MyComponent位于作为node_modules的一部分提供的实用程序项目中，请注意Urls的问题

＆＃13;

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; }) }],
			},] },

＆＃13;

Answer 1

我在'template'中使用'templateUrl'代替@Component解决了问题。请参阅What are differences of using Component template vs templateUrl in Angular2 Typescript

通过Webpack

1 个答案: