我在用角度6打包项目时遇到一些问题，当我运行“ node_modules.bin \ webpack”时出现以下错误：
./ src / app / template / header / header.component.ts中的错误找到：错误：无法解析“ src / app / services / authentication.service”在'C：\ GitHub \ project-app \ src \ app \ template \ header'@./src/app/template/header/header.component.ts 13：0-80 55：41-62 @./src/app/app.module.ts @ ./src/main.ts
./ src / app / template / header / header.component.ts中的错误找到：错误：无法解析“ src / app / services / local-storage.service”在'C：\ GitHub \ project-app \ src \ app \ template \ header'@./src/app/template/header/header.component.ts 12：0-77 57：12-31 @./src/app/app.module.ts @ ./src/main.ts
./ src / app / services / authentication.service.ts模块中没有错误找到：错误：无法解析“ src / environments / environment”'C：\ GitHub \ project-app \ src \ app \ services'@./src/app/services/authentication.service.ts 16：0-59 55：24-35 56：28-3958：30-41 76：30-41 @ ./src/app/login/login.component.ts @./src/app/app.module.ts @ ./src/main.ts
我不知道为什么这种情况会发生，当我正常工作或正常运行时，效果很好。我做了一个简单的项目，再次配置了所有内容，并且工作正常，但无法在该项目中进行。
//webpack config
var webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'none',
devtool: 'inline-source-map',
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'mainApp': './src/main.ts'
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "mainApp",
filename: 'index.html',
template: 'src/index.html',
chunks: ['polyfills', 'vendor', 'mainApp']
}),
new ManifestPlugin(),
new CopyWebpackPlugin([
{ from: './src/assets', to: 'assets' }
])
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss', '.html'],
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: /node_modules/
},
{
test: /\.html$/,
loaders: ['html-loader']
},
{
test: /\.(woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
},
{
test: /\.json$/,
loader: 'json-loader',
include: path.dirname(__dirname, "src/assets")
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
include: path.dirname(__dirname, "src/assets")
}
]
},
devServer: {
port: 4200
}
}
//tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types",
"./typings"
],
"lib": [
"es6",
"es2017",
"dom"
],
"paths": {
"@angular/*": [
"./node_modules/@angular/*"
]
},
"types": [
"core-js",
"node"
]
},
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
//package jason
{
"name": "project-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": false,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@angular/upgrade": "^8.2.14",
"angular-oauth2-oidc": "^4.0.3",
"core-js": "^2.6.11",
"hammerjs": "^2.0.8",
"ngx-webstorage-service": "^4.1.0",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
"sweetalert": "^2.1.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.2",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@angularclass/hmr": "^2.1.3",
"@angularclass/hmr-loader": "^3.0.4",
"@types/core-js": "^2.5.2",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "^2.0.8",
"@types/node": "~8.9.4",
"angular2-template-loader": "^0.6.2",
"clean-webpack-plugin": "^0.1.19",
"codelyzer": "~4.2.1",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-loader": "^0.5.7",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"null-loader": "^3.0.0",
"protractor": "~5.3.0",
"raw-loader": "^4.0.0",
"style-loader": "^1.1.2",
"ts-loader": "^6.2.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^4.2.2"
}
}
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'src/app/services/local-storage.service';
import { AuthenticationService } from 'src/app/services/authentication.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
//...
}
已解决的更改自动路径：
from:
import { LocalStorageService } from 'src/app/services/local-storage.service';
import { AuthenticationService } from 'src/app/services/authentication.service';
to
import { LocalStorageService } from '../../services/local-storage.service';
import { AuthenticationService } from '../../services/authentication.service';