我正在尝试使用angular 6 webpack 4构建webpack开发环境 这是我编译成功后得到的错误 Error
webpack.config.common
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app/main.ts',
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
loaders: ['html-loader']
},
{
test: /\.css$/,
loaders: ['raw-loader']
},
{
test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: ['url-loader?limit=100000']
}
],
exprContextCritical: false
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
webpack.config.dev
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js',
chunkFilename: '[id].chunk.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
}
]
},
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": ["es5", "dom"]
}
}
MainComponnent
import { User } from '../models/user.model';
import {
Component,
OnInit,
ChangeDetectionStrategy,
NgZone
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../user.service';
import { PlatformLocation } from '@angular/common';
import { ConnectionService } from '../app/connection.service';
import { AlertMessageDialogComponent } from '../alertMessageDialog/alertmessagedialog.component';
import { MainService } from './main.service';
@Component({
selector: 'main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
private userClaims: User;
ngOnInit(): void {
// this.getUserDetailstoMain();
this.userService.getUserClaims().subscribe((data: any) => {
this.userClaims = data;
let NameArray = this.userClaims['User']['FullName'].split(' ', 2);
this.globalItems.UserFirstName = NameArray[0];
this.globalItems.UserLastName = NameArray[1];
this.globalItems.UserPhoto = this.userClaims['User']['UserPhoto'];
});
}
constructor(
private userService: UserService,
private location: PlatformLocation,
private router: Router,
private connectionService: ConnectionService,
private globalItems: MainService,
private zone: NgZone
) {}
logOut(event) {
sessionStorage.clear();
this.zone.runOutsideAngular(() => {
location.reload();
});
}
}
{
"name": "cloud-crp",
"version": "0.0.0",
"license": "MIT",
"main": "index.js",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"build": "webpack-dev-server --inline --progress --port 8080 --config webpack.config.dev.js",
"build:prod": "del-cli dist && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'src/app/**/*.js' 'src/app/**/*.ngfactory.ts' 'src/app/**/*.js.map' 'src/app/**/*.shim.ts' 'src/app/**/*.ngsummary.json' 'src/app/**/*.ngstyle.ts' 'dist/app' 'src/polyfills.ngsummary.json'",
"clean": "del-cli dist && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && del-cli 'src/app/**/*.js' 'src/app/**/*.ngfactory.ts' 'src/app/**/*.js.map' 'src/app/**/*.shim.ts' 'src/app/**/*.ngsummary.json' 'src/app/**/*.ngstyle.ts' 'dist/app' 'src/polyfills.ngsummary.json'",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^5.2.5",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^6.0.0",
"@angular/upgrade": "^6.0.0",
"@auth0/angular-jwt": "^1.1.0",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"@swimlane/ngx-charts": "^7.0.1",
"angular": "^1.6.9",
"angular-font-awesome": "^3.1.2",
"angular2-focus": "^1.1.2",
"angular2-highcharts": "^0.5.5",
"angular2-mdl": "^2.13.2",
"chart.js": "^2.7.2",
"core-js": "^2.4.1",
"d3": "^4.13.0",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"jsonwebtoken": "^8.2.0",
"jwt-decode": "^2.2.0",
"material-design-lite": "^1.3.0",
"moment": "^2.20.1",
"ng-inline-svg": "^6.0.0",
"ng2-completer": "^1.6.3",
"ng2-dropdown-multiselect": "^1.2.0",
"ng2-file-upload": "^1.3.0",
"ng2-kw-gauge": "^0.0.8",
"ng2-password-strength-bar": "^1.2.0",
"ng2-select": "^2.0.0",
"ngx-bootstrap": "^2.0.3",
"ngx-pipes": "^2.1.2",
"ngx-popper": "^2.7.1",
"object-fit-images": "^3.2.3",
"popper.js": "^1.12.9",
"primeng": "^5.2.0",
"resolve-url-loader": "^2.2.1",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.1.0",
"tether": "^1.4.4",
"ts-helpers": "^1.1.2",
"url-loader": "^0.6.2",
"zone.js": "^0.8.5"
},
"devDependencies": {
"@angular/animations": "^5.2.5",
"@angular/cli": "^1.7.3",
"@angular/common": "^5.2.5",
"@angular/compiler-cli": "^5.2.5",
"@ngtools/webpack": "^1.10.2",
"@types/hammerjs": "^2.0.35",
"@types/jasmine": "2.8.6",
"@types/jquery": "^3.3.0",
"@types/node": "7.0.7",
"angular-2-dropdown-multiselect": "^1.7.1",
"angular-router-loader": "^0.6.0",
"angular2-justgage": "^0.3.0",
"angular2-recaptcha": "^0.6.0",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.5.0",
"bootstrap": "^3.3.7",
"bootstrap-loader": "^2.2.0",
"bootstrap-sass": "^3.3.7",
"chart.js": "^2.7.2",
"codelyzer": "~4.1.0",
"css-loader": "^0.28.11",
"del-cli": "^0.2.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "^2.99.1",
"jasmine-spec-reporter": "4.2.1",
"jquery": "^3.3.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.1",
"karma-remap-istanbul": "^0.6.0",
"lite-server": "^2.3.0",
"ng2-bootstrap": "^1.6.3",
"node-sass": "^4.9.0",
"popper.js": "^1.14.3",
"protractor": "~5.3.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.3.0",
"rxjs": "^5.5.6",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"tether": "^1.4.3",
"ts-node": "^4.1.0",
"tslint": "^5.9.1",
"typescript": "2.7.2",
"url-loader": "^0.6.2",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
}
答案 0 :(得分：0)
所以我在package.json中看到了一些差异：
一方面你有：
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^5.2.5",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/core": "^6.0.0",
...
}
另一方面，你有：
"devDependencies": {
"@angular/animations": "^5.2.5",
"@angular/cli": "^1.7.3",
"@angular/common": "^5.2.5",
"@angular/compiler-cli": "^5.2.5",
...
}
我建议您在^6.0.0周围进行合并，并将@angular/cli留在devDependencies。
其次，如果您正在寻找它，Angular的Webpack AoT编译器插件位于@ngtools/webpack，您需要在devDependencies中安装。