我有angularjs和angular2组合项目，我想将styleUrls导入到app.component.ts中，但是它给我一个错误“期望'styles'为字符串数组”。调试了前端，并为样式提供了未定义的样式，之后将其填充为空对象。
在我的webpack.config中尝试了不同的css加载器，但仍然是相同的错误。有人解决了这个问题吗？
webpack.common.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var helpers = require('./helpers');
var ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
var TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: {
'app-cli': './app-cli/main.ts',
'polyfills': './app-cli/polyfills.ts'
},
resolve: {
extensions: ['.ts', '.js', '.json'],
modules: [helpers.root('app-cli'), helpers.root('node_modules')]
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: 'tsconfig.json' }
} , 'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
// For ngx-datatable which imports a css file. Loader is required for AOT compile to succeed.
test: /\.css$/,
use: ['to-string-loader', 'css-loader']
}
]
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
}),
],
namedModules: true,
runtimeChunk: true,
concatenateModules: true
},
plugins: [
new ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)src(\\|\/)linker/,
helpers.root('app-cli'), // Source location
{/* Angular Async Route paths relative to this root directory */}
),
new HtmlWebpackPlugin({
template: 'app-cli/index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css'
})
]
};
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './modules/security/login/login.html',
styleUrls: [
'./styles/bootstrap.css',
'./styles/login-custom.css',
'./styles/login-custom-ext.css']
})
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"module": "commonjs",
"allowJs": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noStrictGenericChecks": true,
"allowSyntheticDefaultImports": true,
"removeComments": false,
"noImplicitAny": false,
"noImplicitThis": false,
"suppressImplicitAnyIndexErrors": true,
"outputHashing": "all",
"extractCss": true,
"namedChunks": false,
"buildOptimizer": false,
"baseUrl": ".",
"target": "es5",
"files": [
"node_modules/moment/moment.d.ts"
],
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es6",
"dom",
"scripthost"
],
"types": [
"node",
"google.analytics",
"jquery"
],
"paths": {
"@tet/*": [
"app-cli/modules/*",
"/common/app/modules/*"
],
"@angular/*": ["./node_modules/@angular/*"]
},
"exclude": [
"node_modules"
]
}
}
package.json
{
"name": "redis-cli",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"serve": "ng serve --development",
"build": "webpack --config webpack.config.js --mode=development",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "2.4.10",
"@angular/compiler": "2.4.10",
"@angular/http": "2.4.10",
"@angular/core": "2.4.10",
"@angular/forms": "2.4.10",
"@angular/platform-browser": "2.4.10",
"@angular/platform-browser-dynamic": "2.4.10",
"@angular/platform-server": "2.4.10",
"@angular/router": "3.4.10",
"@angular/upgrade": "2.4.10",
"angular": "1.7.8",
"angular-animate": "1.5.9",
"angular-cookies": "1.5.9",
"angular-elastic": "2.5.1",
"angular-hotkeys": "^1.7.0",
"angular-i18n": "1.5.9",
"angular-loading-bar": "0.*",
"angular-resource": "1.5.9",
"angular-route": "1.5.9",
"angular-sanitize": "1.5.9",
"angular-scroll": "~0.7.1",
"angular-touch": "^1.5.9",
"angular-ui-bootstrap": "2.5.6",
"angular-utf8-base64": "~0.0.5",
"bootstrap-sass": "^3.3.7",
"codelyzer": "4.4.4",
"core-js": "2.5.3",
"crypto-js": "3.1.9-1",
"cryptojslib": "~3.1.2",
"daterangepicker": "^3.0.3",
"enhanced-resolve": "^3.3.0",
"eslint": "^3.9.1",
"eslint-html-reporter": "^0.5.2",
"postcss-loader": "2.0.8",
"eslint-plugin-angular": "^1.4.1",
"eslint-plugin-nortal": "0.0.1",
"fileapi": "2.0.25",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "3.0.7",
"intl": "^1.2.5",
"isikukood": "1.2.3",
"jquery": "^3.3.1",
"lodash": "3.10.1",
"message-center": "^0.1.10",
"moment": "2.9.0",
"ng-file-upload": "3.2.*",
"ng-table": "0.5.*",
"ngx-bootstrap": "1.6.2",
"oi.select": "^0.2.21",
"pako": "1.0.6",
"reflect-metadata": "0.1.2",
"rxjs": "^5.0.1",
"split.js": "^1.3.5",
"tsconfig-paths-webpack-plugin": "3.2.0",
"ua-parser-js": "0.7.18",
"ui-router": "^1.0.0-alpha.3",
"web-animations-js": "^2.3.2",
"webpack-merge": "^3.0.0",
"yarn": "^1.17.3",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "1.7.4",
"@angular/compiler-cli": "2.4.10",
"@types/google.analytics": "0.0.39",
"@types/jquery": "<3.3.28",
"@types/node": "^12.0.5",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^3.0.4",
"tsconfig-paths-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.8.0",
"html-loader": "^0.4.3",
"to-string-loader": "^1.1.5",
"css-loader": "^0.26.1",
"file-loader": "^4.2.0",
"grunt": "0.4.0",
"tslint": "^5.0.0",
"typescript": "2.6.1",
"webpack": "^4.4.0",
"webpack-cli": "3.3.6",
"webpack-dev-server": "3.4.1",
"webpack-merge": "^3.0.0"
}
}