I'm having some problems with webpacking a project in angular 6, when i run "node_modules.bin\webpack" get the following error:
ERROR in ./src/app/template/header/header.component.ts Module not found: Error: Can't resolve 'src/app/services/authentication.service' in '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
ERROR in ./src/app/template/header/header.component.ts Module not found: Error: Can't resolve 'src/app/services/local-storage.service' in '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
ERROR in ./src/app/services/authentication.service.ts Module not found: Error: Can't resolve 'src/environments/environment' in 'C:\GitHub\project-app\src\app\services' @ ./src/app/services/authentication.service.ts 16:0-59 55:24-35 56:28-39 58:30-41 76:30-41 @ ./src/app/login/login.component.ts @ ./src/app/app.module.ts @ ./src/main.ts
I have no idea why this is happening, when i buil or run normaly, works just fine. I've made a simple project, configured everything again and worked just fine, but cant in this project.
//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 {
//...
}
