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.

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.