Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Universal Can't find modules

I have set up an angular universal app using angular 5.2.10 When I attempt to build it with angular cli and webpack for server.ts it seems my modules are not found.

What works:

ng build -prod --build-optimizer --app 0 

&&

ng build --aot --app 1 --output-hashing=false

What doesn't:

webpack --config webpack.config.js --progress --colors

Error:

ERROR in /src/app/util/wnumb.ts
[tsl] ERROR in /src/app/util/wnumb.ts(1,26)
  TS2307: Cannot find module '@angular/core'.

ERROR in /src/app/terms-and-conditions/terms-and-conditions.component.ts
[tsl] ERROR in /src/app/terms-and-conditions/terms-and- 
conditions.component.ts(1,27)
  TS2307: Cannot find module '@angular/core'.

ERROR in /src/app/terms-and-conditions/terms-and-conditions.component.ts
[tsl] ERROR in /src/app/terms-and-conditions/terms-and- 
conditions.component.ts(2,24)
  TS2307: Cannot find module '@angular/router'.

My webpack.config.js file:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: { server: './src/server.ts' },
  resolve: { extensions: ['.js','.ts'] },
  target: 'node',
  // this makes sure we include node_modules and other 3rd party libraries
  externals: [/(node_modules|main\..*\.js)/],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'),
      {}
    )
  ]
};

And my tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./src/",
    "removeComments": true,
    "sourceMap": true,
    "target": "es2017",
    "typeRoots": [
      "./node_modules/@types"
    ]
  }
}

Note: Any assistance would be greatly appreciated.

like image 807
Seth Hays Avatar asked Aug 22 '26 15:08

Seth Hays


1 Answers

In case someone else runs into this it looks like adding the following to my tsconfig.json file fixed it:

"moduleResolution": "node",

tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./src/",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": true,
    "target": "es2017",
    "typeRoots": [
      "./node_modules/@types"
    ]
  }
}
like image 50
Seth Hays Avatar answered Aug 26 '26 13:08

Seth Hays



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!