Module not found: Error: Can’t resolve

Hi guys,

I am trying to migrate my project to webpack, but I’ve been struggling a lot with this issue:

ERROR in ./app/app.component.ts
Module not found: Error: Can't resolve '@common' in 
 @ ./app/app.component.ts 16:16-34
 @ ./app/app.module.ts
 @ ./app/main.ts

I have a custom library that I want to include in my build, this library was created with typescript and AMD modules. I’m also using an index file to re-export stuff and the import everything with something like:

import { a,b,c,d,e,f,g } from '@common'

I have the following project structure:

--app/ 
-----dir1/
-----app.module.ts
-----app.component.ts
-----main.ts 
--scripts/
---_app/ 
-----common.d.ts
-----common.js
--webpack.config.js
--tsconfig.js

My webpack.config:

entry: {
       vendor: './src/vendor',
       //util: './scripts/_app/util.js',
       //common: './scripts/_app/common.js',
       app: './app/main'
   },
output: {
       filename: "[name].js",
       path: __dirname + "/dist",
       // Making sure the CSS and JS files that are split out do not break the template cshtml.
       publicPath: "/dist/",
       // Defining a global var that can used to call functions from within ASP.NET Razor pages.
       library: "app",
       libraryTarget: "var"
   },
resolve: {
       // Add ".ts" and ".tsx" as resolvable extensions.
       extensions: [".js", ".tsx", ".ts", ".json", ".html"],
       modules: [
           path.resolve('.'),
           path.join(__dirname, "./scripts/_app"),
           path.resolve('./node_modules')
       ]
   },
   module: {
       loaders: [
           // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
           {
               test: /\.tsx?$/,
               loader: 'ts-loader'
           },

I tried with ts-loader and awesome-typescript-loader with no luck.

Author: Fantashit

1 thought on “Module not found: Error: Can’t resolve

  1. It looks like you just deleted/ignored our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I’m closing this. Please open a new issue with filled issue template. Also make sure your issue is not a question. Questions should be posted on Stack Overflow.

Comments are closed.

Module not found: Error: Can’t resolve ‘./’

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 8

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here:
@angular/cli: 1.0.0-beta.32.3
node: 6.9.2
os: win32 x64

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.

npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/cli@latest
ng new sample
copied app folder from old-sample to new sample
ng serve

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in ./src/app/user/reset-password/reset.password.component.css
Module not found: Error: Can’t resolve ‘./’ in ‘C:\webweb\src\app\user
t\reset-password’
@ ./src/app/user/reset-password/reset.password.component.css 6:353-3
66
@ ./src/app/user/reset-password/reset-password.component.ts
@ ./src/app/user/index.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./src/app/user/login/login.test.component.css
Module not found: Error: Can’t resolve ‘./’ in ‘C:\webweb\src\app\user\login’
@ ./src/app/user/login/login.test.component.css 6:363-376
@ ./src/app/usert/login/login.test.component.ts
@ ./src/app/user/index.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

ERROR in ./src/app/user/forgot-password/forgot-password.component.css

Module not found: Error: Can’t resolve ‘./’ in ‘C:\webweb\src\app\user\forgot-password’
@ ./src/app/user/forgot-password/forgot-password.component.css 6:353
-366
@ ./src/app/user/forgot-password/forgot-password.component.ts
@ ./src/app/user/index.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Mention any other details that might be useful.

this error started when i did upgrade angular/cli
i thought the errors could be as a result of referencing css
changed and swap between the following but still didnt work

styleUrls:['./forgot-password.component.css']
styleUrls:['forgot-password.component.css']

Thanks! We’ll be in touch soon.

Author: Fantashit

2 thoughts on “Module not found: Error: Can’t resolve ‘./’

Comments are closed.